Color palette¶

GENERATED by tools/design-tokens/tokens.py from design/tokens. Do not edit; change the source and generate again.

Primitive tonal scales in OKLCH and their sRGB values. Components use only the semantic roles further down. Images: Palette light, Palette dark. Rationale for the color choice: README.md.

Columns "to white" and "to black": WCAG contrast ratio against #ffffff and #000000 respectively.

spruce¶

Step	Hex	OKLCH (L, C, H)	to white	to black
50	`#e4fbf8`	0.97, 0.0236, 188	1.08	19.45
100	`#ccf5f0`	0.94, 0.0425, 188	1.17	17.89
200	`#a8e8e1`	0.885, 0.0649, 188	1.37	15.29
300	`#7cd5cd`	0.815, 0.0873, 188	1.71	12.26
400	`#49c0b7`	0.74, 0.1062, 188	2.21	9.51
500	`#22a79e`	0.66, 0.1079, 188	2.96	7.09
600	`#1b8a83`	0.575, 0.094, 188	4.19	5.01
700	`#136f69`	0.49, 0.0801, 188	5.99	3.51
800	`#0c5450`	0.405, 0.0662, 188	8.75	2.40
850	`#0f4643`	0.36, 0.056, 188	10.62	1.98
900	`#063b38`	0.32, 0.0523, 188	12.42	1.69
925	`#08312e`	0.285, 0.044, 188	14.10	1.49
950	`#032624`	0.245, 0.0401, 188	16.07	1.31
975	`#041c1a`	0.205, 0.03, 188	17.70	1.19

gorse¶

Step	Hex	OKLCH (L, C, H)	to white	to black
50	`#fef5aa`	0.96, 0.094, 102	1.11	18.86
100	`#fbef8e`	0.94, 0.119, 102	1.18	17.84
200	`#eddc59`	0.885, 0.1505, 102	1.40	14.98
300	`#d9c42b`	0.815, 0.1598, 101	1.77	11.88
400	`#c2ab24`	0.74, 0.1442, 99	2.30	9.14
500	`#a8921d`	0.66, 0.1279, 97	3.09	6.79
600	`#8d7716`	0.575, 0.111, 95	4.39	4.78
700	`#735e10`	0.49, 0.0943, 93	6.29	3.34
800	`#59470a`	0.405, 0.0778, 91	9.01	2.33
900	`#3f3105`	0.32, 0.0615, 90	12.71	1.65
950	`#291f02`	0.245, 0.0471, 89	16.26	1.29

moss¶

Step	Hex	OKLCH (L, C, H)	to white	to black
50	`#e4fde8`	0.97, 0.0372, 150	1.08	19.51
100	`#cff8d6`	0.94, 0.062, 150	1.16	18.05
200	`#afeaba`	0.885, 0.0899, 150	1.37	15.30
300	`#89d89a`	0.815, 0.1178, 150	1.70	12.35
400	`#62c37a`	0.74, 0.1395, 150	2.19	9.61
500	`#3cab5e`	0.66, 0.1519, 150	2.93	7.18
600	`#1b9046`	0.575, 0.1489, 150	4.10	5.12
700	`#137337`	0.49, 0.1269, 150	5.94	3.54
800	`#0c5828`	0.405, 0.1049, 150	8.60	2.44
900	`#063e1a`	0.32, 0.0829, 150	12.27	1.71
950	`#03280f`	0.245, 0.0635, 150	15.98	1.31

rowan¶

Step	Hex	OKLCH (L, C, H)	to white	to black
50	`#fef2f0`	0.97, 0.0138, 25	1.10	19.17
100	`#fee4e2`	0.94, 0.0283, 25	1.21	17.41
200	`#fdcbc6`	0.885, 0.057, 25	1.44	14.53
300	`#fcaaa3`	0.815, 0.098, 25	1.84	11.42
400	`#fb827a`	0.74, 0.1488, 25	2.45	8.58
500	`#f15653`	0.66, 0.1911, 25	3.39	6.20
600	`#d43538`	0.575, 0.195, 25	4.81	4.37
700	`#b21622`	0.49, 0.1867, 25	6.93	3.03
800	`#890f18`	0.405, 0.1544, 25	9.79	2.15
900	`#63080e`	0.32, 0.122, 25	13.36	1.57
950	`#430307`	0.245, 0.0934, 25	16.74	1.25

amber¶

