Palette Crafter

Light mode • WCAG AA compliant • Harmonious colors

Base Colors

Background

#F9FAFA

hsl(180, 9%, 98%)

oklab(0.984 -0.001 -0.000)

--bg

Click to copy

Foreground

#14171F

hsl(224, 22%, 10%)

oklab(0.205 -0.000 -0.017)

--fg

Click to copy

Color Scales

Primary

#264dd9

100

200

300

400

500

600

700

800

900

950

Secondary

#5c2dd2

100

200

300

400

500

600

700

800

900

950

Theme Preview

See how your generated palette looks in action

Sample Card Component

This demonstrates how your theme will look with typical UI elements. The colors automatically maintain proper contrast ratios for accessibility.

Feature List

WCAG AA contrast compliance
Harmonious color relationships
Dark and light mode support

Export Configuration

 @theme {
  --color-background: rgb(var(--bg));
  --color-foreground: rgb(var(--fg));
  
  --color-primary: rgb(var(--primary));
  --color-primary-foreground: rgb(var(--primary-foreground));
  --color-primary-50: rgb(var(--primary-50));
  --color-primary-100: rgb(var(--primary-100));
  --color-primary-200: rgb(var(--primary-200));
  --color-primary-300: rgb(var(--primary-300));
  --color-primary-400: rgb(var(--primary-400));
  --color-primary-500: rgb(var(--primary-500));
  --color-primary-600: rgb(var(--primary-600));
  --color-primary-700: rgb(var(--primary-700));
  --color-primary-800: rgb(var(--primary-800));
  --color-primary-900: rgb(var(--primary-900));
  --color-primary-950: rgb(var(--primary-950));

  --color-secondary: rgb(var(--secondary));
  --color-secondary-foreground: rgb(var(--secondary-foreground));
  --color-secondary-50: rgb(var(--secondary-50));
  --color-secondary-100: rgb(var(--secondary-100));
  --color-secondary-200: rgb(var(--secondary-200));
  --color-secondary-300: rgb(var(--secondary-300));
  --color-secondary-400: rgb(var(--secondary-400));
  --color-secondary-500: rgb(var(--secondary-500));
  --color-secondary-600: rgb(var(--secondary-600));
  --color-secondary-700: rgb(var(--secondary-700));
  --color-secondary-800: rgb(var(--secondary-800));
  --color-secondary-900: rgb(var(--secondary-900));
  --color-secondary-950: rgb(var(--secondary-950));
}
  }