phocus.github.io

phocus

Is a color scheme that comes with clean, opinionated and technical debt free implementations (themes) for various tools.

Colors

The colors are separated into two groups:

Surface colors

Interface backgrounds that fill most of the area available and only have little contrast to each other.

  Type HEX RGB HSL
surface strongest strongest #0A0A0A rgb(10, 10, 10) hsl(0, 0%, 4%)
surface strong strong #141414 rgb(20, 20, 20) hsl(0, 0%, 8%)
surface moderate moderate #1C1C1C rgb(28, 28, 28) hsl(0, 0%, 11%)
surface weak weak #222222 rgb(34, 34, 34) hsl(0, 0%, 13%)
surface weakest weakest #282828 rgb(40, 40, 40) hsl(0, 0%, 16%)

adjacent surface colors have roughly a contrast of 1.07:1

Accent colors

Monochromatic color sets used to elevate or emphasize things, such as element surfaces, texts, lines and icons.

Monochrome accent colors

Are used to elevate neutral things depending on their importance.

  Name Type HEX RGB HSL
accent monochrome white strongest white strongest #FFFFFF rgb(255, 255, 255) hsl(0, 0%, 100%)
accent monochrome white strong white strong #FFFFFFDE rgba(255, 255, 255, 0.87) hsla(0, 0%, 100%, 0.87)
accent monochrome white moderate white moderate #FFFFFF57 rgba(255, 255, 255, 0.34) hsla(0, 0%, 100%, 0.34)
accent monochrome white weak white weak #FFFFFF23 rgba(255, 255, 255, 0.14) hsla(0, 0%, 100%, 0.14)
accent monochrome white weakest white weakest #FFFFFF0F rgba(255, 255, 255, 0.06) hsla(0, 0%, 100%, 0.06)
accent monochrome black strongest black strongest #000000 rgb(0, 0, 0) hsl(0, 0%, 0%)
accent monochrome black strong black strong #000000DE rgba(0, 0, 0, 0.87) hsla(0, 0%, 0%, 0.87)
accent monochrome black moderate black moderate #0000006B rgba(0, 0, 0, 0.42) hsla(0, 0%, 0%, 0.42)
accent monochrome black weak black weak #00000026 rgba(0, 0, 0, 0.15) hsla(0, 0%, 0%, 0.15)
accent monochrome black weakest black weakest #0000000F rgba(0, 0, 0, 0.06) hsla(0, 0%, 0%, 0.06)

Saturated accent colors

Are used to elevate special and important things.

  Name Type HEX RGB HSL
accent colored red normal red normal #DA5858 rgb(218, 88, 88) hsl(0, 64%, 60%)
accent colored red light red light #E36D6D rgb(227, 109, 109) hsl(0, 68%, 66%)
accent colored orange normal orange normal #ED9454 rgb(237, 148, 84) hsl(25, 81%, 63%)
accent colored orange light orange light #FCA669 rgb(252, 166, 105) hsl(25, 96%, 70%)
accent colored yellow normal yellow normal #E8CA5E rgb(232, 202, 94) hsl(47, 75%, 64%)
accent colored yellow light yellow light #FADD75 rgb(250, 221, 117) hsl(47, 93%, 72%)
accent colored green normal green normal #3FC661 rgb(63, 198, 97) hsl(135, 54%, 51%)
accent colored green light green light #61D67E rgb(97, 214, 126) hsl(135, 59%, 61%)
accent colored cyan normal cyan normal #5CD8E6 rgb(92, 216, 230) hsl(186, 73%, 63%)
accent colored cyan light cyan light #7EEAF6 rgb(126, 234, 246) hsl(186, 87%, 73%)
accent colored blue normal blue normal #497EE9 rgb(73, 126, 233) hsl(220, 78%, 60%)
accent colored blue light blue light #5D8DEE rgb(93, 141, 238) hsl(220, 81%, 65%)
accent colored purple normal purple normal #7154F2 rgb(113, 84, 242) hsl(251, 86%, 64%)
accent colored purple light purple light #8066F5 rgb(128, 102, 245) hsl(251, 88%, 68%)
accent colored pink normal pink normal #D56CC3 rgb(213, 108, 195) hsl(310, 56%, 63%)
accent colored pink light pink light #DF81CF rgb(223, 129, 207) hsl(310, 59%, 69%)

light and normal color types have roughly a contrast of 1.2:1