Skip to content

Instantly share code, notes, and snippets.

@gregblass
Last active August 12, 2021 11:07
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save gregblass/e4b6d169df5d6760a37747a56ac8a94d to your computer and use it in GitHub Desktop.
Save gregblass/e4b6d169df5d6760a37747a56ac8a94d to your computer and use it in GitHub Desktop.
Tailwind CSS Colors for Ruby
# ==============================
# Tailwind CSS Colors
#
# config/initializers/colors.rb
# ==============================
COLORS = {
# Blue Gray
blue_gray_50: '#F8FAFC',
blue_gray_100: '#F1F5F9',
blue_gray_200: '#E2E8F0',
blue_gray_300: '#CBD5E1',
blue_gray_400: '#94A3B8',
blue_gray_500: '#64748B',
blue_gray_600: '#475569',
blue_gray_700: '#334155',
blue_gray_800: '#1E293B',
blue_gray_900: '#0F172A',
# Cool Gray
cool_gray_50: '#F9FAFB',
cool_gray_100: '#F3F4F6',
cool_gray_200: '#E5E7EB',
cool_gray_300: '#D1D5DB',
cool_gray_400: '#9CA3AF',
cool_gray_500: '#6B7280',
cool_gray_600: '#4B5563',
cool_gray_700: '#374151',
cool_gray_800: '#1F2937',
cool_gray_900: '#111827',
# Gray 50
gray_50: '#FAFAFA',
gray_100: '#F4F4F5',
gray_200: '#E4E4E7',
gray_300: '#D4D4D8',
gray_400: '#A1A1AA',
gray_500: '#71717A',
gray_600: '#52525B',
gray_700: '#3F3F46',
gray_800: '#27272A',
gray_900: '#18181B',
# True Gray
true_gray_50: '#FAFAFA',
true_gray_100: '#F5F5F5',
true_gray_200: '#E5E5E5',
true_gray_300: '#D4D4D4',
true_gray_400: '#A3A3A3',
true_gray_500: '#737373',
true_gray_600: '#525252',
true_gray_700: '#404040',
true_gray_800: '#262626',
true_gray_900: '#171717',
# Warm Gray
warm_gray_50: '#FAFAF9',
warm_gray_100: '#F5F5F4',
warm_gray_200: '#E7E5E4',
warm_gray_300: '#D6D3D1',
warm_gray_400: '#A8A29E',
warm_gray_500: '#78716C',
warm_gray_600: '#57534E',
warm_gray_700: '#44403C',
warm_gray_800: '#292524',
warm_gray_900: '#1C1917',
# Red
red_50: '#FEF2F2',
red_100: '#FEE2E2',
red_200: '#FECACA',
red_300: '#FCA5A5',
red_400: '#F87171',
red_500: '#EF4444',
red_600: '#DC2626',
red_700: '#B91C1C',
red_800: '#991B1B',
red_900: '#7F1D1D',
# Orange
orange_50: '#FFF7ED',
orange_100: '#FFEDD5',
orange_200: '#FED7AA',
orange_300: '#FDBA74',
orange_400: '#FB923C',
orange_500: '#F97316',
orange_600: '#EA580C',
orange_700: '#C2410C',
orange_800: '#9A3412',
orange_900: '#7C2D12',
# Amber
amber_50: '#FFFBEB',
amber_100: '#FEF3C7',
amber_200: '#FDE68A',
amber_300: '#FCD34D',
amber_400: '#FBBF24',
amber_500: '#F59E0B',
amber_600: '#D97706',
amber_700: '#B45309',
amber_800: '#92400E',
amber_900: '#78350F',
# Yellow
yellow_50: '#FEFCE8',
yellow_100: '#FEF9C3',
yellow_200: '#FEF08A',
yellow_300: '#FDE047',
yellow_400: '#FACC15',
yellow_500: '#EAB308',
yellow_600: '#CA8A04',
yellow_700: '#A16207',
yellow_800: '#854D0E',
yellow_900: '#713F12',
# Lime
lime_50: '#F7FEE7',
lime_100: '#ECFCCB',
lime_200: '#D9F99D',
lime_300: '#BEF264',
lime_400: '#A3E635',
lime_500: '#84CC16',
lime_600: '#65A30D',
lime_700: '#4D7C0F',
lime_800: '#3F6212',
lime_900: '#365314',
# Green
green_50: '#F0FDF4',
green_100: '#DCFCE7',
green_200: '#BBF7D0',
green_300: '#86EFAC',
green_400: '#4ADE80',
green_500: '#22C55E',
green_600: '#16A34A',
green_700: '#15803D',
green_800: '#166534',
green_900: '#14532D',
# Emerald
emerald_50: '#ECFDF5',
emerald_100: '#D1FAE5',
emerald_200: '#A7F3D0',
emerald_300: '#6EE7B7',
emerald_400: '#34D399',
emerald_500: '#10B981',
emerald_600: '#059669',
emerald_700: '#047857',
emerald_800: '#065F46',
emerald_900: '#064E3B',
# Teal
teal_50: '#F0FDFA',
teal_100: '#CCFBF1',
teal_200: '#99F6E4',
teal_300: '#5EEAD4',
teal_400: '#2DD4BF',
teal_500: '#14B8A6',
teal_600: '#0D9488',
teal_700: '#0F766E',
teal_800: '#115E59',
teal_900: '#134E4A',
# Cyan
cyan_50: '#ECFEFF',
cyan_100: '#CFFAFE',
cyan_200: '#A5F3FC',
cyan_300: '#67E8F9',
cyan_400: '#22D3EE',
cyan_500: '#06B6D4',
cyan_600: '#0891B2',
cyan_700: '#0E7490',
cyan_800: '#155E75',
cyan_900: '#164E63',
# Light Blue
light_blue_50: '#F0F9FF',
light_blue_100: '#E0F2FE',
light_blue_200: '#BAE6FD',
light_blue_300: '#7DD3FC',
light_blue_400: '#38BDF8',
light_blue_500: '#0EA5E9',
light_blue_600: '#0284C7',
light_blue_700: '#0369A1',
light_blue_800: '#075985',
light_blue_900: '#0C4A6E',
# Blue
blue_50: '#EFF6FF',
blue_100: '#DBEAFE',
blue_200: '#BFDBFE',
blue_300: '#93C5FD',
blue_400: '#60A5FA',
blue_500: '#3B82F6',
blue_600: '#2563EB',
blue_700: '#1D4ED8',
blue_800: '#1E40AF',
blue_900: '#1E3A8A',
# Indigo
indigo_50: '#EEF2FF',
indigo_100: '#E0E7FF',
indigo_200: '#C7D2FE',
indigo_300: '#A5B4FC',
indigo_400: '#818CF8',
indigo_500: '#6366F1',
indigo_600: '#4F46E5',
indigo_700: '#4338CA',
indigo_800: '#3730A3',
indigo_900: '#312E81',
# Violet
violet_50: '#F5F3FF',
violet_100: '#EDE9FE',
violet_200: '#DDD6FE',
violet_300: '#C4B5FD',
violet_400: '#A78BFA',
violet_500: '#8B5CF6',
violet_600: '#7C3AED',
violet_700: '#6D28D9',
violet_800: '#5B21B6',
violet_900: '#4C1D95',
# Purple
purple_50: '#FAF5FF',
purple_100: '#F3E8FF',
purple_200: '#E9D5FF',
purple_300: '#D8B4FE',
purple_400: '#C084FC',
purple_500: '#A855F7',
purple_600: '#9333EA',
purple_700: '#7E22CE',
purple_800: '#6B21A8',
purple_900: '#581C87',
# Fuchsia
fuchsia_50: '#FDF4FF',
fuchsia_100: '#FAE8FF',
fuchsia_200: '#F5D0FE',
fuchsia_300: '#F0ABFC',
fuchsia_400: '#E879F9',
fuchsia_500: '#D946EF',
fuchsia_600: '#C026D3',
fuchsia_700: '#A21CAF',
fuchsia_800: '#86198F',
fuchsia_900: '#701A75',
# Pink
pink_50: '#FDF2F8',
pink_100: '#FCE7F3',
pink_200: '#FBCFE8',
pink_300: '#F9A8D4',
pink_400: '#F472B6',
pink_500: '#EC4899',
pink_600: '#DB2777',
pink_700: '#BE185D',
pink_800: '#9D174D',
pink_900: '#831843',
# Rose
rose_50: '#FFF1F2',
rose_100: '#FFE4E6',
rose_200: '#FECDD3',
rose_300: '#FDA4AF',
rose_400: '#FB7185',
rose_500: '#F43F5E',
rose_600: '#E11D48',
rose_700: '#BE123C',
rose_800: '#9F1239',
rose_900: '#881337',
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment