Build a five-colour palette from one base colour with complementary, analogous, triadic, split-complementary, tetradic or monochrome harmony, or pull the main colours out of a photo. Lock the swatches you like and regenerate the rest until the palette works.

Every colour gets a Tailwind-style tonal scale from 50 to 950, calculated in OKLCH and mapped into the sRGB gamut, plus a neutral grey tinted with your base hue. Check contrast and colour-blind safety, preview the palette on a light and a dark interface, then copy CSS custom properties, a Tailwind CSS 4 @theme block or Bootstrap 5 variables.

Colour palette generator Harmonies and OKLCH tonal scales to CSS variables, Tailwind CSS 4 and Bootstrap 5

Presets

Palettes from our CSS colour palettes collection, plus generated harmonies.

Harmony

Hex such as #297abe, or oklch(56% 0.13 250).

Harmony

Regenerate (or press Space when nothing is focused) picks a new seed and changes the unlocked swatches only. The same seed always gives the same palette.

The image stays on your device: it is read into a small canvas and grouped into five colours with k-means.

    Drag a swatch, or use its arrow buttons, to change the order. The first three positions are the primary, secondary and accent roles. Editing a swatch locks it.

    Tonal scales 50–950

    Your colour sits at

    How much of the base hue the neutral grey keeps.

    Wide gamut

    Hex stays in sRGB. P3 screens get more saturated values through @media (color-gamut: p3).

    Lightness follows fixed OKLCH targets, so step 500 of every hue looks equally light. The dot marks your exact colour. Colours outside sRGB lose chroma at the same lightness and hue until they fit.

    Preview

    Light
    Dark

    Accessibility

    Contrast grid (WCAG 2)

    Each cell is the contrast of the row colour on the column colour. AA needs 4.5:1 for body text and 3:1 for large text and interface parts; AAA needs 7:1.

    Preview pairs

    Colour-blind check

    Code

    CSS custom properties

    Hex values work everywhere. Browsers that understand oklch() use the @supports block instead. The roles switch with the system dark mode, or with data-theme="dark" on the html element.

    How to use it

    1. Enter a base colour as hex or oklch(), or pick a preset. Presets include the palettes from the uiCookies CSS colour palettes collection at uicookies.com/color-palette-css/.
    2. Choose a harmony. Press Regenerate, or the Space bar when nothing is focused, to try new variations; lock a swatch to keep it, and drag swatches or use their arrow buttons to set which colour is primary, secondary and accent. Extract from image builds the palette from a photo instead.
    3. Under Tonal scales, choose whether your exact colour sits at its nearest step or always at 500, set how much colour the neutral grey keeps, and add Display P3 values if you want more saturated colours on wide-gamut screens.
    4. Check the contrast grid, the preview pairs and the colour-blind rows, and switch the preview to protanopia, deuteranopia, tritanopia or achromatopsia to see how the interface holds up.
    5. Rename the tokens if you like, then open the CSS, Tailwind 4, Bootstrap 5, JSON or Hex list tab and copy the code or download the .css file. Copy link saves the whole palette in the address.

    Colour harmonies

    A colour harmony picks hues at fixed angles around the colour wheel. Complementary uses the hue opposite the base (180°), analogous uses neighbours about 30° either side, triadic spaces three hues 120° apart, split complementary takes the two hues next to the complement (150° and 210°), tetradic uses four hues 90° apart, and monochrome keeps one hue and changes only lightness and chroma.

    This tool measures the angles in OKLCH rather than HSL, so the hue steps follow how colours look, not how the RGB numbers are spread. The extra swatches also move in lightness and chroma, so a palette contains light and dark versions as well as different hues. Each regenerate adds a small seeded variation; the same base, harmony and seed always give the same result.

    Harmonies are a starting point. In an interface one colour usually leads: it marks buttons, links and the active state. A second colour supports it, and an accent appears in small amounts for badges, highlights and charts. Strong complementary pairs at equal size and lightness tend to vibrate, so let one of them be lighter, darker or smaller.

    Tonal scales from 50 to 950 in OKLCH

    A tonal scale is a ramp of one hue from very light (50) to very dark (950). Design systems need these steps for backgrounds, borders, hover states and text on tinted panels. Tailwind CSS 4 ships its own palettes as eleven OKLCH steps, and this tool builds the same shape for every colour in your palette.

    OKLCH describes a colour by perceptual lightness (L), chroma (C) and hue (H). Its lightness is designed to match how bright a colour looks, so step 500 of a yellow and step 500 of a blue look about equally light. In HSL, a yellow and a blue at 50% lightness look very different, which is why scales built in HSL end up uneven across hues.

    Each step has a target lightness. Your own colour stays exact at the step closest to its lightness, or at 500 if you choose, and the other steps are spread above and below it. Chroma is highest in the middle of the scale and lower at both ends. When a step falls outside sRGB, chroma is reduced at the same lightness and hue until it fits, so the hex value never clips to a different hue. With Display P3 turned on, wide-gamut screens get oklch() values with more chroma, while hex stays as the sRGB fallback.

    Accessible palettes: contrast and colour-blind safety

    WCAG 2 measures contrast as the ratio between the relative luminance of two colours, from 1:1 to 21:1. Body text needs at least 4.5:1 for level AA and 7:1 for AAA. Large text, meaning about 24px regular or 19px bold, needs 3:1 for AA, and so do icons, input borders and other interface parts. The grid compares every swatch with white, black and each other, and the preview pairs table checks the combinations the preview actually uses.

    Many mid-tone brand colours land close to 4.5:1 against both white and black. In that case use a darker step, such as 700, for links and small text on light backgrounds, and keep the exact brand colour for large areas and buttons with large or bold labels.

    About 8% of men and 0.5% of women of Northern European ancestry have some form of red-green colour vision deficiency. The simulation uses the Machado, Oliveira and Fernandes matrices for protanopia, deuteranopia and tritanopia, plus a greyscale view for achromatopsia, and flags pairs that end up closer than 0.07 in OKLab. When two colours carry meaning, such as success and error, add a label, an icon or a pattern as well.

    Using the palette in Tailwind CSS 4 and Bootstrap 5

    Tailwind CSS 4 reads design tokens from an @theme block in your CSS. Every variable in the --color-* namespace becomes a set of utilities, so --color-brand-500 gives bg-brand-500, text-brand-500, border-brand-500 and the rest. Add --color-*: initial at the top of the block to remove Tailwind's default palette and keep only your own colours. A colour named neutral replaces Tailwind's built-in neutral scale.

    In a Bootstrap 5.3 Sass build, set $primary and $secondary before Bootstrap's variables are imported, then merge extra colours into the $theme-colors map. Bootstrap then writes .btn-accent, .bg-accent, .text-bg-accent and the other classes for each new key, and works out their hover and active shades itself.

    With the compiled bootstrap.min.css you can override the --bs-primary and --bs-primary-rgb custom properties, but buttons keep their colours in their own --bs-btn-* variables. The CSS tab for Bootstrap therefore also sets those variables, using the same 15%, 20% and 25% tint and shade steps that Bootstrap's Sass applies, and adds the utility classes for the extra colours.

    Use it with our free components: Colour palettes · Dark UI kit · Gradient generator

    Frequently asked questions

    What is the difference between hex and OKLCH colours?

    Hex stores red, green and blue values for the sRGB colour space and works in every browser. OKLCH stores lightness, chroma and hue in a perceptual colour space and can describe colours beyond sRGB, such as Display P3. The generated CSS gives hex values first and oklch() values inside @supports, so older browsers keep the hex colours.

    Why is my colour at step 600 and not 500?

    By default your colour sits at the step whose target lightness is closest to its own, so a fairly dark blue lands at 600 or 700 and a pale yellow at 200 or 300. This keeps the rest of the scale evenly spaced. Choose Always 500 if you want your exact colour at 500; the steps above and below are then spread to fit around it.

    How do I add custom colours to Tailwind CSS 4?

    Put the colours in an @theme block in the CSS file that imports Tailwind, using the --color- prefix, for example --color-brand-500: oklch(62% 0.15 250). Tailwind creates utilities such as bg-brand-500 and text-brand-500 from them. There is no tailwind.config.js needed for colours in version 4.

    How do I change the primary colour in Bootstrap 5?

    With Sass, set $primary before importing Bootstrap's variables and compile, and every component that uses the primary colour updates. Without Sass, load a stylesheet after bootstrap.min.css that sets --bs-primary and --bs-primary-rgb and the --bs-btn-* variables on .btn-primary, because the compiled buttons do not read --bs-primary.

    Does the image I upload leave my computer?

    No. The image is drawn into a small canvas in your browser, at most 96 pixels on the long side, and the pixels are grouped into five colours with k-means clustering in OKLab. Nothing is uploaded and nothing is stored.

    More free tools