well, the color scheme itself is originated from this exact website, the one currently you presumably are on… but I liked it so much I ported the palette to my Forgejo and Navidrome instances at first. the source code itself for the palette spec and the tools I use for generating the palette for varied software is available at git.celikci.me/egecelikci/motif. the colors are bound to change depending on my usage.
WCAG 2.2 AA. Every text/background pair a target ships must meet 4.5:1, and UI borders and non-text indicators 3:1. Legibility comes first when the two conflict.
palette
light
32 tokens
- bgpage background#fef6e4
- surfaceraised surfaces: cards, menus, popovers#f3e1d8
- textprimary body text#172c66
- textMutedsecondary text, placeholders, timestamps (verified against every surface a target ships)#45527e
- borderdividers and input borders#f3d2c1
- borderHoverinput border on hover/focus#e3b79d
- primarybrand accent: links, primary buttons, focus#a60c49
- primaryOffsetprimary hover/pressed#8a0a3d
- secondarysupporting accent#2d6a7a
- hue-named accents (red, orange, yellow, green, cyan, blue, magenta): the colors programs mean by name. Each sits in its own hue family and at the same contrast on bg, so none outshouts another
hues
- red#955250
- orange#8f5833
- yellow#7d611f
- green#466f3d
- cyan#00716f
- blue#2e6a93
- magenta#8a537a
terminal
the 16 ANSI colors a terminal paints with: the normal slots are the hues, black/white are tones of bg and text, the brights are the same hues one step further from bg
- #172c66black
- #955250red
- #466f3dgreen
- #7d611fyellow
- #2e6a93blue
- #8a537amagenta
- #00716fcyan
- #45527ewhite
- #657088brightBlack
- #834140brightRed
- #355e2cbrightGreen
- #6c5005brightYellow
- #1a5981brightBlue
- #784368brightMagenta
- #005f5dbrightCyan
- #172c66brightWhite
dark
32 tokens
- bgpage background#3a2a55
- surfaceraised surfaces: cards, menus, popovers#4a3a6a
- textprimary body text#e8e2f3
- textMutedsecondary text, placeholders, timestamps (verified against every surface a target ships)#d0c8e8
- borderdividers and input borders#52427a
- borderHoverinput border on hover/focus#6b5794
- primarybrand accent: links, primary buttons, focus#ff8e8c
- primaryOffsetprimary hover/pressed#ef5a58
- secondarysupporting accent#abd1c6
- hue-named accents (red, orange, yellow, green, cyan, blue, magenta): the colors programs mean by name. Each sits in its own hue family and at the same contrast on bg, so none outshouts another
hues
- red#e69c98
- orange#dfa27b
- yellow#caab6b
- green#8ebb84
- cyan#5fbeba
- blue#78b6e2
- magenta#d99dc6
terminal
the 16 ANSI colors a terminal paints with: the normal slots are the hues, black/white are tones of bg and text, the brights are the same hues one step further from bg
- #251939black
- #e69c98red
- #8ebb84green
- #caab6byellow
- #78b6e2blue
- #d99dc6magenta
- #5fbebacyan
- #d0c8e8white
- #a097b2brightBlack
- #faaeaabrightRed
- #a0ce96brightGreen
- #ddbe7ebrightYellow
- #8bc9f6brightBlue
- #edafd9brightMagenta
- #73d1cebrightCyan
- #e8e2f3brightWhite