A cool, focused color system for code editors and terminals — characterized by a blue-gray base and a consistent purple accent.
Monospace is extracted and formalized from Google's Project IDX Monospace theme. It is characterized by a cool blue-gray base that recedes into the background and a consistent purple accent that carries every interactive element — buttons, cursors, focus rings, active tab borders, and links — across both flavors. The syntax palette uses muted greens for strings, soft blues for constants and functions, warm yellows for variables, and dusty pinks for keywords. Switching between dark and light feels like changing the lighting in a room, not changing themes.
| Labels | Hex | RGB | HSL |
|---|
 | Background | #10151d | rgb(16, 21, 29) | hsl(217, 29%, 9%) |
 | Surface | #1f2939 | rgb(31, 41, 57) | hsl(217, 30%, 17%) |
 | Overlay | #293444 | rgb(41, 52, 68) | hsl(216, 25%, 21%) |
 | Muted | #333e4f | rgb(51, 62, 79) | hsl(216, 22%, 25%) |
 | Subtle | #3d495a | rgb(61, 73, 90) | hsl(215, 19%, 30%) |
 | Foreground | #d9dfe7 | rgb(217, 223, 231) | hsl(214, 23%, 88%) |
 | Muted Foreground | #8b98a9 | rgb(139, 152, 169) | hsl(214, 15%, 60%) |
 | Purple | #a87ffb | rgb(168, 127, 251) | hsl(260, 94%, 74%) |
 | Blue | #92a9ff | rgb(146, 169, 255) | hsl(227, 100%, 79%) |
 | Cyan | #85cdf1 | rgb(133, 205, 241) | hsl(200, 79%, 73%) |
 | Green | #77d5a3 | rgb(119, 213, 163) | hsl(148, 53%, 65%) |
 | Yellow | #ffd395 | rgb(255, 211, 149) | hsl(35, 100%, 79%) |
 | Pink | #fd8da3 | rgb(253, 141, 163) | hsl(348, 97%, 77%) |
 | Red | #f76769 | rgb(247, 103, 105) | hsl(359, 90%, 69%) |
 | Mauve | #bd9cfe | rgb(189, 156, 254) | hsl(260, 98%, 80%) |
| Labels | Hex | RGB | HSL |
|---|
 | Background | #f4f7fd | rgb(244, 247, 253) | hsl(220, 69%, 97%) |
 | Surface | #ffffff | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
 | Overlay | #e7ebf2 | rgb(231, 235, 242) | hsl(218, 30%, 93%) |
 | Muted | #d9dfe7 | rgb(217, 223, 231) | hsl(214, 23%, 88%) |
 | Subtle | #bfc7d2 | rgb(191, 199, 210) | hsl(215, 17%, 79%) |
 | Foreground | #1f2939 | rgb(31, 41, 57) | hsl(217, 30%, 17%) |
 | Muted Foreground | #738295 | rgb(115, 130, 149) | hsl(214, 14%, 52%) |
 | Purple | #6f4cde | rgb(111, 76, 222) | hsl(254, 69%, 58%) |
 | Blue | #264dcb | rgb(38, 77, 203) | hsl(226, 68%, 47%) |
 | Cyan | #0075a2 | rgb(0, 117, 162) | hsl(197, 100%, 32%) |
 | Green | #007b49 | rgb(0, 123, 73) | hsl(156, 100%, 24%) |
 | Yellow | #d07826 | rgb(208, 120, 38) | hsl(29, 69%, 48%) |
 | Pink | #c43058 | rgb(196, 48, 88) | hsl(344, 61%, 48%) |
 | Red | #df4047 | rgb(223, 64, 71) | hsl(357, 71%, 56%) |
 | Mauve | #6f4cde | rgb(111, 76, 222) | hsl(254, 69%, 58%) |
