Skip to content

Instantly share code, notes, and snippets.

@qbixmex

qbixmex/colors.ts

Created November 30, 2025 14:46
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save qbixmex/fc3c729a2f1770e92144eab8f33b5a82 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save qbixmex/fc3c729a2f1770e92144eab8f33b5a82 to your computer and use it in GitHub Desktop.
Download ZIP
Tailwind Colors as Hexadecimal in Typescript Object
Raw
colors.ts
export const colors = {
red_050: '#fef2f2',
red_100: '#ffe2e2',
red_200: '#ffc9c9',
red_300: '#ffa2a2',
red_400: '#ff6467',
red_500: '#ef4444',
red_600: '#e7000b',
red_700: '#c10007',
red_800: '#9f0712',
red_900: '#82181a',
red_950: '#460809',
orange_050: '#fff7ed',
orange_100: '#ffedd4',
orange_200: '#ffd6a7',
orange_300: '#ffb869',
orange_400: '#ff8903',
orange_500: '#ff6900',
orange_600: '#f54900',
orange_700: '#ca3500',
orange_800: '#9f2d00',
orange_900: '#7e2a0c',
orange_950: '#441306',
amber_050: '#fffbeb',
amber_100: '#fef3c6',
amber_200: '#fee685',
amber_300: '#ffd230',
amber_400: '#ffb900',
amber_500: '#fe9a00',
amber_600: '#e17100',
amber_700: '#bb4d00',
amber_800: '#973c00',
amber_900: '#7b3306',
amber_950: '#461901',
yellow_050: '#fefce8',
yellow_100: '#fef9c2',
yellow_200: '#fff085',
yellow_300: '#ffdf20',
yellow_400: '#fdc700',
yellow_500: '#f0b100',
yellow_600: '#d08700',
yellow_700: '#a65f00',
yellow_800: '#894b00',
yellow_900: '#733e0a',
yellow_950: '#432004',
lime_050: '#f7fee7',
lime_100: '#ecfcca',
lime_200: '#d8f999',
lime_300: '#bbf451',
lime_400: '#9ae600',
lime_500: '#7ccf00',
lime_600: '#5ea500',
lime_700: '#497d00',
lime_800: '#3d6300',
lime_900: '#35530e',
lime_950: '#192e03',
green_050: '#f0fdf4',
green_100: '#dcfce7',
green_200: '#b9f8cf',
green_300: '#7bf1a7',
green_400: '#06df72',
green_500: '#00c950',
green_600: '#00a63e',
green_700: '#008235',
green_800: '#026630',
green_900: '#0d542b',
green_950: '#032e15',
emerald_050: '#ecfdf5',
emerald_100: '#d0fae5',
emerald_200: '#a4f4cf',
emerald_300: '#5ee9b5',
emerald_400: '#00d492',
emerald_500: '#00bc7d',
emerald_600: '#009966',
emerald_700: '#007a55',
emerald_800: '#006045',
emerald_900: '#004f3b',
emerald_950: '#002c22',
teal_050: '#f0fdfa',
teal_100: '#cbfbf1',
teal_200: '#96f7e4',
teal_300: '#46ecd4',
teal_400: '#00d5bd',
teal_500: '#00bba7',
teal_600: '#009689',
teal_700: '#00786f',
teal_800: '#005f5a',
teal_900: '#0b4f4a',
teal_950: '#022f2e',
cyan_050: '#ecfeff',
cyan_100: '#cefafe',
cyan_200: '#a2f4fd',
cyan_300: '#53eafd',
cyan_400: '#00d3f2',
cyan_500: '#00b8db',
cyan_600: '#0092b8',
cyan_700: '#007595',
cyan_800: '#005f78',
cyan_900: '#104e64',
cyan_950: '#053345',
sky_050: '#f0f9ff',
sky_100: '#dff2fe',
sky_200: '#b8e6fe',
sky_300: '#74d4ff',
sky_400: '#00bcff',
sky_500: '#00a6f4',
sky_600: '#0084d1',
sky_700: '#0069a8',
sky_800: '#00598a',
sky_900: '#024a70',
sky_950: '#052f4a',
blue_050: '#eff6ff',
blue_100: '#dbeafe',
blue_200: '#bedbff',
blue_300: '#8ec5ff',
blue_400: '#51a2ff',
blue_500: '#2b7fff',
blue_600: '#155dfb',
blue_700: '#1447e6',
blue_800: '#193cb8',
blue_900: '#1c398e',
blue_950: '#162556',
indigo_050: '#eef2ff',
indigo_100: '#e0e7ff',
indigo_200: '#c6d2ff',
indigo_300: '#a3b3ff',
indigo_400: '#7c86ff',
indigo_500: '#615fff',
indigo_600: '#4f39f6',
indigo_800: '#372aac',
indigo_700: '#432dd7',
indigo_950: '#1e1a4d',
indigo_900: '#312c85',
violet_050: '#f5f3ff',
violet_100: '#ede9fe',
violet_200: '#ddd6ff',
violet_300: '#c4b4ff',
violet_400: '#a684ff',
violet_500: '#8e51ff',
violet_600: '#7f22fe',
violet_700: '#7008e7',
violet_800: '#5d0ec0',
violet_900: '#4d179a',
violet_950: '#2f0d68',
purple_050: '#faf5ff',
purple_100: '#f3e8ff',
purple_200: '#e9d4ff',
purple_300: '#dab2ff',
purple_400: '#c27aff',
purple_500: '#ad46ff',
purple_600: '#9810fa',
purple_700: '#8200db',
purple_800: '#6e11b0',
purple_900: '#59168b',
purple_950: '#3c0366',
fuchsia_050: '#fdf4ff',
fuchsia_100: '#fae8ff',
fuchsia_200: '#f6cfff',
fuchsia_300: '#f4a8ff',
fuchsia_400: '#ed6bff',
fuchsia_500: '#e12afb',
fuchsia_600: '#c800de',
fuchsia_700: '#a800b7',
fuchsia_800: '#8a0194',
fuchsia_900: '#721378',
fuchsia_950: '#4b004f',
pink_050: '#fdf2f8',
pink_100: '#fce7f3',
pink_200: '#fccee8',
pink_300: '#fea5d5',
pink_400: '#fb64b6',
pink_500: '#f6339a',
pink_600: '#e60076',
pink_700: '#c6005b',
pink_800: '#a3004c',
pink_900: '#861043',
pink_950: '#510424',
rose_050: '#fff1f2',
rose_100: '#ffe4e6',
rose_200: '#ffccd2',
rose_300: '#ffa1ad',
rose_400: '#ff637e',
rose_500: '#ff2056',
rose_600: '#ec003f',
rose_700: '#c70036',
rose_800: '#a50036',
rose_900: '#8b0836',
rose_950: '#4d0218',
slate_050: '#f8fafc',
slate_100: '#f1f5f9',
slate_200: '#e2e8f0',
slate_300: '#cad5e2',
slate_400: '#90a1b9',
slate_500: '#62748e',
slate_600: '#45556c',
slate_700: '#314158',
slate_800: '#1d293d',
slate_900: '#0f172b',
slate_950: '#020618',
gray_050: '#f9fafb',
gray_100: '#f3f4f6',
gray_200: '#e5e7eb',
gray_300: '#d1d5db',
gray_400: '#99a1af',
gray_500: '#6a7282',
gray_600: '#4a5565',
gray_700: '#364153',
gray_800: '#1e2939',
gray_900: '#101828',
gray_950: '#030712',
zinc_050: '#fafafa',
zinc_100: '#f4f4f5',
zinc_200: '#e4e4e7',
zinc_300: '#d4d4d8',
zinc_400: '#9f9fa9',
zinc_500: '#71717b',
zinc_600: '#52525c',
zinc_700: '#3f3f46',
zinc_800: '#27272a',
zinc_900: '#18181b',
zinc_950: '#09090b',
neutral_050: '#fafafa',
neutral_100: '#f5f5f5',
neutral_200: '#e5e5e5',
neutral_300: '#d4d4d4',
neutral_400: '#a1a1a1',
neutral_500: '#737373',
neutral_600: '#525252',
neutral_700: '#404040',
neutral_800: '#262626',
neutral_900: '#171717',
neutral_950: '#0a0a0a',
stone_050: '#fafaf9',
stone_100: '#f5f5f4',
stone_200: '#e7e5e4',
stone_300: '#d7d3d1',
stone_400: '#a6a09b',
stone_500: '#79716b',
stone_600: '#57534d',
stone_700: '#44403b',
stone_800: '#292524',
stone_900: '#1c1917',
stone_950: '#0c0a09',
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment