Skip to main content
dubinity

Design & Accessibility

Color Palette Generator

Generate colour palettes from a base colour and a harmony, or at random with locks, then export CSS, tokens, Tailwind or a PNG.

  • Runs in your browser
  • Works on mobile
  • In: HEX, RGB, HSL, OKLCH
  • Out: CSS, JSON, Tailwind config, PNG
Loading the tool…

Your files and text are processed on your own device, inside this page. Nothing is uploaded to Dubinity or stored, and closing the tab discards it. How privacy works

About Color Palette Generator

Start from a base colour and pick a harmony - complementary, analogous, triadic, split complementary, tetradic or monochromatic - or press Randomise and lock the swatches you like. Harmonies are built in the OKLCH colour space, so rotated hues keep the same perceived lightness.

Each swatch shows its contrast against white and black, and a 50-950 scale, tints, shades or tones. Click a swatch to copy its hex code. Export CSS variables, DTCG JSON, Tailwind colours or a PNG image of the palette. Your last palette is kept in this browser.

How to use it

  1. 1Choose a base colour and a harmony, or press Randomise.
  2. 2Lock the swatches you want to keep and randomise again.
  3. 3Check each colour's contrast and its 50-950 scale.
  4. 4Export as CSS, JSON, Tailwind or a PNG image.

Questions

Was this tool helpful?

Related tools

All design tools

  • Color Contrast Checker

    Check the WCAG 2.2 contrast ratio of a text and background colour, with AA and AAA verdicts and the nearest passing colour.

    HEX · RGB · HSL
    Runs in your browserOpen tool

  • Design Token Generator

    Build a small design-token set - colours, type scale, spacing, radii and shadows - and export CSS variables, DTCG JSON or Tailwind.

    HEX · RGB · HSL
    Runs in your browserOpen tool

  • Colour Palette Extractor

    Pull the dominant colours out of any picture and copy them as HEX, RGB, HSL, CSS variables or JSON.

    JPG · PNG · WEBP
    Runs in your browserOpen tool

  • WCAG Palette Contrast Grid

    Paste up to 12 colours and see the WCAG contrast ratio of every pair in one grid, filtered by AA or AAA.

    HEX · RGB · HSL
    Runs in your browserOpen tool

  • Type Scale Generator

    Build a modular type scale from a base size and ratio, preview every step and export CSS, design tokens or Tailwind config.

    Base size · RATIO
    Runs in your browserOpen tool

  • Color Converter

    Convert a colour between HEX, RGB, HSL, HSV, HWB, CMYK and OKLCH, with contrast against black and white.

    TEXT
    Runs in your browserOpen tool