Step	Hex	OKLCH (L, C, H)	to white	to black
50	`#fef3ea`	0.97, 0.0174, 60	1.09	19.22
100	`#fee6d4`	0.94, 0.0355, 60	1.20	17.48
200	`#fdcfaa`	0.885, 0.0709, 60	1.43	14.68
300	`#fcaf6f`	0.815, 0.1205, 60	1.83	11.50
400	`#ec9340`	0.74, 0.144, 60	2.38	8.81
500	`#d1791d`	0.66, 0.1455, 60	3.25	6.46
600	`#ae6416`	0.575, 0.1268, 60	4.53	4.63
700	`#8c4f10`	0.49, 0.108, 60	6.48	3.24
800	`#6b3b09`	0.405, 0.0893, 60	9.31	2.25
900	`#4c2905`	0.32, 0.0706, 60	12.91	1.63
950	`#331902`	0.245, 0.054, 60	16.40	1.28

loch¶

Step	Hex	OKLCH (L, C, H)	to white	to black
50	`#eef6fe`	0.97, 0.0143, 245	1.09	19.25
100	`#dceefe`	0.94, 0.029, 245	1.19	17.70
200	`#bbdefd`	0.885, 0.0567, 245	1.40	14.98
300	`#8ec9fb`	0.815, 0.0936, 245	1.77	11.90
400	`#58b3fa`	0.74, 0.135, 245	2.27	9.24
500	`#2f99e5`	0.66, 0.147, 245	3.08	6.81
600	`#197fc3`	0.575, 0.1361, 245	4.32	4.87
700	`#12659d`	0.49, 0.1159, 245	6.22	3.37
800	`#0b4d79`	0.405, 0.0958, 245	8.93	2.35
900	`#053656`	0.32, 0.0757, 245	12.59	1.67
950	`#02223a`	0.245, 0.058, 245	16.25	1.29

heather¶

Step	Hex	OKLCH (L, C, H)	to white	to black
50	`#fef1f7`	0.97, 0.0163, 350	1.10	19.14
100	`#fee3ee`	0.94, 0.0335, 350	1.20	17.44
200	`#fdc8df`	0.885, 0.0676, 350	1.45	14.50
300	`#fca3cd`	0.815, 0.1169, 350	1.87	11.26
400	`#f878ba`	0.74, 0.171, 350	2.50	8.39
500	`#e158a2`	0.66, 0.1862, 350	3.43	6.12
600	`#c53a88`	0.575, 0.19, 350	4.84	4.33
700	`#a51f6f`	0.49, 0.1824, 350	6.94	3.03
800	`#810e55`	0.405, 0.1589, 350	9.87	2.13
900	`#5d073c`	0.32, 0.1255, 350	13.45	1.56
950	`#3e0327`	0.245, 0.0961, 350	16.84	1.25

granite¶

Step	Hex	OKLCH (L, C, H)	to white	to black
0	`#fbfeff`	0.995, 0.004, 210	1.01	20.72
25	`#f5fbfc`	0.984, 0.006, 210	1.05	20.09
50	`#eff6f7`	0.968, 0.008, 210	1.09	19.20
100	`#e5eef0`	0.944, 0.01, 210	1.18	17.82
150	`#dae5e7`	0.915, 0.012, 210	1.28	16.34
200	`#ccd9db`	0.875, 0.014, 210	1.45	14.52
300	`#afbec0`	0.79, 0.016, 210	1.92	10.95
400	`#8f9fa1`	0.69, 0.018, 210	2.75	7.64
500	`#748486`	0.6, 0.019, 210	3.90	5.39
600	`#59696c`	0.51, 0.02, 210	5.73	3.66
700	`#3f5154`	0.42, 0.022, 210	8.35	2.52
750	`#304245`	0.365, 0.023, 210	10.55	1.99
800	`#24363a`	0.32, 0.024, 210	12.62	1.66
850	`#1b2e31`	0.285, 0.025, 210	14.17	1.48
875	`#15282b`	0.262, 0.025, 210	15.33	1.37
900	`#102326`	0.24, 0.025, 210	16.27	1.29
925	`#0c1e21`	0.22, 0.024, 210	17.17	1.22
950	`#08191c`	0.2, 0.023, 210	18.01	1.17
975	`#061416`	0.178, 0.021, 210	18.76	1.12

Semantic roles¶

Each role points to a step of the palette per theme. Translucent roles carry their alpha value.

