Back to Home

    Color Palette

    Design system colors with light and dark mode variants. Click the copy icon to copy hex values.

    Core Colors

    Background

    var(--background)

    Light

    #FFFFFF
    0 0% 100%

    Dark

    #030712
    222.2 84% 4.9%

    Foreground

    var(--foreground)

    Light

    #020817
    222.2 84% 4.9%

    Dark

    #F8FAFC
    210 40% 98%

    Primary

    var(--primary)

    Light

    #1E293B
    222.2 47.4% 11.2%

    Dark

    #F8FAFC
    210 40% 98%

    Primary Foreground

    var(--primary-foreground)

    Light

    #F8FAFC
    210 40% 98%

    Dark

    #1E293B
    222.2 47.4% 11.2%

    Secondary

    var(--secondary)

    Light

    #F1F5F9
    210 40% 96.1%

    Dark

    #1E293B
    217.2 32.6% 17.5%

    Secondary Foreground

    var(--secondary-foreground)

    Light

    #1E293B
    222.2 47.4% 11.2%

    Dark

    #F8FAFC
    210 40% 98%

    Muted

    var(--muted)

    Light

    #F1F5F9
    210 40% 96.1%

    Dark

    #1E293B
    217.2 32.6% 17.5%

    Muted Foreground

    var(--muted-foreground)

    Light

    #64748B
    215.4 16.3% 46.9%

    Dark

    #94A3B8
    215 20.2% 65.1%

    Accent

    var(--accent)

    Light

    #F1F5F9
    210 40% 96.1%

    Dark

    #1E293B
    217.2 32.6% 17.5%

    Accent Foreground

    var(--accent-foreground)

    Light

    #1E293B
    222.2 47.4% 11.2%

    Dark

    #F8FAFC
    210 40% 98%

    Special Colors (CTA, Gold, Destructive)

    CTA (Call to Action)

    var(--cta)

    Light

    #22C55E
    142 76% 36%

    Dark

    #4ADE80
    142 71% 45%

    CTA Foreground

    var(--cta-foreground)

    Light

    #FFFFFF
    0 0% 100%

    Dark

    #FFFFFF
    0 0% 100%

    Gold

    var(--gold)

    Light

    #FFD700
    51 100% 50%

    Dark

    #FFD700
    51 100% 50%

    Gold Foreground

    var(--gold-foreground)

    Light

    #000000
    0 0% 0%

    Dark

    #000000
    0 0% 0%

    Destructive

    var(--destructive)

    Light

    #EF4444
    0 84.2% 60.2%

    Dark

    #7F1D1D
    0 62.8% 30.6%

    Destructive Foreground

    var(--destructive-foreground)

    Light

    #F8FAFC
    210 40% 98%

    Dark

    #F8FAFC
    210 40% 98%

    UI Element Colors

    Border

    var(--border)

    Light

    #E2E8F0
    214.3 31.8% 91.4%

    Dark

    #1E293B
    217.2 32.6% 17.5%

    Input

    var(--input)

    Light

    #E2E8F0
    214.3 31.8% 91.4%

    Dark

    #1E293B
    217.2 32.6% 17.5%

    Ring

    var(--ring)

    Light

    #020817
    222.2 84% 4.9%

    Dark

    #CBD5E1
    212.7 26.8% 83.9%

    Card

    var(--card)

    Light

    #FFFFFF
    0 0% 100%

    Dark

    #030712
    222.2 84% 4.9%

    Card Foreground

    var(--card-foreground)

    Light

    #020817
    222.2 84% 4.9%

    Dark

    #F8FAFC
    210 40% 98%

    Popover

    var(--popover)

    Light

    #FFFFFF
    0 0% 100%

    Dark

    #030712
    222.2 84% 4.9%

    Popover Foreground

    var(--popover-foreground)

    Light

    #020817
    222.2 84% 4.9%

    Dark

    #F8FAFC
    210 40% 98%

    Usage Guide

    In Tailwind CSS

    bg-primary text-primary-foreground
    bg-cta text-cta-foreground
    text-gold border-border

    In CSS

    background: hsl(var(--primary));
    color: hsl(var(--cta));
    border-color: hsl(var(--border));