TailwindColor Hex Value to RGB

gistfile1.txt

const tailwindColors = {
    foo: {
        50: '#f9fafb',
        100: '#f3f4f6',
        200: '#e5e7eb',
        300: '#d1d5db',
        400: '#9ca3af',
        500: '#6b7280',
        600: '#4b5563',
        700: '#374151',
        800: '#1f2937',
        900: '#111827',
    },
    slate: {
        50: '#f8fafc',
        100: '#f1f5f9',
        200: '#e2e8f0',
        300: '#cbd5e1',
        400: '#94a3b8',
        500: '#64748b',
        600: '#475569',
        700: '#334155',
        800: '#1e293b',
        900: '#0f172a',
    },

    gray: {
        50: '#f9fafb',
        100: '#f3f4f6',
        200: '#e5e7eb',
        300: '#d1d5db',
        400: '#9ca3af',
        500: '#6b7280',
        600: '#4b5563',
        700: '#374151',
        800: '#1f2937',
        900: '#111827',
    },
    zinc: {
        50: '#fafafa',
        100: '#f4f4f5',
        200: '#e4e4e7',
        300: '#d4d4d8',
        400: '#a1a1aa',
        500: '#71717a',
        600: '#52525b',
        700: '#3f3f46',
        800: '#27272a',
        900: '#18181b',
    },
    neutral: {
        50: '#fafafa',
        100: '#f5f5f5',
        200: '#e5e5e5',
        300: '#d4d4d4',
        400: '#a3a3a3',
        500: '#737373',
        600: '#525252',
        700: '#404040',
        800: '#262626',
        900: '#171717',
    },
    stone: {
        50: '#fafaf9',
        100: '#f5f5f4',
        200: '#e7e5e4',
        300: '#d6d3d1',
        400: '#a8a29e',
        500: '#78716c',
        600: '#57534e',
        700: '#44403c',
        800: '#292524',
        900: '#1c1917',
    },
    red: {
        50: '#fef2f2',
        100: '#fee2e2',
        200: '#fecaca',
        300: '#fca5a5',
        400: '#f87171',
        500: '#ef4444',
        600: '#dc2626',
        700: '#b91c1c',
        800: '#991b1b',
        900: '#7f1d1d',
    },
    orange: {
        50: '#fff7ed',
        100: '#ffedd5',
        200: '#fed7aa',
        300: '#fdba74',
        400: '#fb923c',
        500: '#f97316',
        600: '#ea580c',
        700: '#c2410c',
        800: '#9a3412',
        900: '#7c2d12',
    },
    amber: {
        50: '#fffbeb',
        100: '#fef3c7',
        200: '#fde68a',
        300: '#fcd34d',
        400: '#fbbf24',
        500: '#f59e0b',
        600: '#d97706',
        700: '#b45309',
        800: '#92400e',
        900: '#78350f',
    },
    yellow: {
        50: '#fefce8',
        100: '#fef9c3',
        200: '#fef08a',
        300: '#fde047',
        400: '#facc15',
        500: '#eab308',
        600: '#ca8a04',
        700: '#a16207',
        800: '#854d0e',
        900: '#713f12',
    },
    lime: {
        50: '#f7fee7',
        100: '#ecfccb',
        200: '#d9f99d',
        300: '#bef264',
        400: '#a3e635',
        500: '#84cc16',
        600: '#65a30d',
        700: '#4d7c0f',
        800: '#3f6212',
        900: '#365314',
    },
    green: {
        50: '#f0fdf4',
        100: '#dcfce7',
        200: '#bbf7d0',
        300: '#86efac',
        400: '#4ade80',
        500: '#22c55e',
        600: '#16a34a',
        700: '#15803d',
        800: '#166534',
        900: '#14532d',
    },
    emerald: {
        50: '#ecfdf5',
        100: '#d1fae5',
        200: '#a7f3d0',
        300: '#6ee7b7',
        400: '#34d399',
        500: '#10b981',
        600: '#059669',
        700: '#047857',
        800: '#065f46',
        900: '#064e3b',
    },
    teal: {
        50: '#f0fdfa',
        100: '#ccfbf1',
        200: '#99f6e4',
        300: '#5eead4',
        400: '#2dd4bf',
        500: '#14b8a6',
        600: '#0d9488',
        700: '#0f766e',
        800: '#115e59',
        900: '#134e4a',
    },
    cyan: {
        50: '#ecfeff',
        100: '#cffafe',
        200: '#a5f3fc',
        300: '#67e8f9',
        400: '#22d3ee',
        500: '#06b6d4',
        600: '#0891b2',
        700: '#0e7490',
        800: '#155e75',
        900: '#164e63',
    },
    sky: {
        50: '#f0f9ff',
        100: '#e0f2fe',
        200: '#bae6fd',
        300: '#7dd3fc',
        400: '#38bdf8',
        500: '#0ea5e9',
        600: '#0284c7',
        700: '#0369a1',
        800: '#075985',
        900: '#0c4a6e',
    },
    blue: {
        50: '#eff6ff',
        100: '#dbeafe',
        200: '#bfdbfe',
        300: '#93c5fd',
        400: '#60a5fa',
        500: '#3b82f6',
        600: '#2563eb',
        700: '#1d4ed8',
        800: '#1e40af',
        900: '#1e3a8a',
    },
    indigo: {
        50: '#eef2ff',
        100: '#e0e7ff',
        200: '#c7d2fe',
        300: '#a5b4fc',
        400: '#818cf8',
        500: '#6366f1',
        600: '#4f46e5',
        700: '#4338ca',
        800: '#3730a3',
        900: '#312e81',
    },
    violet: {
        50: '#f5f3ff',
        100: '#ede9fe',
        200: '#ddd6fe',
        300: '#c4b5fd',
        400: '#a78bfa',
        500: '#8b5cf6',
        600: '#7c3aed',
        700: '#6d28d9',
        800: '#5b21b6',
        900: '#4c1d95',
    },
    purple: {
        50: '#faf5ff',
        100: '#f3e8ff',
        200: '#e9d5ff',
        300: '#d8b4fe',
        400: '#c084fc',
        500: '#a855f7',
        600: '#9333ea',
        700: '#7e22ce',
        800: '#6b21a8',
        900: '#581c87',
    },
    fuchsia: {
        50: '#fdf4ff',
        100: '#fae8ff',
        200: '#f5d0fe',
        300: '#f0abfc',
        400: '#e879f9',
        500: '#d946ef',
        600: '#c026d3',
        700: '#a21caf',
        800: '#86198f',
        900: '#701a75',
    },
    pink: {
        50: '#fdf2f8',
        100: '#fce7f3',
        200: '#fbcfe8',
        300: '#f9a8d4',
        400: '#f472b6',
        500: '#ec4899',
        600: '#db2777',
        700: '#be185d',
        800: '#9d174d',
        900: '#831843',
    },
    rose: {
        50: '#fff1f2',
        100: '#ffe4e6',
        200: '#fecdd3',
        300: '#fda4af',
        400: '#fb7185',
        500: '#f43f5e',
        600: '#e11d48',
        700: '#be123c',
        800: '#9f1239',
        900: '#881337',
    },
};

function hexToRgb(hex) {
    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    return result ?
        `${parseInt(result[1], 16)} ${parseInt(result[2], 16)} ${parseInt(result[3], 16)}`
        : "";
}

console.log(Object.entries(tailwindColors).reduce((acc, y) => {
    const [k1, v1] = y;
    const themeVal = Object.entries(v1).reduce((acc, entry) => {
        const [ek, ev] = entry;
        return `${acc} --color-primary_${ek}: ${hexToRgb(ev)};\n\r`;
    }, "");
    const theme = `\n\r.theme-${k1} {\n\r${themeVal} }`;
    return `${acc} ${theme}`;
}), "");

// result
/*
foo,[object Object] 

.theme-slate {

 --color-primary_50: 248 250 252;

 --color-primary_100: 241 245 249;

 --color-primary_200: 226 232 240;

 --color-primary_300: 203 213 225;

 --color-primary_400: 148 163 184;

 --color-primary_500: 100 116 139;

 --color-primary_600: 71 85 105;

 --color-primary_700: 51 65 85;

 --color-primary_800: 30 41 59;

 --color-primary_900: 15 23 42;

 } 

.theme-gray {

 --color-primary_50: 249 250 251;

 --color-primary_100: 243 244 246;

 --color-primary_200: 229 231 235;

 --color-primary_300: 209 213 219;

 --color-primary_400: 156 163 175;

 --color-primary_500: 107 114 128;

 --color-primary_600: 75 85 99;

 --color-primary_700: 55 65 81;

 --color-primary_800: 31 41 55;

 --color-primary_900: 17 24 39;

 } 

.theme-zinc {

 --color-primary_50: 250 250 250;

 --color-primary_100: 244 244 245;

 --color-primary_200: 228 228 231;

 --color-primary_300: 212 212 216;

 --color-primary_400: 161 161 170;

 --color-primary_500: 113 113 122;

 --color-primary_600: 82 82 91;

 --color-primary_700: 63 63 70;

 --color-primary_800: 39 39 42;

 --color-primary_900: 24 24 27;

 } 

.theme-neutral {

 --color-primary_50: 250 250 250;

 --color-primary_100: 245 245 245;

 --color-primary_200: 229 229 229;

 --color-primary_300: 212 212 212;

 --color-primary_400: 163 163 163;

 --color-primary_500: 115 115 115;

 --color-primary_600: 82 82 82;

 --color-primary_700: 64 64 64;

 --color-primary_800: 38 38 38;

 --color-primary_900: 23 23 23;

 } 

.theme-stone {

 --color-primary_50: 250 250 249;

 --color-primary_100: 245 245 244;

 --color-primary_200: 231 229 228;

 --color-primary_300: 214 211 209;

 --color-primary_400: 168 162 158;

 --color-primary_500: 120 113 108;

 --color-primary_600: 87 83 78;

 --color-primary_700: 68 64 60;

 --color-primary_800: 41 37 36;

 --color-primary_900: 28 25 23;

 } 

.theme-red {

 --color-primary_50: 254 242 242;

 --color-primary_100: 254 226 226;

 --color-primary_200: 254 202 202;

 --color-primary_300: 252 165 165;

 --color-primary_400: 248 113 113;

 --color-primary_500: 239 68 68;

 --color-primary_600: 220 38 38;

 --color-primary_700: 185 28 28;

 --color-primary_800: 153 27 27;

 --color-primary_900: 127 29 29;

 } 

.theme-orange {

 --color-primary_50: 255 247 237;

 --color-primary_100: 255 237 213;

 --color-primary_200: 254 215 170;

 --color-primary_300: 253 186 116;

 --color-primary_400: 251 146 60;

 --color-primary_500: 249 115 22;

 --color-primary_600: 234 88 12;

 --color-primary_700: 194 65 12;

 --color-primary_800: 154 52 18;

 --color-primary_900: 124 45 18;

 } 

.theme-amber {

 --color-primary_50: 255 251 235;

 --color-primary_100: 254 243 199;

 --color-primary_200: 253 230 138;

 --color-primary_300: 252 211 77;

 --color-primary_400: 251 191 36;

 --color-primary_500: 245 158 11;

 --color-primary_600: 217 119 6;

 --color-primary_700: 180 83 9;

 --color-primary_800: 146 64 14;

 --color-primary_900: 120 53 15;

 } 

.theme-yellow {

 --color-primary_50: 254 252 232;

 --color-primary_100: 254 249 195;

 --color-primary_200: 254 240 138;

 --color-primary_300: 253 224 71;

 --color-primary_400: 250 204 21;

 --color-primary_500: 234 179 8;

 --color-primary_600: 202 138 4;

 --color-primary_700: 161 98 7;

 --color-primary_800: 133 77 14;

 --color-primary_900: 113 63 18;

 } 

.theme-lime {

 --color-primary_50: 247 254 231;

 --color-primary_100: 236 252 203;

 --color-primary_200: 217 249 157;

 --color-primary_300: 190 242 100;

 --color-primary_400: 163 230 53;

 --color-primary_500: 132 204 22;

 --color-primary_600: 101 163 13;

 --color-primary_700: 77 124 15;

 --color-primary_800: 63 98 18;

 --color-primary_900: 54 83 20;

 } 

.theme-green {

 --color-primary_50: 240 253 244;

 --color-primary_100: 220 252 231;

 --color-primary_200: 187 247 208;

 --color-primary_300: 134 239 172;

 --color-primary_400: 74 222 128;

 --color-primary_500: 34 197 94;

 --color-primary_600: 22 163 74;

 --color-primary_700: 21 128 61;

 --color-primary_800: 22 101 52;

 --color-primary_900: 20 83 45;

 } 

.theme-emerald {

 --color-primary_50: 236 253 245;

 --color-primary_100: 209 250 229;

 --color-primary_200: 167 243 208;

 --color-primary_300: 110 231 183;

 --color-primary_400: 52 211 153;

 --color-primary_500: 16 185 129;

 --color-primary_600: 5 150 105;

 --color-primary_700: 4 120 87;

 --color-primary_800: 6 95 70;

 --color-primary_900: 6 78 59;

 } 

.theme-teal {

 --color-primary_50: 240 253 250;

 --color-primary_100: 204 251 241;

 --color-primary_200: 153 246 228;

 --color-primary_300: 94 234 212;

 --color-primary_400: 45 212 191;

 --color-primary_500: 20 184 166;

 --color-primary_600: 13 148 136;

 --color-primary_700: 15 118 110;

 --color-primary_800: 17 94 89;

 --color-primary_900: 19 78 74;

 } 

.theme-cyan {

 --color-primary_50: 236 254 255;

 --color-primary_100: 207 250 254;

 --color-primary_200: 165 243 252;

 --color-primary_300: 103 232 249;

 --color-primary_400: 34 211 238;

 --color-primary_500: 6 182 212;

 --color-primary_600: 8 145 178;

 --color-primary_700: 14 116 144;

 --color-primary_800: 21 94 117;

 --color-primary_900: 22 78 99;

 } 

.theme-sky {

 --color-primary_50: 240 249 255;

 --color-primary_100: 224 242 254;

 --color-primary_200: 186 230 253;

 --color-primary_300: 125 211 252;

 --color-primary_400: 56 189 248;

 --color-primary_500: 14 165 233;

 --color-primary_600: 2 132 199;

 --color-primary_700: 3 105 161;

 --color-primary_800: 7 89 133;

 --color-primary_900: 12 74 110;

 } 

.theme-blue {

 --color-primary_50: 239 246 255;

 --color-primary_100: 219 234 254;

 --color-primary_200: 191 219 254;

 --color-primary_300: 147 197 253;

 --color-primary_400: 96 165 250;

 --color-primary_500: 59 130 246;

 --color-primary_600: 37 99 235;

 --color-primary_700: 29 78 216;

 --color-primary_800: 30 64 175;

 --color-primary_900: 30 58 138;

 } 

.theme-indigo {

 --color-primary_50: 238 242 255;

 --color-primary_100: 224 231 255;

 --color-primary_200: 199 210 254;

 --color-primary_300: 165 180 252;

 --color-primary_400: 129 140 248;

 --color-primary_500: 99 102 241;

 --color-primary_600: 79 70 229;

 --color-primary_700: 67 56 202;

 --color-primary_800: 55 48 163;

 --color-primary_900: 49 46 129;

 } 

.theme-violet {

 --color-primary_50: 245 243 255;

 --color-primary_100: 237 233 254;

 --color-primary_200: 221 214 254;

 --color-primary_300: 196 181 253;

 --color-primary_400: 167 139 250;

 --color-primary_500: 139 92 246;

 --color-primary_600: 124 58 237;

 --color-primary_700: 109 40 217;

 --color-primary_800: 91 33 182;

 --color-primary_900: 76 29 149;

 } 

.theme-purple {

 --color-primary_50: 250 245 255;

 --color-primary_100: 243 232 255;

 --color-primary_200: 233 213 255;

 --color-primary_300: 216 180 254;

 --color-primary_400: 192 132 252;

 --color-primary_500: 168 85 247;

 --color-primary_600: 147 51 234;

 --color-primary_700: 126 34 206;

 --color-primary_800: 107 33 168;

 --color-primary_900: 88 28 135;

 } 

.theme-fuchsia {

 --color-primary_50: 253 244 255;

 --color-primary_100: 250 232 255;

 --color-primary_200: 245 208 254;

 --color-primary_300: 240 171 252;

 --color-primary_400: 232 121 249;

 --color-primary_500: 217 70 239;

 --color-primary_600: 192 38 211;

 --color-primary_700: 162 28 175;

 --color-primary_800: 134 25 143;

 --color-primary_900: 112 26 117;

 } 

.theme-pink {

 --color-primary_50: 253 242 248;

 --color-primary_100: 252 231 243;

 --color-primary_200: 251 207 232;

 --color-primary_300: 249 168 212;

 --color-primary_400: 244 114 182;

 --color-primary_500: 236 72 153;

 --color-primary_600: 219 39 119;

 --color-primary_700: 190 24 93;

 --color-primary_800: 157 23 77;

 --color-primary_900: 131 24 67;

 } 

.theme-rose {

 --color-primary_50: 255 241 242;

 --color-primary_100: 255 228 230;

 --color-primary_200: 254 205 211;

 --color-primary_300: 253 164 175;

 --color-primary_400: 251 113 133;

 --color-primary_500: 244 63 94;

 --color-primary_600: 225 29 72;

 --color-primary_700: 190 18 60;

 --color-primary_800: 159 18 57;

 --color-primary_900: 136 19 55;

 } 

*/