Role	light	dark
`color.accent.bg`	`#136f69` spruce.700	`#49c0b7` spruce.400
`color.accent.bg-hover`	`#0c5450` spruce.800	`#7cd5cd` spruce.300
`color.accent.bg-pressed`	`#063b38` spruce.900	`#a8e8e1` spruce.200
`color.accent.fg`	`#136f69` spruce.700	`#7cd5cd` spruce.300
`color.accent.subtle`	`#e4fbf8` spruce.50	`#032624` spruce.950
`color.attention.bg`	`#eddc59` gorse.200	`#d9c42b` gorse.300
`color.attention.border`	`#8d7716` gorse.600	`#c2ab24` gorse.400
`color.attention.fg`	`#735e10` gorse.700	`#d9c42b` gorse.300
`color.attention.on-bg`	`#291f02` gorse.950	`#291f02` gorse.950
`color.attention.subtle`	`#fef5aa` gorse.50	`#291f02` gorse.950
`color.badge.organization-bg`	`#dceefe` loch.100	`#053656` loch.900
`color.badge.organization-fg`	`#0b4d79` loch.800	`#bbdefd` loch.200
`color.badge.personal-bg`	`#fee3ee` heather.100	`#5d073c` heather.900
`color.badge.personal-fg`	`#810e55` heather.800	`#fdc8df` heather.200
`color.border.control`	`#748486` granite.500	`#748486` granite.500
`color.border.default`	`#ccd9db` granite.200	`#304245` granite.750
`color.border.on-sidebar`	`#0c5450` spruce.800	`#063b38` spruce.900
`color.border.subtle`	`#dae5e7` granite.150	`#24363a` granite.800
`color.category.amber.chip-bg`	`#fee6d4` amber.100	`#4c2905` amber.900
`color.category.amber.chip-fg`	`#6b3b09` amber.800	`#fdcfaa` amber.200
`color.category.amber.fg`	`#8c4f10` amber.700	`#fcaf6f` amber.300
`color.category.amber.on-sidebar`	`#fcaf6f` amber.300	`#fcaf6f` amber.300
`color.category.gorse.chip-bg`	`#fbef8e` gorse.100	`#3f3105` gorse.900
`color.category.gorse.chip-fg`	`#59470a` gorse.800	`#eddc59` gorse.200
`color.category.gorse.fg`	`#735e10` gorse.700	`#d9c42b` gorse.300
`color.category.gorse.on-sidebar`	`#d9c42b` gorse.300	`#d9c42b` gorse.300
`color.category.granite.chip-bg`	`#e5eef0` granite.100	`#102326` granite.900
`color.category.granite.chip-fg`	`#24363a` granite.800	`#ccd9db` granite.200
`color.category.granite.fg`	`#3f5154` granite.700	`#afbec0` granite.300
`color.category.granite.on-sidebar`	`#ccd9db` granite.200	`#ccd9db` granite.200
`color.category.heather.chip-bg`	`#fee3ee` heather.100	`#5d073c` heather.900
`color.category.heather.chip-fg`	`#810e55` heather.800	`#fdc8df` heather.200
`color.category.heather.fg`	`#a51f6f` heather.700	`#fca3cd` heather.300
`color.category.heather.on-sidebar`	`#fca3cd` heather.300	`#fca3cd` heather.300
`color.category.loch.chip-bg`	`#dceefe` loch.100	`#053656` loch.900
`color.category.loch.chip-fg`	`#0b4d79` loch.800	`#bbdefd` loch.200
`color.category.loch.fg`	`#12659d` loch.700	`#8ec9fb` loch.300
`color.category.loch.on-sidebar`	`#8ec9fb` loch.300	`#8ec9fb` loch.300
`color.category.moss.chip-bg`	`#cff8d6` moss.100	`#063e1a` moss.900
`color.category.moss.chip-fg`	`#0c5828` moss.800	`#afeaba` moss.200
`color.category.moss.fg`	`#137337` moss.700	`#89d89a` moss.300
`color.category.moss.on-sidebar`	`#89d89a` moss.300	`#89d89a` moss.300
`color.category.rowan.chip-bg`	`#fee4e2` rowan.100	`#63080e` rowan.900
`color.category.rowan.chip-fg`	`#890f18` rowan.800	`#fdcbc6` rowan.200
`color.category.rowan.fg`	`#b21622` rowan.700	`#fcaaa3` rowan.300
`color.category.rowan.on-sidebar`	`#fcaaa3` rowan.300	`#fcaaa3` rowan.300
`color.category.spruce.chip-bg`	`#ccf5f0` spruce.100	`#063b38` spruce.900
`color.category.spruce.chip-fg`	`#0c5450` spruce.800	`#a8e8e1` spruce.200
`color.category.spruce.fg`	`#136f69` spruce.700	`#7cd5cd` spruce.300
`color.category.spruce.on-sidebar`	`#7cd5cd` spruce.300	`#7cd5cd` spruce.300
`color.code.bg`	`#e5eef0` granite.100	`#0c1e21` granite.925
`color.code.fg`	`#102326` granite.900	`#e5eef0` granite.100
`color.danger.bg`	`#b21622` rowan.700	`#fb827a` rowan.400
`color.danger.border`	`#d43538` rowan.600	`#fb827a` rowan.400
`color.danger.fg`	`#63080e` rowan.900	`#fb827a` rowan.400
`color.danger.on-bg`	`#fbfeff` granite.0	`#430307` rowan.950
`color.danger.subtle`	`#fef2f0` rowan.50	`#430307` rowan.950
`color.focus.ring`	`#1b8a83` spruce.600	`#d9c42b` gorse.300
`color.focus.ring-on-sidebar`	`#d9c42b` gorse.300	`#d9c42b` gorse.300
`color.info.bg`	`#12659d` loch.700	`#58b3fa` loch.400
`color.info.border`	`#197fc3` loch.600	`#58b3fa` loch.400
`color.info.fg`	`#12659d` loch.700	`#8ec9fb` loch.300
`color.info.on-bg`	`#fbfeff` granite.0	`#02223a` loch.950
`color.info.subtle`	`#eef6fe` loch.50	`#02223a` loch.950
`color.run.cancelled`	`#59696c` granite.600	`#8f9fa1` granite.400
`color.run.completed`	`#1b9046` moss.600	`#62c37a` moss.400
`color.run.failed`	`#d43538` rowan.600	`#fb827a` rowan.400
`color.run.queued`	`#748486` granite.500	`#8f9fa1` granite.400
`color.run.running`	`#1b8a83` spruce.600	`#49c0b7` spruce.400
`color.run.waiting`	`#8d7716` gorse.600	`#d9c42b` gorse.300
`color.scrim`	`#061416` own value (alpha 0.48)	`#061416` own value (alpha 0.64)
`color.shadow`	`#08191c` own value (alpha 0.16)	`#061416` own value (alpha 0.5)
`color.success.bg`	`#137337` moss.700	`#89d89a` moss.300
`color.success.border`	`#1b9046` moss.600	`#62c37a` moss.400
`color.success.fg`	`#137337` moss.700	`#89d89a` moss.300
`color.success.on-bg`	`#fbfeff` granite.0	`#03280f` moss.950
`color.success.subtle`	`#e4fde8` moss.50	`#03280f` moss.950
`color.surface.canvas`	`#fbfeff` granite.0	`#15282b` granite.875
`color.surface.hover`	`#e5eef0` granite.100	`#1b2e31` granite.850
`color.surface.input`	`#f5fbfc` granite.25	`#1b2e31` granite.850
`color.surface.list`	`#eff6f7` granite.50	`#102326` granite.900
`color.surface.overlay`	`#fbfeff` granite.0	`#24363a` granite.800
`color.surface.raised`	`#f5fbfc` granite.25	`#1b2e31` granite.850
`color.surface.selected`	`#ccf5f0` spruce.100	`#08312e` spruce.925
`color.surface.sidebar`	`#063b38` spruce.900	`#032624` spruce.950
`color.surface.sidebar-hover`	`#0f4643` spruce.850	`#08312e` spruce.925
`color.surface.sidebar-selected`	`#0c5450` spruce.800	`#063b38` spruce.900
`color.surface.sunken`	`#e5eef0` granite.100	`#0c1e21` granite.925
`color.terminal.ansi.black`	`#102326` granite.900	`#59696c` granite.600
`color.terminal.ansi.blue`	`#0b4d79` loch.800	`#58b3fa` loch.400
`color.terminal.ansi.bright-black`	`#3f5154` granite.700	`#748486` granite.500
`color.terminal.ansi.bright-blue`	`#12659d` loch.700	`#8ec9fb` loch.300
`color.terminal.ansi.bright-cyan`	`#136f69` spruce.700	`#7cd5cd` spruce.300
`color.terminal.ansi.bright-green`	`#137337` moss.700	`#89d89a` moss.300
`color.terminal.ansi.bright-magenta`	`#a51f6f` heather.700	`#fca3cd` heather.300
`color.terminal.ansi.bright-red`	`#b21622` rowan.700	`#fcaaa3` rowan.300
`color.terminal.ansi.bright-white`	`#748486` granite.500	`#eff6f7` granite.50
`color.terminal.ansi.bright-yellow`	`#735e10` gorse.700	`#eddc59` gorse.200
`color.terminal.ansi.cyan`	`#0c5450` spruce.800	`#49c0b7` spruce.400
`color.terminal.ansi.green`	`#0c5828` moss.800	`#62c37a` moss.400
`color.terminal.ansi.magenta`	`#810e55` heather.800	`#f878ba` heather.400
`color.terminal.ansi.red`	`#890f18` rowan.800	`#fb827a` rowan.400
`color.terminal.ansi.white`	`#59696c` granite.600	`#afbec0` granite.300
`color.terminal.ansi.yellow`	`#59470a` gorse.800	`#d9c42b` gorse.300
`color.terminal.bg`	`#f5fbfc` granite.25	`#08191c` granite.950
`color.terminal.cursor`	`#136f69` spruce.700	`#d9c42b` gorse.300
`color.terminal.cursor-text`	`#f5fbfc` granite.25	`#08191c` granite.950
`color.terminal.fg`	`#102326` granite.900	`#e5eef0` granite.100
`color.terminal.selection-bg`	`#ccf5f0` spruce.100	`#0f4643` spruce.850
`color.text.link`	`#136f69` spruce.700	`#7cd5cd` spruce.300
`color.text.muted`	`#59696c` granite.600	`#afbec0` granite.300
`color.text.on-accent`	`#fbfeff` granite.0	`#041c1a` spruce.975
`color.text.on-sidebar`	`#e4fbf8` spruce.50	`#e4fbf8` spruce.50
`color.text.on-sidebar-muted`	`#7cd5cd` spruce.300	`#7cd5cd` spruce.300
`color.text.on-sidebar-secondary`	`#a8e8e1` spruce.200	`#a8e8e1` spruce.200
`color.text.primary`	`#08191c` granite.950	`#f5fbfc` granite.25
`color.text.secondary`	`#3f5154` granite.700	`#ccd9db` granite.200
`color.trigger.done`	`#1b9046` moss.600	`#62c37a` moss.400
`color.trigger.failed`	`#d43538` rowan.600	`#fb827a` rowan.400
`color.trigger.followup`	`#197fc3` loch.600	`#58b3fa` loch.400
`color.trigger.queued`	`#59696c` granite.600	`#afbec0` granite.300
`color.trigger.received`	`#748486` granite.500	`#8f9fa1` granite.400
`color.trigger.working`	`#1b8a83` spruce.600	`#49c0b7` spruce.400
`color.viz.area-fill`	`#ccf5f0` spruce.100	`#063b38` spruce.900
`color.viz.axis`	`#748486` granite.500	`#8f9fa1` granite.400
`color.viz.grid`	`#dae5e7` granite.150	`#24363a` granite.800
`color.viz.series.1`	`#197fc3` loch.600	`#58b3fa` loch.400
`color.viz.series.2`	`#ae6416` amber.600	`#ec9340` amber.400
`color.viz.series.3`	`#136f69` spruce.700	`#7cd5cd` spruce.300
`color.viz.series.4`	`#c53a88` heather.600	`#f878ba` heather.400
`color.viz.series.5`	`#8d7716` gorse.600	`#d9c42b` gorse.300
`color.viz.series.6`	`#063e1a` moss.900	`#62c37a` moss.400
`color.viz.series.7`	`#d43538` rowan.600	`#f15653` rowan.500
`color.viz.series.8`	`#748486` granite.500	`#8f9fa1` granite.400
`color.warning.bg`	`#fcaf6f` amber.300	`#fcaf6f` amber.300
`color.warning.border`	`#ae6416` amber.600	`#ec9340` amber.400
`color.warning.fg`	`#6b3b09` amber.800	`#fcaf6f` amber.300
`color.warning.on-bg`	`#331902` amber.950	`#331902` amber.950
`color.warning.subtle`	`#fee6d4` amber.100	`#331902` amber.950