Color Theme Picker

Pick brand colors, preview them live, check contrast, and export CSS variables.

PrimaryButtons, links, brand accents

AccentHighlights, secondary actions

BackgroundPage canvas

TextBody copy on background

Generated shades

Primary

Accent

Live preview

This card uses your chosen background and text colors so you can see how the theme reads before exporting it.

Preview renders live as you edit colors above.

Contrast checker

Text on Background

14.78:1 AAAAA

Primary on Background

5.12:1 AAFails AAA

Accent on Background

3.33:1Fails AAFails AAA

Exported CSS variables

:root {
  --primary: #0f766e;
  --accent: #ea580c;
  --background: #f4f8f8;
  --text: #142432;
  --primary-50: #e8fcfa;
  --primary-100: #d2f9f6;
  --primary-200: #a5f3ed;
  --primary-300: #78ede4;
  --primary-400: #4ae8da;
  --primary-500: #1de2d1;
  --primary-600: #17b5a7;
  --primary-700: #12877e;
  --primary-800: #0c5a54;
  --primary-900: #062d2a;
  --accent-50: #feefe7;
  --accent-100: #fcdfcf;
  --accent-200: #fabe9e;
  --accent-300: #f79e6e;
  --accent-400: #f57d3d;
  --accent-500: #f25d0d;
  --accent-600: #c24a0a;
  --accent-700: #913808;
  --accent-800: #612505;
  --accent-900: #301303;
}