Skip to content
FreeToolShelf

Color Palette Generator

Build complementary, analogous, triadic, tetradic and monochrome palettes from one colour, with contrast checks and CSS export.

  • Runs in your browser
  • Free, no sign-up
Colour math

HSL rotates hue on the classic colour wheel. Lightness can look uneven between hues.

Analogous palette

  • Base#0f763b
    HEX
    #0f763b
    RGB
    rgb(15, 118, 59)
    HSL
    hsl(145, 77%, 26%)
    OKLCH
    oklch(49.7% 0.127 151.3)
    On white 5.72:1 AAOn black 3.67:1 AA large
  • #2#0f766e
    HEX
    #0f766e
    RGB
    rgb(15, 118, 110)
    HSL
    hsl(175, 77%, 26%)
    OKLCH
    oklch(51.1% 0.086 186.4)
    On white 5.47:1 AAOn black 3.84:1 AA large
  • #3#0f4b76
    HEX
    #0f4b76
    RGB
    rgb(15, 75, 118)
    HSL
    hsl(205, 77%, 26%)
    OKLCH
    oklch(39.8% 0.093 246.1)
    On white 9.23:1 AAAOn black 2.27:1 Fail

Badges show the WCAG 2 level when the swatch is used as text on white or black: AAA (7:1), AA (4.5:1), AA large text only (3:1).

CSS variables and JSON
:root {
  --color-1: #0f763b;
  --color-2: #0f766e;
  --color-3: #0f4b76;
}

{
  "base": "#0f766e",
  "scheme": "analogous",
  "model": "hsl",
  "colors": [
    {
      "hex": "#0f763b",
      "rgb": "rgb(15, 118, 59)",
      "hsl": "hsl(145, 77%, 26%)",
      "oklch": "oklch(49.7% 0.127 151.3)",
      "contrastOnWhite": 5.72,
      "contrastOnBlack": 3.67
    },
    {
      "hex": "#0f766e",
      "rgb": "rgb(15, 118, 110)",
      "hsl": "hsl(175, 77%, 26%)",
      "oklch": "oklch(51.1% 0.086 186.4)",
      "contrastOnWhite": 5.47,
      "contrastOnBlack": 3.84
    },
    {
      "hex": "#0f4b76",
      "rgb": "rgb(15, 75, 118)",
      "hsl": "hsl(205, 77%, 26%)",
      "oklch": "oklch(39.8% 0.093 246.1)",
      "contrastOnWhite": 9.23,
      "contrastOnBlack": 2.27
    }
  ]
}

Runs entirely in your browser. Nothing you enter is sent to our server.

How to use the color palette generator

  1. Pick a base colour or type a hex value. Use Random base for inspiration.
  2. Choose a harmony: complementary, analogous, triadic, split complementary, tetradic, square, monochromatic, shades or tints.
  3. Choose the colour math. HSL follows the classic colour wheel; OKLCH keeps perceived lightness more even.
  4. Read each swatch's HEX, RGB, HSL and OKLCH values and its contrast on white and black, and copy any value.
  5. Copy the palette as CSS custom properties or download it as JSON.

Worked example

Teal base colour #0f766e

In HSL, #0f766e is hsl(175, 77%, 26%). Its complementary colour is #760f17, the triadic palette is #0f766e, #6e0f76, #766e0f, and the analogous palette (±30°) is #0f763b, #0f766e, #0f4b76. The base colour has a 5.47:1 contrast ratio on white, which passes WCAG AA for normal text.

How it works

Harmonies rotate the hue by fixed angles (complementary 180°, analogous ±30°, triadic 120°, split complementary 150° and 210°, tetradic 60°, 180° and 240°, square 90° steps) in HSL or in OKLCH. OKLCH colours outside the sRGB gamut are brought in by reducing chroma with a binary search. Shades, tints and monochrome vary lightness only. Contrast uses the WCAG 2 relative luminance formula.

Frequently asked questions

Is my data uploaded?

No. This tool runs entirely in your browser. Your input is processed on your device and is not sent to our server or stored.

What is the difference between HSL and OKLCH here?

HSL is the traditional colour wheel, but equal HSL lightness can look very different between hues (yellow looks much lighter than blue). OKLCH is designed so that equal lightness looks equally light, which gives more balanced palettes.

How do I use the contrast badges?

They show whether the swatch passes WCAG 2 as text on white or on black: AAA needs 7:1, AA 4.5:1, and "AA large" means it only passes for large text (3:1).

Can I export to Tailwind or design tools?

The CSS export gives custom properties you can reference from Tailwind theme config or any stylesheet. The JSON export includes every format for use in scripts or design tokens.

Limitations

  • Colour harmony rules are a starting point, not a guarantee of a good design.
  • Palettes are generated in sRGB; wide-gamut (Display P3) colours are not produced.

Related tools

HEX to RGB Converter and Contrast Checker

Convert colours between HEX, RGB(A), HSL and OKLCH with a live preview, and check WCAG contrast between two colours.

CSS Gradient Generator

Design linear, radial and conic CSS gradients with draggable colour stops, presets and ready-to-copy CSS.

Email Signature Generator

Build a professional HTML email signature with a live preview, then copy it into Gmail, Outlook or Apple Mail.

JSON Formatter

Pretty-print or minify JSON with 2 spaces, 4 spaces or tabs, sort keys, and see exact error positions.

JSON Validator

Validate JSON against RFC 8259 with precise error positions, duplicate-key detection and structure stats.

HTML Formatter

Beautify and re-indent HTML with control over indent size, line wrapping, attributes and blank lines.