Colors
A guide to the color palette used in the design system. The palette is defined in globals.css using the @theme directive and exposed as CSS variables.
slate
50
100
200
300
400
500
600
700
800
900
950
gray
50
100
200
300
400
500
600
700
800
900
950
zinc
50
100
200
300
400
500
600
700
800
900
950
neutral
50
100
200
300
400
500
600
700
800
900
950
stone
50
100
200
300
400
500
600
700
800
900
950
red
50
100
200
300
400
500
600
700
800
900
950
orange
50
100
200
300
400
500
600
700
800
900
950
amber
50
100
200
300
400
500
600
700
800
900
950
yellow
50
100
200
300
400
500
600
700
800
900
950
lime
50
100
200
300
400
500
600
700
800
900
950
green
50
100
200
300
400
500
600
700
800
900
950
emerald
50
100
200
300
400
500
600
700
800
900
950
teal
50
100
200
300
400
500
600
700
800
900
950
cyan
50
100
200
300
400
500
600
700
800
900
950
sky
50
100
200
300
400
500
600
700
800
900
950
blue
50
100
200
300
400
500
600
700
800
900
950
indigo
50
100
200
300
400
500
600
700
800
900
950
violet
50
100
200
300
400
500
600
700
800
900
950
purple
50
100
200
300
400
500
600
700
800
900
950
fuchsia
50
100
200
300
400
500
600
700
800
900
950
pink
50
100
200
300
400
500
600
700
800
900
950
rose
50
100
200
300
400
500
600
700
800
900
950
Usage Example
Here is an example of how to use the color variables in your CSS.
1
2/* In your CSS file */
3@theme {
4 /* Purekit UI tuned (soft chroma, slightly lighter darks) */
5 --color-red-50: oklch(0.971 0.010 17.38);
6 --color-red-100: oklch(0.936 0.025 17.717);
7 --color-red-200: oklch(0.885 0.048 18.334);
8 --color-red-300: oklch(0.818 0.091 19.571);
9 --color-red-400: oklch(0.724 0.162 22.216);
10 --color-red-500: oklch(0.657 0.201 25.331);
11 --color-red-600: oklch(0.607 0.208 27.325);
12 --color-red-700: oklch(0.555 0.181 27.518);
13 --color-red-800: oklch(0.514 0.142 26.899);
14 --color-red-900: oklch(0.476 0.113 25.723);
15 --color-red-950: oklch(0.348 0.074 26.042);
16 --color-orange-50: oklch(0.980 0.012 73.684);
17 --color-orange-100: oklch(0.954 0.030 75.164);
18 --color-orange-200: oklch(0.901 0.059 70.697);
19 --color-orange-300: oklch(0.847 0.102 66.29);
20 --color-orange-400: oklch(0.770 0.156 55.934);
21 --color-orange-500: oklch(0.725 0.181 47.604);
22 --color-orange-600: oklch(0.676 0.189 41.116);
23 --color-orange-700: oklch(0.603 0.166 38.402);
24 --color-orange-800: oklch(0.540 0.126 37.304);
25 --color-orange-900: oklch(0.488 0.098 38.172);
26 --color-orange-950: oklch(0.356 0.063 36.259);
27 --color-amber-50: oklch(0.987 0.017 95.277);
28 --color-amber-100: oklch(0.962 0.046 95.617);
29 --color-amber-200: oklch(0.924 0.094 95.746);
30 --color-amber-300: oklch(0.889 0.135 91.605);
31 --color-amber-400: oklch(0.848 0.161 84.429);
32 --color-amber-500: oklch(0.789 0.160 70.08);
33 --color-amber-600: oklch(0.696 0.152 58.318);
34 --color-amber-700: oklch(0.605 0.139 48.998);
35 --color-amber-800: oklch(0.543 0.110 46.201);
36 --color-amber-900: oklch(0.494 0.090 45.904);
37 --color-amber-950: oklch(0.369 0.062 45.635);
38 --color-yellow-50: oklch(0.987 0.020 102.212);
39 --color-yellow-100: oklch(0.973 0.055 103.193);
40 --color-yellow-200: oklch(0.945 0.101 101.54);
41 --color-yellow-300: oklch(0.915 0.146 98.111);
42 --color-yellow-400: oklch(0.872 0.169 91.936);
43 --color-yellow-500: oklch(0.815 0.156 86.047);
44 --color-yellow-600: oklch(0.711 0.138 75.834);
45 --color-yellow-700: oklch(0.604 0.115 66.442);
46 --color-yellow-800: oklch(0.546 0.091 61.907);
47 --color-yellow-900: oklch(0.501 0.076 57.708);
48 --color-yellow-950: oklch(0.376 0.053 53.813);
49 --color-lime-50: oklch(0.986 0.024 120.757);
50 --color-lime-100: oklch(0.967 0.052 122.328);
51 --color-lime-200: oklch(0.938 0.099 124.321);
52 --color-lime-300: oklch(0.907 0.157 126.665);
53 --color-lime-400: oklch(0.861 0.202 128.85);
54 --color-lime-500: oklch(0.788 0.198 130.85);
55 --color-lime-600: oklch(0.678 0.170 131.684);
56 --color-lime-700: oklch(0.582 0.133 131.589);
57 --color-lime-800: oklch(0.523 0.099 130.933);
58 --color-lime-900: oklch(0.485 0.081 131.063);
59 --color-lime-950: oklch(0.364 0.058 132.109);
60 --color-green-50: oklch(0.982 0.014 155.826);
61 --color-green-100: oklch(0.962 0.034 156.743);
62 --color-green-200: oklch(0.925 0.066 155.995);
63 --color-green-300: oklch(0.881 0.120 154.449);
64 --color-green-400: oklch(0.812 0.178 151.711);
65 --color-green-500: oklch(0.743 0.186 149.579);
66 --color-green-600: oklch(0.657 0.165 149.214);
67 --color-green-700: oklch(0.577 0.131 150.069);
68 --color-green-800: oklch(0.518 0.095 151.328);
69 --color-green-900: oklch(0.473 0.076 152.535);
70 --color-green-950: oklch(0.356 0.052 152.934);
71 --color-emerald-50: oklch(0.979 0.016 166.113);
72 --color-emerald-100: oklch(0.950 0.041 163.051);
73 --color-emerald-200: oklch(0.905 0.073 164.15);
74 --color-emerald-300: oklch(0.855 0.114 164.978);
75 --color-emerald-400: oklch(0.785 0.150 163.223);
76 --color-emerald-500: oklch(0.716 0.145 162.48);
77 --color-emerald-600: oklch(0.626 0.123 163.225);
78 --color-emerald-700: oklch(0.558 0.100 165.612);
79 --color-emerald-800: oklch(0.502 0.076 166.913);
80 --color-emerald-900: oklch(0.458 0.062 168.94);
81 --color-emerald-950: oklch(0.352 0.041 172.552);
82 --color-teal-50: oklch(0.984 0.011 180.72);
83 --color-teal-100: oklch(0.953 0.040 180.801);
84 --color-teal-200: oklch(0.910 0.075 180.426);
85 --color-teal-300: oklch(0.865 0.110 181.071);
86 --color-teal-400: oklch(0.797 0.129 181.912);
87 --color-teal-500: oklch(0.724 0.119 182.503);
88 --color-teal-600: oklch(0.630 0.100 184.704);
89 --color-teal-700: oklch(0.561 0.082 186.391);
90 --color-teal-800: oklch(0.507 0.062 188.216);
91 --color-teal-900: oklch(0.466 0.050 188.416);
92 --color-teal-950: oklch(0.367 0.037 192.524);
93 --color-cyan-50: oklch(0.984 0.015 200.873);
94 --color-cyan-100: oklch(0.956 0.035 203.388);
95 --color-cyan-200: oklch(0.917 0.062 205.041);
96 --color-cyan-300: oklch(0.875 0.102 207.078);
97 --color-cyan-400: oklch(0.809 0.131 211.53);
98 --color-cyan-500: oklch(0.735 0.122 215.221);
99 --color-cyan-600: oklch(0.639 0.107 221.723);
100 --color-cyan-700: oklch(0.570 0.089 223.128);
101 --color-cyan-800: oklch(0.520 0.068 224.283);
102 --color-cyan-900: oklch(0.478 0.056 227.392);
103 --color-cyan-950: oklch(0.392 0.045 229.695);
104 --color-sky-50: oklch(0.977 0.010 236.62);
105 --color-sky-100: oklch(0.951 0.020 236.824);
106 --color-sky-200: oklch(0.901 0.045 230.902);
107 --color-sky-300: oklch(0.838 0.089 230.318);
108 --color-sky-400: oklch(0.766 0.136 232.661);
109 --color-sky-500: oklch(0.705 0.144 237.323);
110 --color-sky-600: oklch(0.618 0.134 241.966);
111 --color-sky-700: oklch(0.550 0.114 242.749);
112 --color-sky-800: oklch(0.513 0.088 240.79);
113 --color-sky-900: oklch(0.471 0.072 240.876);
114 --color-sky-950: oklch(0.383 0.053 243.157);
115 --color-blue-50: oklch(0.970 0.011 254.604);
116 --color-blue-100: oklch(0.932 0.025 255.585);
117 --color-blue-200: oklch(0.882 0.046 254.128);
118 --color-blue-300: oklch(0.819 0.084 251.813);
119 --color-blue-400: oklch(0.727 0.140 254.624);
120 --color-blue-500: oklch(0.643 0.182 259.815);
121 --color-blue-600: oklch(0.576 0.208 262.881);
122 --color-blue-700: oklch(0.538 0.207 264.376);
123 --color-blue-800: oklch(0.494 0.159 265.638);
124 --color-blue-900: oklch(0.459 0.117 265.522);
125 --color-blue-950: oklch(0.372 0.073 267.935);
126 --color-indigo-50: oklch(0.962 0.014 272.314);
127 --color-indigo-100: oklch(0.930 0.027 272.788);
128 --color-indigo-200: oklch(0.870 0.051 274.039);
129 --color-indigo-300: oklch(0.795 0.092 274.713);
130 --color-indigo-400: oklch(0.693 0.155 276.935);
131 --color-indigo-500: oklch(0.605 0.198 277.117);
132 --color-indigo-600: oklch(0.541 0.223 276.966);
133 --color-indigo-700: oklch(0.507 0.204 277.023);
134 --color-indigo-800: oklch(0.468 0.156 277.366);
135 --color-indigo-900: oklch(0.439 0.115 278.697);
136 --color-indigo-950: oklch(0.347 0.072 281.288);
137 --color-violet-50: oklch(0.969 0.012 293.756);
138 --color-violet-100: oklch(0.943 0.023 294.588);
139 --color-violet-200: oklch(0.894 0.044 293.283);
140 --color-violet-300: oklch(0.821 0.089 293.571);
141 --color-violet-400: oklch(0.722 0.156 293.541);
142 --color-violet-500: oklch(0.626 0.212 292.717);
143 --color-violet-600: oklch(0.571 0.239 293.009);
144 --color-violet-700: oklch(0.541 0.230 292.581);
145 --color-violet-800: oklch(0.502 0.186 292.759);
146 --color-violet-900: oklch(0.460 0.151 293.745);
147 --color-violet-950: oklch(0.373 0.113 291.089);
148 --color-purple-50: oklch(0.977 0.011 308.299);
149 --color-purple-100: oklch(0.946 0.026 307.174);
150 --color-purple-200: oklch(0.902 0.049 306.703);
151 --color-purple-300: oklch(0.837 0.095 306.383);
152 --color-purple-400: oklch(0.734 0.173 305.504);
153 --color-purple-500: oklch(0.647 0.225 303.9);
154 --color-purple-600: oklch(0.588 0.245 302.321);
155 --color-purple-700: oklch(0.546 0.225 301.924);
156 --color-purple-800: oklch(0.508 0.174 303.724);
157 --color-purple-900: oklch(0.461 0.141 304.987);
158 --color-purple-950: oklch(0.381 0.119 302.717);
159 --color-fuchsia-50: oklch(0.977 0.013 320.058);
160 --color-fuchsia-100: oklch(0.952 0.029 318.852);
161 --color-fuchsia-200: oklch(0.903 0.059 319.62);
162 --color-fuchsia-300: oklch(0.843 0.116 321.434);
163 --color-fuchsia-400: oklch(0.760 0.202 322.16);
164 --color-fuchsia-500: oklch(0.687 0.251 322.15);
165 --color-fuchsia-600: oklch(0.621 0.249 322.896);
166 --color-fuchsia-700: oklch(0.568 0.215 323.949);
167 --color-fuchsia-800: oklch(0.522 0.169 324.591);
168 --color-fuchsia-900: oklch(0.481 0.136 325.612);
169 --color-fuchsia-950: oklch(0.383 0.109 325.661);
170 --color-pink-50: oklch(0.971 0.011 343.198);
171 --color-pink-100: oklch(0.948 0.022 342.258);
172 --color-pink-200: oklch(0.899 0.048 343.231);
173 --color-pink-300: oklch(0.833 0.096 346.018);
174 --color-pink-400: oklch(0.738 0.172 349.761);
175 --color-pink-500: oklch(0.676 0.205 354.308);
176 --color-pink-600: oklch(0.622 0.212 0.584);
177 --color-pink-700: oklch(0.575 0.190 3.958);
178 --color-pink-800: oklch(0.529 0.150 3.815);
179 --color-pink-900: oklch(0.488 0.122 2.432);
180 --color-pink-950: oklch(0.374 0.087 3.907);
181 --color-rose-50: oklch(0.969 0.012 12.422);
182 --color-rose-100: oklch(0.941 0.023 12.58);
183 --color-rose-200: oklch(0.892 0.045 10.001);
184 --color-rose-300: oklch(0.820 0.094 11.638);
185 --color-rose-400: oklch(0.732 0.165 13.428);
186 --color-rose-500: oklch(0.665 0.209 16.439);
187 --color-rose-600: oklch(0.616 0.215 17.585);
188 --color-rose-700: oklch(0.564 0.189 16.935);
189 --color-rose-800: oklch(0.525 0.150 13.697);
190 --color-rose-900: oklch(0.490 0.127 10.272);
191 --color-rose-950: oklch(0.361 0.084 12.094);
192 --color-slate-50: oklch(0.984 0.002 247.858);
193 --color-slate-100: oklch(0.968 0.005 247.896);
194 --color-slate-200: oklch(0.929 0.010 255.508);
195 --color-slate-300: oklch(0.879 0.018 252.894);
196 --color-slate-400: oklch(0.724 0.034 256.788);
197 --color-slate-500: oklch(0.574 0.039 257.417);
198 --color-slate-600: oklch(0.476 0.037 257.281);
199 --color-slate-700: oklch(0.422 0.037 257.287);
200 --color-slate-800: oklch(0.349 0.033 260.031);
201 --color-slate-900: oklch(0.288 0.034 265.755);
202 --color-slate-950: oklch(0.219 0.034 264.695);
203 --color-gray-50: oklch(0.985 0.002 247.839);
204 --color-gray-100: oklch(0.967 0.002 264.542);
205 --color-gray-200: oklch(0.928 0.005 264.531);
206 --color-gray-300: oklch(0.882 0.008 258.338);
207 --color-gray-400: oklch(0.727 0.019 261.325);
208 --color-gray-500: oklch(0.571 0.023 264.364);
209 --color-gray-600: oklch(0.476 0.025 256.802);
210 --color-gray-700: oklch(0.423 0.029 259.733);
211 --color-gray-800: oklch(0.348 0.026 256.848);
212 --color-gray-900: oklch(0.290 0.027 264.665);
213 --color-gray-950: oklch(0.220 0.022 261.692);
214 --color-zinc-50: oklch(0.985 0.000 0.0);
215 --color-zinc-100: oklch(0.967 0.001 286.375);
216 --color-zinc-200: oklch(0.920 0.003 286.32);
217 --color-zinc-300: oklch(0.881 0.005 286.286);
218 --color-zinc-400: oklch(0.725 0.013 286.067);
219 --color-zinc-500: oklch(0.572 0.014 285.938);
220 --color-zinc-600: oklch(0.472 0.014 285.786);
221 --color-zinc-700: oklch(0.420 0.011 285.805);
222 --color-zinc-800: oklch(0.344 0.005 286.033);
223 --color-zinc-900: oklch(0.290 0.005 285.885);
224 --color-zinc-950: oklch(0.231 0.004 285.823);
225 --color-neutral-50: oklch(0.985 0.000 0.0);
226 --color-neutral-100: oklch(0.970 0.000 0.0);
227 --color-neutral-200: oklch(0.922 0.000 0.0);
228 --color-neutral-300: oklch(0.880 0.000 0.0);
229 --color-neutral-400: oklch(0.728 0.000 0.0);
230 --color-neutral-500: oklch(0.576 0.000 0.0);
231 --color-neutral-600: oklch(0.469 0.000 0.0);
232 --color-neutral-700: oklch(0.421 0.000 0.0);
233 --color-neutral-800: oklch(0.339 0.000 0.0);
234 --color-neutral-900: oklch(0.285 0.000 0.0);
235 --color-neutral-950: oklch(0.235 0.000 0.0);
236 --color-stone-50: oklch(0.985 0.001 106.423);
237 --color-stone-100: oklch(0.970 0.001 106.424);
238 --color-stone-200: oklch(0.923 0.002 48.717);
239 --color-stone-300: oklch(0.879 0.004 56.366);
240 --color-stone-400: oklch(0.729 0.009 56.259);
241 --color-stone-500: oklch(0.573 0.011 58.071);
242 --color-stone-600: oklch(0.474 0.009 73.639);
243 --color-stone-700: oklch(0.424 0.009 67.558);
244 --color-stone-800: oklch(0.338 0.006 34.298);
245 --color-stone-900: oklch(0.296 0.005 56.043);
246 --color-stone-950: oklch(0.237 0.003 49.25);
247}
248