NiftyKit

Colour Palette and Shade Generator

Make a 50–950 shade scale from one colour, or extract a palette from an image.

By Updated

Runs in your browser. Your input is not uploaded.

HEX, rgb(), hsl(), oklch() or a CSS colour name. Or take a colour from an image.

Used in the exported names, such as --brand-500.

Scale options
Base colour position

Turns the hue gradually: lighter shades one way, darker shades the other.

Shades

Select a swatch to copy its HEX value. Ratings are WCAG 2.2 contrast for white or black text on the shade.

    Colours that go with it

    Same lightness and saturation at other hues. Select one to make a scale from it.

    Export

    Extract a palette from an image

    Drop an image here or

    JPEG, PNG, WebP, GIF or SVG, up to 50 MB. The image is read in your browser and never uploaded.

    Colours to find

    How to make a shade scale

    1. Enter your base colour, such as your brand colour, or pick one with the colour picker.
    2. Check the 11 shades from 50 (lightest) to 950 (darkest). Your exact colour is marked Base.
    3. Give the palette a name, choose an export format and copy the code into your project.
    4. Optionally add a matching neutral scale for text, borders and backgrounds.

    How the scale is built

    The shades are calculated in OKLCH, a colour space designed so that equal changes in lightness look equal to the eye. That is why the steps feel evenly spaced, which HSL-based generators often get wrong: yellow and blue at the same HSL lightness look very different.

    • Lightness follows a curve close to Tailwind CSS’s own palettes, bent so that it passes exactly through your colour.
    • Chroma (colourfulness) is highest in the middle of the scale and tapers towards 50 and 950.
    • Hue stays the same unless you add a hue shift. A small shift, such as lighter shades turning warmer, can make a scale feel more natural.
    • Any shade too saturated for standard screens is made less saturated, keeping its lightness and hue, the same way browsers handle oklch() colours.

    Export formats

    FormatWhat you get
    CSS variablesA :root block of custom properties such as --brand-500, in HEX.
    Tailwind v4An @theme block with oklch() values, giving classes such as bg-brand-500.
    Tailwind v3A tailwind.config.js snippet that adds the colours under theme.extend.colors.
    SCSSSass variables such as $brand-500.
    JSON tokensDesign tokens in the W3C Design Tokens format, for Figma plugins and tools such as Style Dictionary.

    Extracting colours from an image

    The image is shrunk to about 100 × 100 pixels in your browser and its colours are grouped with k-means clustering, measured in OKLab so that colours which look alike are grouped together. Transparent areas are ignored. Each colour shows roughly how much of the image it covers. The same image always gives the same result.

    Limitations

    • A generated scale is a strong starting point, not a finished design system. Check important pairings, such as button text on its background, with the contrast ratings.
    • Very light or very dark base colours squeeze the steps on one side together, especially when pinned to a step far from their natural lightness.
    • HEX, Tailwind v3, SCSS and JSON exports are always sRGB. Only CSS variables and Tailwind v4 can keep wide-gamut colours.
    • Image extraction finds the most common colours, not necessarily the most eye-catching ones: a small bright logo on a large background may not appear.

    Frequently asked questions

    Which step should my brand colour be?

    Leave it on Nearest and the tool puts your colour on the step whose usual lightness matches it, so the rest of the scale looks natural. Many brand colours land on 500 or 600. Pin it to a step only when your design system expects it there, for example when buttons always use 600.

    Why are the light and dark shades less colourful?

    Screens cannot show very light or very dark colours with much saturation: a “bright” near-white or near-black does not exist. The tool reduces chroma towards both ends of the scale on purpose, the way hand-made palettes such as Tailwind’s do, so the shades look like one family instead of turning garish or muddy.

    Which shades can I use for text?

    Each shade shows its contrast with white text and with black text, rated against WCAG 2.2. AA (4.5:1) is the usual requirement for body text and AA Large (3:1) is enough only for large or bold text and for icons. As a rule of thumb, white text works on 600 and darker, and dark text on 300 and lighter, but check the ratings for your colour.

    What does “Keep wide-gamut colours” do?

    Some shades of very saturated colours are more vivid than standard sRGB can show. Normally they are made slightly less saturated so they look the same everywhere. With this option on, the CSS and Tailwind v4 exports keep the more vivid version as oklch(), limited to the Display P3 range of modern phones and laptops. Other screens show the nearest colour they can.