For details on how these colors map to syntax tokens, see the Syntax Roles section below.
| Token | Hex | RGB |
|---|
 | Black | #738295 | rgb(115, 130, 149) |
 | Red | #f76769 | rgb(247, 103, 105) |
 | Green | #17b877 | rgb(23, 184, 119) |
 | Yellow | #ffa23e | rgb(255, 162, 62) |
 | Blue | #708fff | rgb(112, 143, 255) |
 | Magenta | #a87ffb | rgb(168, 127, 251) |
 | Cyan | #25a6e9 | rgb(37, 166, 233) |
 | White | #a4afbd | rgb(164, 175, 189) |
 | Bright Black | #8b98a9 | rgb(139, 152, 169) |
 | Bright Red | #fc8f8e | rgb(252, 143, 142) |
 | Bright Green | #66ce98 | rgb(102, 206, 152) |
 | Bright Yellow | #ffc26e | rgb(255, 194, 110) |
 | Bright Blue | #a2b6ff | rgb(162, 182, 255) |
 | Bright Magenta | #c8aaff | rgb(200, 170, 255) |
 | Bright Cyan | #71c2ee | rgb(113, 194, 238) |
 | Bright White | #fafbfe | rgb(250, 251, 254) |
| Token | Hex | RGB |
|---|
 | Black | #333e4f | rgb(51, 62, 79) |
 | Red | #d03941 | rgb(208, 57, 65) |
 | Green | #007b49 | rgb(0, 123, 73) |
 | Yellow | #a65921 | rgb(166, 89, 33) |
 | Blue | #3c60dd | rgb(60, 96, 221) |
 | Magenta | #6f4cde | rgb(111, 76, 222) |
 | Cyan | #0075a2 | rgb(0, 117, 162) |
 | White | #5d6a7d | rgb(93, 106, 125) |
 | Bright Black | #000000 | rgb(0, 0, 0) |
 | Bright Red | #a52430 | rgb(165, 36, 48) |
 | Bright Green | #00522f | rgb(0, 82, 47) |
 | Bright Yellow | #904b1a | rgb(144, 75, 26) |
 | Bright Blue | #002487 | rgb(0, 36, 135) |
 | Bright Magenta | #4d21bb | rgb(77, 33, 187) |
 | Bright Cyan | #00607e | rgb(0, 96, 126) |
 | Bright White | #475365 | rgb(71, 83, 101) |
| Token | | Dark | | Light |
|---|
{{ Background_Color }} | | #10151d | | #f4f7fd |
{{ Foreground_Color }} | | #a4afbd | | #475365 |
{{ Bold_Color }} | | #d9dfe7 | | #1f2939 |
{{ Cursor_Color }} | | #c8aaff | | #6f4cde |
{{ Cursor_Text_Color }} | | #10151d | | #f4f7fd |
{{ Selection_Color }} |  | #264dcb80 |  | #c7d3ff99 |
{{ Selected_Text_Color }} | | #d9dfe7 | | #1f2939 |
How the palette colors map to code tokens across both flavors.
| Role | | Dark | | Light | Used for |
|---|
| Keywords / Storage | | #fd8da3 | | #c43058 | if, const, function, class |
| Strings | | #77d5a3 | | #007b49 | String literals, template literals, regex |
| Constants / Support | | #92a9ff | | #264dcb | Numeric constants, built-in support |
| Variables | | #ffd395 | | #d07826 | Variable names, parameters |
| Functions / Classes | | #92a9ff | | #264dcb | Function names, class names |
| Properties / HTML attrs | | #85cdf1 | | #0075a2 | Object keys, HTML/XML attributes |
| Tags | | #77d5a3 | | #007b49 | HTML/JSX tags |
| Types / Entities | | #bd9cfe | | #6f4cde | Type names, entity names |
| Comments |  | #7f8d9f |  | #637083 | Inline and block comments |
| Errors / Invalid |  | #ffc6d0 |  | #ad1c48 | Invalid tokens, errors |
MIT License
