Colors

Color Palettes

Brand, surface, and reference palettes — each an 11-step shade scale built on OKLCH primitives.

Production

Brand and surface palettes on an 11-step OKLCH shade scale (50–950). Pick a palette here; pick a token over in the usage guide.

Tailwind

Tailwindcss v4 palette, used for maximum flexibility beyond brand palette.

Source
Red
97.10% 0.013 17.38
93.60% 0.032 17.72
88.50% 0.062 18.33
80.80% 0.114 19.57
70.40% 0.191 22.22
63.70% 0.237 25.33
57.70% 0.245 27.32
50.50% 0.213 27.52
44.40% 0.177 26.90
39.60% 0.141 25.72
25.80% 0.092 26.04
Orange
98.00% 0.016 73.68
95.40% 0.038 75.16
90.10% 0.076 70.70
83.70% 0.128 66.29
75.00% 0.183 55.93
70.50% 0.213 47.60
64.60% 0.222 41.12
55.30% 0.195 38.40
47.00% 0.157 37.30
40.80% 0.123 38.17
26.60% 0.079 36.26
Amber
98.70% 0.022 95.28
96.20% 0.059 95.62
92.40% 0.120 95.75
87.90% 0.169 91.61
82.80% 0.189 84.43
76.90% 0.188 70.08
66.60% 0.179 58.32
55.50% 0.163 49.00
47.30% 0.137 46.20
41.40% 0.112 45.90
27.90% 0.077 45.63
Yellow
98.70% 0.026 102.21
97.30% 0.071 103.19
94.50% 0.129 101.54
90.50% 0.182 98.11
85.20% 0.199 91.94
79.50% 0.184 86.05
68.10% 0.162 75.83
55.40% 0.135 66.44
47.60% 0.114 61.91
42.10% 0.095 57.71
28.60% 0.066 53.81
Lime
98.60% 0.031 120.76
96.70% 0.067 122.33
93.80% 0.127 124.32
89.70% 0.196 126.67
84.10% 0.238 128.85
76.80% 0.233 130.85
64.80% 0.200 131.68
53.20% 0.157 131.59
45.30% 0.124 130.93
40.50% 0.101 131.06
27.40% 0.072 132.11
Green
98.20% 0.018 155.83
96.20% 0.044 156.74
92.50% 0.084 156.00
87.10% 0.150 154.45
79.20% 0.209 151.71
72.30% 0.219 149.58
62.70% 0.194 149.21
52.70% 0.154 150.07
44.80% 0.119 151.33
39.30% 0.095 152.53
26.60% 0.065 152.93
Emerald
97.90% 0.021 166.11
95.00% 0.052 163.05
90.50% 0.093 164.15
84.50% 0.143 164.98
76.50% 0.177 163.22
69.60% 0.170 162.48
59.60% 0.145 163.23
50.80% 0.118 165.61
43.20% 0.095 166.91
37.80% 0.077 168.94
26.20% 0.051 172.55
Teal
98.40% 0.014 180.72
95.30% 0.051 180.80
91.00% 0.096 180.43
85.50% 0.138 181.07
77.70% 0.152 181.91
70.40% 0.140 182.50
60.00% 0.118 184.70
51.10% 0.096 186.39
43.70% 0.078 188.22
38.60% 0.063 188.42
27.70% 0.046 192.52
Cyan
98.40% 0.019 200.87
95.60% 0.045 203.39
91.70% 0.080 205.04
86.50% 0.127 207.08
78.90% 0.154 211.53
71.50% 0.143 215.22
60.90% 0.126 221.72
52.00% 0.105 223.13
45.00% 0.085 224.28
39.80% 0.070 227.39
30.20% 0.056 229.69
Sky
97.70% 0.013 236.62
95.10% 0.026 236.82
90.10% 0.058 230.90
82.80% 0.111 230.32
74.60% 0.160 232.66
68.50% 0.169 237.32
58.80% 0.158 241.97
50.00% 0.134 242.75
44.30% 0.110 240.79
39.10% 0.090 240.88
29.30% 0.066 243.16
Blue
97.00% 0.014 254.60
93.20% 0.032 255.59
88.20% 0.059 254.13
80.90% 0.105 251.81
70.70% 0.165 254.62
62.30% 0.214 259.82
54.60% 0.245 262.88
48.80% 0.243 264.38
42.40% 0.199 265.64
37.90% 0.146 265.52
28.20% 0.091 267.93
Indigo
96.20% 0.018 272.31
93.00% 0.034 272.79
87.00% 0.065 274.04
78.50% 0.115 274.71
67.30% 0.182 276.93
58.50% 0.233 277.12
51.10% 0.262 276.97
45.70% 0.240 277.02
39.80% 0.195 277.37
35.90% 0.144 278.70
25.70% 0.090 281.29
Violet
96.90% 0.016 293.76
94.30% 0.029 294.59
89.40% 0.057 293.28
81.10% 0.111 293.57
70.20% 0.183 293.54
60.60% 0.250 292.72
54.10% 0.281 293.01
49.10% 0.270 292.58
43.20% 0.232 292.76
38.00% 0.189 293.75
28.30% 0.141 291.09
Purple
97.70% 0.014 308.30
94.60% 0.033 307.17
90.20% 0.063 306.70
82.70% 0.119 306.38
71.40% 0.203 305.50
62.70% 0.265 303.90
55.80% 0.288 302.32
49.60% 0.265 301.92
43.80% 0.218 303.72
38.10% 0.176 304.99
29.10% 0.149 302.72
Fuchsia
97.70% 0.017 320.06
95.20% 0.037 318.85
90.30% 0.076 319.62
83.30% 0.145 321.43
74.00% 0.238 322.16
66.70% 0.295 322.15
59.10% 0.293 322.90
51.80% 0.253 323.95
45.20% 0.211 324.59
40.10% 0.170 325.61
29.30% 0.136 325.66
Pink
97.10% 0.014 343.20
94.80% 0.028 342.26
89.90% 0.061 343.23
82.30% 0.120 346.02
71.80% 0.202 349.76
65.60% 0.241 354.31
59.20% 0.249 0.58
52.50% 0.223 3.96
45.90% 0.187 3.81
40.80% 0.153 2.43
28.40% 0.109 3.91
Rose
96.90% 0.015 12.42
94.10% 0.030 12.58
89.20% 0.058 10.00
81.00% 0.117 11.64
71.20% 0.194 13.43
64.50% 0.246 16.44
58.60% 0.253 17.58
51.40% 0.222 16.94
45.50% 0.188 13.70
41.00% 0.159 10.27
27.10% 0.105 12.09

Tailwind-surface

Tailwindcss v4 palette, used for maximum flexibility beyond brand palette.

Source
Neutral
98.50% 0.000 0.00
97.00% 0.000 0.00
92.20% 0.000 0.00
87.00% 0.000 0.00
70.80% 0.000 0.00
55.60% 0.000 0.00
43.90% 0.000 0.00
37.10% 0.000 0.00
26.90% 0.000 0.00
20.50% 0.000 0.00
14.50% 0.000 0.00
Taupe
98.60% 0.002 67.80
96.00% 0.002 17.20
92.20% 0.005 34.30
86.80% 0.007 39.50
71.40% 0.014 41.20
54.70% 0.021 43.10
43.80% 0.017 39.30
36.70% 0.016 35.70
26.80% 0.011 36.50
21.40% 0.009 43.10
14.70% 0.004 49.30
Stone
98.50% 0.001 106.42
97.00% 0.001 106.42
92.30% 0.003 48.72
86.90% 0.005 56.37
70.90% 0.010 56.26
55.30% 0.013 58.07
44.40% 0.011 73.64
37.40% 0.010 67.56
26.80% 0.007 34.30
21.60% 0.006 56.04
14.70% 0.004 49.25
Olive
98.80% 0.003 106.50
96.60% 0.005 106.50
93.00% 0.007 106.50
88.00% 0.011 106.60
73.70% 0.021 106.90
58.00% 0.031 107.30
46.60% 0.025 107.30
39.40% 0.023 107.40
28.60% 0.016 107.40
22.80% 0.013 107.40
15.30% 0.006 107.10
Mist
98.70% 0.002 197.10
96.30% 0.002 197.10
92.50% 0.005 214.30
87.20% 0.007 219.60
72.30% 0.014 214.40
56.00% 0.021 213.50
45.00% 0.017 213.20
37.80% 0.015 216.00
27.50% 0.011 216.90
21.80% 0.008 223.90
14.80% 0.004 228.80
Slate
98.40% 0.003 247.86
96.80% 0.007 247.90
92.90% 0.013 255.51
86.90% 0.022 252.89
70.40% 0.040 256.79
55.40% 0.046 257.42
44.60% 0.043 257.28
37.20% 0.044 257.29
27.90% 0.041 260.03
20.80% 0.042 265.75
12.90% 0.042 264.69
Gray
98.50% 0.002 247.84
96.70% 0.003 264.54
92.80% 0.006 264.53
87.20% 0.010 258.34
70.70% 0.022 261.33
55.10% 0.027 264.36
44.60% 0.030 256.80
37.30% 0.034 259.73
27.80% 0.033 256.85
21.00% 0.034 264.66
13.00% 0.028 261.69
Zinc
98.50% 0.000 0.00
96.70% 0.001 286.38
92.00% 0.004 286.32
87.10% 0.006 286.29
70.50% 0.015 286.07
55.20% 0.016 285.94
44.20% 0.017 285.79
37.00% 0.013 285.81
27.40% 0.006 286.03
21.00% 0.006 285.88
14.10% 0.005 285.82
Mauve
98.50% 0.000 0.00
96.00% 0.003 325.60
92.20% 0.005 325.62
86.50% 0.012 325.68
71.10% 0.019 323.02
54.20% 0.034 322.50
43.50% 0.029 321.78
36.40% 0.029 323.89
26.30% 0.024 320.12
21.20% 0.019 322.12
14.50% 0.008 326.00

