Palette

The colours of 7.0.0, generated from colours.yml. There are no reference colours to compare them with (colours.reference.yml).

16 families

10 levels

80 readable on white

83 readable on black

94 clipped by sRGB

ΔE is the difference of two colours in OKLab, about 0.02 is the smallest visible one.

Curves

All families share the lightness & the chroma curve of a level, so all shades of a level look evenly bright.
The chroma of a shade is the curve times the chroma of its family, and shades outside of sRGB get the highest chroma within it.

Lightness · OKLCH lightness of every level (the dots are the greys)

7.0.0

Chroma · Relative to a family (the dots are the median of the colourful families)

7.0.0

Swatches

All shades of the palette, with one row per family and one column per level.

info Click on a colour swatch to copy the hex value, or hold down the Alt key during the click to copy the CSS variable name.

100

grey

cold-grey

warm-grey

red

orange

yellow

olive

lime

green

sea-green

blue

azure

violet

purple

fuchsia

rose

Shades & contrast

All shades with their contrast ratio on white & black (WCAG 2):

Green is enough for normal text (4.5 or more)
Orange is too low

Shade	7.0.0	On white	On black
`grey-10`	`#0A0A0A`	19.80	1.06
`grey-20`	`#181818`	17.76	1.18
`grey-30`	`#2E2E2E`	13.58	1.55
`grey-40`	`#4C4C4C`	8.59	2.45
`grey-50`	`#717171`	4.88	4.30
`grey-60`	`#979797`	2.92	7.19
`grey-70`	`#BABABA`	1.94	10.82
`grey-80`	`#D5D5D5`	1.47	14.31
`grey-90`	`#E8E8E8`	1.23	17.14
`grey-100`	`#F5F5F5`	1.09	19.26
`cold-grey-10`	`#090A0C`	19.80	1.06
`cold-grey-20`	`#16181C`	17.77	1.18
`cold-grey-30`	`#2B2E34`	13.61	1.54
`cold-grey-40`	`#484D54`	8.52	2.47
`cold-grey-50`	`#6C727B`	4.85	4.33
`cold-grey-60`	`#9198A2`	2.91	7.22
`cold-grey-70`	`#B4BAC5`	1.95	10.77
`cold-grey-80`	`#CFD5DF`	1.48	14.24
`cold-grey-90`	`#E4E9F0`	1.22	17.21
`cold-grey-100`	`#F2F5FB`	1.09	19.23
`warm-grey-10`	`#0C0A08`	19.76	1.06
`warm-grey-20`	`#1B1815`	17.68	1.19
`warm-grey-30`	`#322D29`	13.61	1.54
`warm-grey-40`	`#524B45`	8.57	2.45
`warm-grey-50`	`#787068`	4.87	4.32
`warm-grey-60`	`#9F968D`	2.91	7.22
`warm-grey-70`	`#C1B8AF`	1.95	10.74
`warm-grey-80`	`#DBD4CB`	1.47	14.29
`warm-grey-90`	`#EDE7E0`	1.23	17.11
`warm-grey-100`	`#F8F4EF`	1.10	19.18
`red-10`	`#1D0002`	19.94	1.05
`red-20`	`#360004`	18.13	1.16
`red-30`	`#5D0005`	14.31	1.47
`red-40`	`#901006`	9.28	2.26
`red-50`	`#C73517`	5.32	3.95
`red-60`	`#F85E33`	3.16	6.64
`red-70`	`#FF9C7C`	2.04	10.30
`red-80`	`#FFC6B1`	1.50	13.96
`red-90`	`#FFE1D4`	1.24	16.97
`red-100`	`#FFF2EC`	1.10	19.16
`orange-10`	`#1B0103`	19.96	1.05
`orange-20`	`#340303`	18.10	1.16
`orange-30`	`#561200`	14.17	1.48
`orange-40`	`#803000`	8.97	2.34
`orange-50`	`#AF5400`	5.13	4.09
`orange-60`	`#DC7B00`	3.05	6.88
`orange-70`	`#FDA327`	2.01	10.44
`orange-80`	`#FFCB7F`	1.49	14.10
`orange-90`	`#FFE5B3`	1.23	17.11
`orange-100`	`#FFF5D6`	1.09	19.28
`yellow-10`	`#110800`	19.84	1.06
`yellow-20`	`#231500`	17.82	1.18
`yellow-30`	`#3E2A00`	13.67	1.54
`yellow-40`	`#634700`	8.64	2.43
`yellow-50`	`#8F6B00`	4.92	4.27
`yellow-60`	`#BC9100`	2.92	7.19
`yellow-70`	`#E3B300`	1.96	10.71
`yellow-80`	`#FAD14E`	1.47	14.29
`yellow-90`	`#FFE79B`	1.22	17.16
`yellow-100`	`#FFF6D1`	1.08	19.35
`olive-10`	`#080C00`	19.76	1.06
`olive-20`	`#171B00`	17.60	1.19
`olive-30`	`#2D3200`	13.39	1.57
`olive-40`	`#4D5100`	8.43	2.49
`olive-50`	`#757700`	4.78	4.40
`olive-60`	`#A09D00`	2.87	7.32
`olive-70`	`#C8BF1C`	1.92	10.92
`olive-80`	`#E5D961`	1.46	14.43
`olive-90`	`#F8EB91`	1.22	17.28
`olive-100`	`#FFF7C8`	1.08	19.39
`lime-10`	`#030E00`	19.69	1.07
`lime-20`	`#0C1E00`	17.48	1.20
`lime-30`	`#1E3600`	13.27	1.58
`lime-40`	`#385800`	8.19	2.56
`lime-50`	`#598000`	4.65	4.51
`lime-60`	`#7DA900`	2.78	7.55
`lime-70`	`#A0CD0D`	1.87	11.23
`lime-80`	`#C1E65C`	1.42	14.74
`lime-90`	`#DBF68D`	1.19	17.58
`lime-100`	`#EEFFB6`	1.07	19.61
`green-10`	`#000F01`	19.65	1.07
`green-20`	`#002003`	17.39	1.21
`green-30`	`#003A06`	13.06	1.61
`green-40`	`#005E05`	8.07	2.60
`green-50`	`#0E8A00`	4.51	4.65
`green-60`	`#2AB600`	2.70	7.79
`green-70`	`#54DC2E`	1.80	11.65
`green-80`	`#88F467`	1.38	15.18
`green-90`	`#B9FFA1`	1.17	17.88
`green-100`	`#E3FFD9`	1.07	19.57
`sea-green-10`	`#010F00`	19.63	1.07
`sea-green-20`	`#002002`	17.39	1.21
`sea-green-30`	`#00390F`	13.19	1.59
`sea-green-40`	`#005D26`	8.10	2.59
`sea-green-50`	`#008846`	4.56	4.61
`sea-green-60`	`#00B469`	2.72	7.73
`sea-green-70`	`#12DC8D`	1.80	11.65
`sea-green-80`	`#61F5B3`	1.38	15.22
`sea-green-90`	`#A4FFD6`	1.18	17.85
`sea-green-100`	`#DBFFEF`	1.07	19.56
`blue-10`	`#010A1B`	19.80	1.06
`blue-20`	`#001931`	17.75	1.18
`blue-30`	`#003151`	13.48	1.56
`blue-40`	`#00527A`	8.44	2.49
`blue-50`	`#007BAA`	4.76	4.41
`blue-60`	`#00A6DA`	2.81	7.47
`blue-70`	`#33CCFC`	1.88	11.18
`blue-80`	`#8CE4FF`	1.43	14.66
`blue-90`	`#C0F2FF`	1.21	17.39
`blue-100`	`#E2FAFF`	1.09	19.35
`azure-10`	`#010724`	19.86	1.06
`azure-20`	`#001243`	17.99	1.17
`azure-30`	`#00276D`	13.90	1.51
`azure-40`	`#0046A2`	8.76	2.40
`azure-50`	`#006BE1`	5.01	4.19
`azure-60`	`#4598FF`	2.92	7.19
`azure-70`	`#88BEFF`	1.93	10.86
`azure-80`	`#B7D9FF`	1.46	14.38
`azure-90`	`#D8EBFF`	1.22	17.25
`azure-100`	`#EEF6FF`	1.09	19.26
`violet-10`	`#050622`	19.89	1.06
`violet-20`	`#110F41`	17.97	1.17
`violet-30`	`#271E6B`	14.15	1.48
`violet-40`	`#47369F`	9.15	2.30
`violet-50`	`#7056D6`	5.26	3.99
`violet-60`	`#9C7CFF`	3.12	6.74
`violet-70`	`#C0AAFF`	2.01	10.44
`violet-80`	`#DCCBFF`	1.50	14.03
`violet-90`	`#EEE2FF`	1.24	16.96
`violet-100`	`#F8F2FF`	1.10	19.14
`purple-10`	`#100220`	19.97	1.05
`purple-20`	`#24033C`	18.21	1.15
`purple-30`	`#420A62`	14.47	1.45
`purple-40`	`#6B1F91`	9.42	2.23
`purple-50`	`#9C3DC2`	5.44	3.86
`purple-60`	`#CC61ED`	3.23	6.50
`purple-70`	`#EC90FF`	2.10	10.00
`purple-80`	`#FABCFF`	1.53	13.70
`purple-90`	`#FFDBFE`	1.25	16.82
`purple-100`	`#FFF0FD`	1.10	19.13
`fuchsia-10`	`#1A000E`	19.99	1.05
`fuchsia-20`	`#320021`	18.14	1.16
`fuchsia-30`	`#55003F`	14.40	1.46
`fuchsia-40`	`#860069`	9.47	2.22
`fuchsia-50`	`#BA249B`	5.51	3.81
`fuchsia-60`	`#E750CC`	3.27	6.42
`fuchsia-70`	`#FF87EC`	2.12	9.93
`fuchsia-80`	`#FFBBF6`	1.53	13.69
`fuchsia-90`	`#FFDBFC`	1.25	16.79
`fuchsia-100`	`#FFEFFF`	1.10	19.04
`rose-10`	`#1D0002`	19.94	1.05
`rose-20`	`#360008`	18.10	1.16
`rose-30`	`#5C0017`	14.31	1.47
`rose-40`	`#91002E`	9.36	2.24
`rose-50`	`#CC1E4F`	5.43	3.87
`rose-60`	`#FE4B78`	3.23	6.49
`rose-70`	`#FF96AA`	2.06	10.19
`rose-80`	`#FFC2CE`	1.52	13.86
`rose-90`	`#FFDFE5`	1.24	16.94
`rose-100`	`#FFF1F4`	1.10	19.14