Colors.id

    shadcn/ui - Semantic Design System Colors

    A carefully crafted design system with semantic color tokens for modern web applications. shadcn/ui is a sleek, semantic design system built for Tailwind CSS, offering a carefully curated palette for consistent, modern UIs. With hues like #3B82F6 (blue) and #F3F4F6 (neutral), it inspires developers to create cohesive interfaces with reusable components.

    Visit WebsiteDocumentation

    Semantic Color Tokens & CSS Variables

    Background
    #FFFFFF
    hsl(0, 0%, 100%)
    var(--background)
    Foreground
    #09090B
    hsl(222.2, 84%, 4.9%)
    var(--foreground)
    Card
    #FFFFFF
    hsl(0, 0%, 100%)
    var(--card)
    Card Foreground
    #09090B
    hsl(222.2, 84%, 4.9%)
    var(--card-foreground)
    Popover
    #FFFFFF
    hsl(0, 0%, 100%)
    var(--popover)
    Popover Foreground
    #09090B
    hsl(222.2, 84%, 4.9%)
    var(--popover-foreground)
    Primary
    #18181B
    hsl(222.2, 47.4%, 11.2%)
    var(--primary)
    Primary Foreground
    #FAFAFA
    hsl(210, 40%, 98%)
    var(--primary-foreground)
    Secondary
    #F4F4F5
    hsl(210, 40%, 96.1%)
    var(--secondary)
    Secondary Foreground
    #18181B
    hsl(222.2, 47.4%, 11.2%)
    var(--secondary-foreground)
    Muted
    #F4F4F5
    hsl(210, 40%, 96.1%)
    var(--muted)
    Muted Foreground
    #71717A
    hsl(215.4, 16.3%, 46.9%)
    var(--muted-foreground)
    Accent
    #F4F4F5
    hsl(210, 40%, 96.1%)
    var(--accent)
    Accent Foreground
    #18181B
    hsl(222.2, 47.4%, 11.2%)
    var(--accent-foreground)
    Destructive
    #EF4444
    hsl(0, 84.2%, 60.2%)
    var(--destructive)
    Destructive Foreground
    #FAFAFA
    hsl(210, 40%, 98%)
    var(--destructive-foreground)
    Border
    #E4E4E7
    hsl(214.3, 31.8%, 91.4%)
    var(--border)
    Input
    #E4E4E7
    hsl(214.3, 31.8%, 91.4%)
    var(--input)
    Ring
    #18181B
    hsl(222.2, 84%, 4.9%)
    var(--ring)

    shadcn/ui Color Generator

    Generate and test colors from the shadcn/ui palette

    Color Generator

    Generate color variations and test them in real components

    Real-world UI Examples

    See how shadcn/ui colors look in practical applications

    Track your expenses

    Total Expenses

    $12,543

    Analytics

    Revenue$15,989
    Expenses$12,543

    Gain control

    Advanced settings

    Categories

    Groceries

    9 transactions

    $2,345

    Household

    12 transactions

    $1,876

    Financial Summary

    Income

    $15,989

    $18,871 last period

    Expenses

    $12,543

    $10,221 last period

    Success

    All Set!

    Your shadcn/ui configuration is complete.

    Traditional Components

    Buttons
    Alerts
    Form Elements
    Badges
    Primary
    Secondary
    Accent
    Outline