Ontopix

Main brand palette with selected colors that should predominate in produced materials.

Brand
100.00% 0.053 316.50
95.70% 0.079 316.50
87.70% 0.117 316.50
81.10% 0.164 316.50
71.50% 0.236 316.50
63.00% 0.274 316.50
53.70% 0.256 316.50
46.80% 0.212 316.50
38.40% 0.168 316.50
32.10% 0.129 316.50
24.00% 0.096 316.50

Ontopix-surface

Main brand surface palette with selected colors that should set the background and neutral elements colors.

Space
98.40% 0.009 316.50
97.10% 0.010 316.50
91.40% 0.023 316.50
84.50% 0.015 316.50
66.50% 0.023 316.50
55.60% 0.044 316.50
42.80% 0.055 316.50
28.60% 0.043 316.50
23.20% 0.057 316.50
19.10% 0.062 316.50
10.50% 0.071 316.50
Paper
98.40% 0.009 316.50
97.10% 0.010 316.50
94.90% 0.023 316.50
89.00% 0.034 316.50
73.00% 0.037 316.50
55.60% 0.046 316.50
44.80% 0.038 316.50
32.60% 0.043 316.50
26.20% 0.057 316.50
19.10% 0.062 316.50
10.50% 0.071 316.50

OKLCH means equal lightness steps look equal to the eye — picking shade 600 in one palette and shade 600 in another lands on the same perceived weight. Pair shade 50–200 with shade 800–950 for AA-safe text contrast (full pairing rules in Accessibility).

Related

  • Usage guide — when to reach for which semantic token instead of a raw palette.
  • Semantic tokens — the named tokens (primary, success, …) that map onto these palettes.
  • Accessibility — WCAG-pair guidance for picking shades against backgrounds.
  • Theme — how the color modes shift palette shades for :root and .dark.

Color Accessibility

Contrast ratios and WCAG compliance for the Ontopix color system.

Semantic Tokens

Purpose-based color naming system