OKLCH Palette Maker

Lightness values

Colors

CSS Variables

:root {
    --red-100: oklch(1 0.2 20);
    --red-200: oklch(0.9 0.2 20);
    --red-300: oklch(0.8 0.2 20);
    --red-400: oklch(0.7 0.2 20);
    --red-500: oklch(0.6 0.2 20);
    --red-600: oklch(0.5 0.2 20);
    --red-700: oklch(0.4 0.2 20);
    --red-800: oklch(0.3 0.2 20);
    --red-900: oklch(0.2 0.2 20);

    --yellow-100: oklch(1 0.2 100);
    --yellow-200: oklch(0.9 0.2 100);
    --yellow-300: oklch(0.8 0.2 100);
    --yellow-400: oklch(0.7 0.2 100);
    --yellow-500: oklch(0.6 0.2 100);
    --yellow-600: oklch(0.5 0.2 100);
    --yellow-700: oklch(0.4 0.2 100);
    --yellow-800: oklch(0.3 0.2 100);
    --yellow-900: oklch(0.2 0.2 100);

    --green-100: oklch(1 0.2 140);
    --green-200: oklch(0.9 0.2 140);
    --green-300: oklch(0.8 0.2 140);
    --green-400: oklch(0.7 0.2 140);
    --green-500: oklch(0.6 0.2 140);
    --green-600: oklch(0.5 0.2 140);
    --green-700: oklch(0.4 0.2 140);
    --green-800: oklch(0.3 0.2 140);
    --green-900: oklch(0.2 0.2 140);

    --blue-100: oklch(1 0.2 250);
    --blue-200: oklch(0.9 0.2 250);
    --blue-300: oklch(0.8 0.2 250);
    --blue-400: oklch(0.7 0.2 250);
    --blue-500: oklch(0.6 0.2 250);
    --blue-600: oklch(0.5 0.2 250);
    --blue-700: oklch(0.4 0.2 250);
    --blue-800: oklch(0.3 0.2 250);
    --blue-900: oklch(0.2 0.2 250);
}