keii.dev
1const colors = {
2 slate: {
3 50: '#f8fafc',
4 100: '#f1f5f9',
5 200: '#e2e8f0',
6 300: '#cbd5e1',
7 400: '#94a3b8',
8 500: '#64748b',
9 600: '#475569',
10 700: '#334155',
11 800: '#1e293b',
12 900: '#0f172a',
13 950: '#020617',
14 },
15
16 gray: {
17 50: '#f9fafb',
18 100: '#f3f4f6',
19 200: '#e5e7eb',
20 300: '#d1d5db',
21 400: '#9ca3af',
22 500: '#6b7280',
23 600: '#4b5563',
24 700: '#374151',
25 800: '#1f2937',
26 900: '#111827',
27 950: '#030712',
28 },
29
30 zinc: {
31 50: '#fafafa',
32 100: '#f4f4f5',
33 200: '#e4e4e7',
34 300: '#d4d4d8',
35 400: '#a1a1aa',
36 500: '#71717a',
37 600: '#52525b',
38 700: '#3f3f46',
39 800: '#27272a',
40 900: '#18181b',
41 950: '#09090b',
42 },
43
44 neutral: {
45 50: '#fafafa',
46 100: '#f5f5f5',
47 200: '#e5e5e5',
48 300: '#d4d4d4',
49 400: '#a3a3a3',
50 500: '#737373',
51 600: '#525252',
52 700: '#404040',
53 800: '#262626',
54 900: '#171717',
55 950: '#0a0a0a',
56 },
57
58 stone: {
59 50: '#fafaf9',
60 100: '#f5f5f4',
61 200: '#e7e5e4',
62 300: '#d6d3d1',
63 400: '#a8a29e',
64 500: '#78716c',
65 600: '#57534e',
66 700: '#44403c',
67 800: '#292524',
68 900: '#1c1917',
69 950: '#0c0a09',
70 },
71
72 red: {
73 50: '#fef2f2',
74 100: '#fee2e2',
75 200: '#fecaca',
76 300: '#fca5a5',
77 400: '#f87171',
78 500: '#ef4444',
79 600: '#dc2626',
80 700: '#b91c1c',
81 800: '#991b1b',
82 900: '#7f1d1d',
83 950: '#450a0a',
84 },
85
86 orange: {
87 50: '#fff7ed',
88 100: '#ffedd5',
89 200: '#fed7aa',
90 300: '#fdba74',
91 400: '#fb923c',
92 500: '#f97316',
93 600: '#ea580c',
94 700: '#c2410c',
95 800: '#9a3412',
96 900: '#7c2d12',
97 950: '#431407',
98 },
99
100 amber: {
101 50: '#fffbeb',
102 100: '#fef3c7',
103 200: '#fde68a',
104 300: '#fcd34d',
105 400: '#fbbf24',
106 500: '#f59e0b',
107 600: '#d97706',
108 700: '#b45309',
109 800: '#92400e',
110 900: '#78350f',
111 950: '#451a03',
112 },
113
114 yellow: {
115 50: '#fefce8',
116 100: '#fef9c3',
117 200: '#fef08a',
118 300: '#fde047',
119 400: '#facc15',
120 500: '#eab308',
121 600: '#ca8a04',
122 700: '#a16207',
123 800: '#854d0e',
124 900: '#713f12',
125 950: '#422006',
126 },
127
128 lime: {
129 50: '#f7fee7',
130 100: '#ecfccb',
131 200: '#d9f99d',
132 300: '#bef264',
133 400: '#a3e635',
134 500: '#84cc16',
135 600: '#65a30d',
136 700: '#4d7c0f',
137 800: '#3f6212',
138 900: '#365314',
139 950: '#1a2e05',
140 },
141
142 green: {
143 50: '#f0fdf4',
144 100: '#dcfce7',
145 200: '#bbf7d0',
146 300: '#86efac',
147 400: '#4ade80',
148 500: '#22c55e',
149 600: '#16a34a',
150 700: '#15803d',
151 800: '#166534',
152 900: '#14532d',
153 950: '#052e16',
154 },
155
156 emerald: {
157 50: '#ecfdf5',
158 100: '#d1fae5',
159 200: '#a7f3d0',
160 300: '#6ee7b7',
161 400: '#34d399',
162 500: '#10b981',
163 600: '#059669',
164 700: '#047857',
165 800: '#065f46',
166 900: '#064e3b',
167 950: '#022c22',
168 },
169
170 teal: {
171 50: '#f0fdfa',
172 100: '#ccfbf1',
173 200: '#99f6e4',
174 300: '#5eead4',
175 400: '#2dd4bf',
176 500: '#14b8a6',
177 600: '#0d9488',
178 700: '#0f766e',
179 800: '#115e59',
180 900: '#134e4a',
181 950: '#042f2e',
182 },
183
184 cyan: {
185 50: '#ecfeff',
186 100: '#cffafe',
187 200: '#a5f3fc',
188 300: '#67e8f9',
189 400: '#22d3ee',
190 500: '#06b6d4',
191 600: '#0891b2',
192 700: '#0e7490',
193 800: '#155e75',
194 900: '#164e63',
195 950: '#083344',
196 },
197
198 sky: {
199 50: '#f0f9ff',
200 100: '#e0f2fe',
201 200: '#bae6fd',
202 300: '#7dd3fc',
203 400: '#38bdf8',
204 500: '#0ea5e9',
205 600: '#0284c7',
206 700: '#0369a1',
207 800: '#075985',
208 900: '#0c4a6e',
209 950: '#082f49',
210 },
211
212 blue: {
213 50: '#eff6ff',
214 100: '#dbeafe',
215 200: '#bfdbfe',
216 300: '#93c5fd',
217 400: '#60a5fa',
218 500: '#3b82f6',
219 600: '#2563eb',
220 700: '#1d4ed8',
221 800: '#1e40af',
222 900: '#1e3a8a',
223 950: '#172554',
224 },
225
226 indigo: {
227 50: '#eef2ff',
228 100: '#e0e7ff',
229 200: '#c7d2fe',
230 300: '#a5b4fc',
231 400: '#818cf8',
232 500: '#6366f1',
233 600: '#4f46e5',
234 700: '#4338ca',
235 800: '#3730a3',
236 900: '#312e81',
237 950: '#1e1b4b',
238 },
239
240 violet: {
241 50: '#f5f3ff',
242 100: '#ede9fe',
243 200: '#ddd6fe',
244 300: '#c4b5fd',
245 400: '#a78bfa',
246 500: '#8b5cf6',
247 600: '#7c3aed',
248 700: '#6d28d9',
249 800: '#5b21b6',
250 900: '#4c1d95',
251 950: '#2e1065',
252 },
253
254 purple: {
255 50: '#faf5ff',
256 100: '#f3e8ff',
257 200: '#e9d5ff',
258 300: '#d8b4fe',
259 400: '#c084fc',
260 500: '#a855f7',
261 600: '#9333ea',
262 700: '#7e22ce',
263 800: '#6b21a8',
264 900: '#581c87',
265 950: '#3b0764',
266 },
267
268 fuchsia: {
269 50: '#fdf4ff',
270 100: '#fae8ff',
271 200: '#f5d0fe',
272 300: '#f0abfc',
273 400: '#e879f9',
274 500: '#d946ef',
275 600: '#c026d3',
276 700: '#a21caf',
277 800: '#86198f',
278 900: '#701a75',
279 950: '#4a044e',
280 },
281
282 pink: {
283 50: '#fdf2f8',
284 100: '#fce7f3',
285 200: '#fbcfe8',
286 300: '#f9a8d4',
287 400: '#f472b6',
288 500: '#ec4899',
289 600: '#db2777',
290 700: '#be185d',
291 800: '#9d174d',
292 900: '#831843',
293 950: '#500724',
294 },
295
296 rose: {
297 50: '#fff1f2',
298 100: '#ffe4e6',
299 200: '#fecdd3',
300 300: '#fda4af',
301 400: '#fb7185',
302 500: '#f43f5e',
303 600: '#e11d48',
304 700: '#be123c',
305 800: '#9f1239',
306 900: '#881337',
307 950: '#4c0519',
308 },
309};
310
311function hexToRgb(hex) {
312 var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
313 return result
314 ? {
315 r: parseInt(result[1], 16),
316 g: parseInt(result[2], 16),
317 b: parseInt(result[3], 16),
318 }
319 : null;
320}
321
322Object.keys(colors['neutral']).map(hexKey => {
323 console.log(
324 `'base-${hexKey}': 'rgba(var(--base-${hexKey}), var(--tw-bg-opacity, 1))',`
325 );
326});
327
328Object.keys(colors).map(colorKey => {
329 const color = colors[colorKey];
330
331 console.log(`.theme-${colorKey} {`);
332
333 Object.keys(color).map(hexKey => {
334 const hex = color[hexKey];
335 const rgb = hexToRgb(hex);
336
337 console.log(` --base-${hexKey}: ${rgb.r}, ${rgb.g}, ${rgb.b};`);
338 });
339
340 console.log('}\n');
341});