Palette
Every raw color of the theme, in scales from 50 to 950.
Draft
The values shown here are conceptual and may change.
The palette holds every raw color. Each hue has eleven steps, from light (50) to dark (950). Step 500 is the iOS system color.
Colors are written as hsla(hue, saturation%, lightness%, alpha), rounded to whole numbers. A lighter or darker variant only changes the lightness, and a transparent one only the alpha, so you can adjust a color without a converter:
palette.blue[500]; // 'hsla(211, 100%, 50%, 1)'
("hsla(211, 100%, 50%, 0.12)"); // the same blue, as a tinted background50
100
200
300
400
500
600
700
800
900
950
gray
0 0 96
240 2 91
240 2 82
240 3 73
240 2 65
240 2 57
240 2 48
240 2 39
240 2 30
240 3 20
240 4 14
red
7 100 97
8 100 93
8 100 86
7 98 77
6 99 69
3 100 59
2 74 50
0 86 39
359 96 29
359 100 20
359 100 14
orange
25 100 96
27 100 93
28 100 85
28 100 77
29 99 68
35 100 50
34 95 43
33 89 35
34 95 26
33 98 17
31 100 12
yellow
46 91 95
44 100 92
44 97 85
44 98 78
45 99 69
48 100 50
48 98 42
47 93 34
47 91 26
46 93 17
45 96 11
green
124 58 95
126 63 90
125 60 82
127 57 72
130 56 62
135 59 49
137 72 39
141 96 27
141 100 20
139 100 14
135 100 9
mint
172 60 95
174 61 90
174 60 81
175 58 70
176 58 59
177 100 39
177 91 35
177 82 29
177 89 21
177 94 14
177 96 9
teal
189 58 95
191 64 90
190 59 81
190 57 71
190 56 61
189 61 48
189 73 38
188 94 28
188 96 21
189 95 14
189 100 10
cyan
202 90 96
202 95 92
202 90 84
202 84 75
201 80 66
199 78 55
198 74 45
197 91 33
198 94 25
198 93 17
199 100 12
blue
218 100 96
216 100 92
215 98 84
215 98 74
215 98 65
211 100 50
212 94 44
212 95 36
213 99 28
214 98 20
215 100 15
indigo
233 100 97
232 95 92
233 90 85
234 77 76
237 68 67
241 61 59
242 46 51
242 47 43
243 52 34
245 60 25
248 71 19
purple
278 100 97
277 94 93
277 92 86
278 79 77
279 72 69
280 68 60
280 51 51
280 54 41
281 63 32
283 85 21
283 97 15
pink
0 100 97
0 100 94
359 97 87
358 100 80
355 100 72
349 100 59
346 80 48
344 96 36
345 93 29
346 98 20
348 100 14
brown
33 36 95
33 33 89
35 31 79
33 29 69
33 28 60
34 27 50
34 29 42
33 31 34
34 37 25
34 47 17
34 61 11
Shape
export const palette = {
gray: {
50: "hsla(0, 0%, 96%, 1)",
100: "hsla(240, 2%, 91%, 1)",
200: "hsla(240, 2%, 82%, 1)",
300: "hsla(240, 3%, 73%, 1)",
400: "hsla(240, 2%, 65%, 1)",
500: "hsla(240, 2%, 57%, 1)",
600: "hsla(240, 2%, 48%, 1)",
700: "hsla(240, 2%, 39%, 1)",
800: "hsla(240, 2%, 30%, 1)",
900: "hsla(240, 3%, 20%, 1)",
950: "hsla(240, 4%, 14%, 1)",
},
red: {/* … */},
// orange, yellow, green, mint, teal, cyan, blue, indigo, purple, pink, brown
} satisfies Palette;Usage
Components never read the palette. Colors pick steps from it and give them a role:
export const lightColors = {
border: { default: palette.gray[200] },
feedback: { error: palette.red[500] },
} satisfies ThemeColors;To change the brand color, point the semantic colors to another hue, or edit the hue itself.