Palette generator

Type a brand color (any format) and the generator produces an AAA-contrast token set in OKLCH, gamut-mapped to sRGB. Copy the JSON or preview against any layout.

Brand colorSecondary (optional)Neutral modeScheme

JSON

{
  "light": {
    "background": "oklch(0.985 0.007 42.206)",
    "foreground": "oklch(0.16 0.013 42.206)",
    "muted": "oklch(0.96 0.007 42.206)",
    "mutedForeground": "oklch(0.45 0.018 42.206)",
    "subtle": "oklch(0.92 0.013 42.206)",
    "border": "oklch(0.86 0.018 42.206)",
    "input": "oklch(0.86 0.018 42.206)",
    "ring": "oklch(0.68 0.148 42.206)",
    "primary": "oklch(0.16 0.013 42.206)",
    "primaryForeground": "oklch(0.985 0.007 42.206)",
    "secondary": "oklch(0.55 0.102 222.206)",
    "secondaryForeground": "oklch(0.985 0.005 0)",
    "accent": "oklch(0.68 0.148 42.206)",
    "accentForeground": "oklch(0.18 0.02 0)",
    "accentSoft": "oklch(0.92 0.044 42.206)",
    "accentDeep": "oklch(0.35 0.105 42.206)",
    "destructive": "oklch(0.55 0.22 25)",
    "destructiveForeground": "oklch(0.985 0 0)",
    "success": "oklch(0.6 0.16 145)",
    "successForeground": "oklch(0.985 0 0)",
    "warning": "oklch(0.78 0.17 75)",
    "warningForeground": "oklch(0.16 0 0)",
    "card": "oklch(0.985 0.007 42.206)",
    "cardForeground": "oklch(0.16 0.013 42.206)",
    "popover": "oklch(0.985 0.007 42.206)",
    "popoverForeground": "oklch(0.16 0.013 42.206)"
  },
  "dark": {
    "background": "oklch(0.16 0.013 42.206)",
    "foreground": "oklch(0.985 0.007 42.206)",
    "muted": "oklch(0.24 0.013 42.206)",
    "mutedForeground": "oklch(0.68 0.018 42.206)",
    "subtle": "oklch(0.35 0.018 42.206)",
    "border": "oklch(0.35 0.018 42.206)",
    "input": "oklch(0.35 0.018 42.206)",
    "ring": "oklch(0.78 0.135 42.206)",
    "primary": "oklch(0.985 0.007 42.206)",
    "primaryForeground": "oklch(0.16 0.013 42.206)",
    "secondary": "oklch(0.68 0.126 222.206)",
    "secondaryForeground": "oklch(0.18 0.02 0)",
    "accent": "oklch(0.78 0.135 42.206)",
    "accentForeground": "oklch(0.18 0.02 0)",
    "accentSoft": "oklch(0.35 0.105 42.206)",
    "accentDeep": "oklch(0.92 0.044 42.206)",
    "destructive": "oklch(0.65 0.22 25)",
    "destructiveForeground": "oklch(0.16 0 0)",
    "success": "oklch(0.7 0.16 145)",
    "successForeground": "oklch(0.16 0 0)",
    "warning": "oklch(0.82 0.17 75)",
    "warningForeground": "oklch(0.16 0 0)",
    "card": "oklch(0.24 0.013 42.206)",
    "cardForeground": "oklch(0.985 0.007 42.206)",
    "popover": "oklch(0.24 0.013 42.206)",
    "popoverForeground": "oklch(0.985 0.007 42.206)"
  }
}

background

oklch(0.985 0.007 42.206)

foreground

oklch(0.16 0.013 42.206)

muted

oklch(0.96 0.007 42.206)

mutedForeground

oklch(0.45 0.018 42.206)

subtle

oklch(0.92 0.013 42.206)

border

oklch(0.86 0.018 42.206)

primary

oklch(0.16 0.013 42.206)

accent

oklch(0.68 0.148 42.206)

accentSoft

oklch(0.92 0.044 42.206)

accentDeep

oklch(0.35 0.105 42.206)

secondary

oklch(0.55 0.102 222.206)

destructive

oklch(0.55 0.22 25)

success

oklch(0.6 0.16 145)

warning

oklch(0.78 0.17 75)

Primary

contrast 18.59:1

The quick brown fox jumps over the lazy dog. Aa Bb Cc 1234.

Accent

contrast 6.20:1

The quick brown fox jumps over the lazy dog. Aa Bb Cc 1234.

Secondary

contrast 4.50:1

The quick brown fox jumps over the lazy dog. Aa Bb Cc 1234.

Card

contrast 18.59:1

The quick brown fox jumps over the lazy dog. Aa Bb Cc 1234.