Palette Crafter

Light mode • WCAG AA compliant • Harmonious colors

Base Colors

Background

#FAFAF9

hsl(60, 9%, 98%)

oklab(0.985 -0.000 0.001)

--bg

Click to copy

Foreground

#1A1F14

hsl(87, 22%, 10%)

oklab(0.230 -0.013 0.017)

--fg

Click to copy

Color Scales

Primary

#88d926

100

200

300

400

500

600

700

800

900

950

Secondary

#2d88d2

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));
}
  }