Color Palette Generator

Build complementary, analogous, triadic, tetradic or monochrome palettes from one color, with HEX, RGB, HSL, OKLCH, WCAG contrast and CSS or Tailwind export.

The interactive tool loads here when JavaScript runs.

About this tool

What is the Color Palette Generator?

Enter one colour as HEX, rgb(), hsl(), oklch() or a CSS name and choose a harmony rule. The palette appears at once: complementary, analogous, triadic, split-complementary, tetradic (rectangle), square, monochromatic or tints and shades. Each swatch lists HEX, RGB, HSL and OKLCH values, the text colour that reads best on it, and its WCAG contrast level.

You can rotate hues on three wheels: the RGB wheel used by screens and most design apps, an approximate painter's red-yellow-blue wheel where red sits opposite green, and the perceptual OKLCH wheel, which keeps every colour at about the same lightness. A contrast grid shows which palette colours can be used as text on which backgrounds.

Below the palette, an 11-step 50 to 950 scale of your base colour is built in OKLCH, ready for a design system. Export everything as CSS custom properties, a Tailwind v3 config, a Tailwind v4 @theme block, SCSS variables or JSON. The same palette engine is available to AI assistants through the RedBison MCP server.

  • Eight harmony rules on RGB, RYB or OKLCH wheels
  • HEX, RGB, HSL and OKLCH for every swatch
  • WCAG 2.2 contrast against white, black and each other
  • Tailwind-style 50 to 950 scale built in OKLCH
  • CSS variables, Tailwind v3 and v4, SCSS and JSON export
  • Shareable links and an MCP tool for AI assistants
Read the guide: Color Harmony Explained: Building Palettes That Work on Screen

How to use the Color Palette Generator

  1. Pick a base colour with the colour picker, type a value such as #3b82f6 or oklch(62% 0.19 260), or press the shuffle button.
  2. Choose a harmony rule. The note under the menu shows the angles it uses.
  3. Choose the wheel: RGB / HSL for screen work, Artist's RYB for traditional complements, OKLCH for even lightness.
  4. Click any swatch to copy its HEX value and use the contrast grid to pair text and background colours.
  5. Name the colour, pick an export format and copy the CSS, Tailwind, SCSS or JSON code.

Worked examples

Triadic palette from Tailwind blue

Input

#3b82f6, triadic, RGB wheel

Output

#3b82f6, #f63b82, #82f63b

Hue 217° plus 120° and 240° keeps the same HSL saturation (91%) and lightness (60%). All three need black text for AA.

Painter-style complement

Input

#ff0000, complementary, Artist's RYB

Output

#ff0000 and #00ff00

On the RYB wheel red faces green. On the RGB wheel the same rule gives cyan, #00ffff.

Design-system scale

Input

#3b82f6, 50 to 950 scale

Output

#3b82f6 lands at step 500

Its OKLCH lightness is 0.623, closest to the 500 target of 0.647, so the exact brand colour sits at 500 and the other ten steps are generated around it.

Background and insight

Harmony rules are fixed angles on a colour wheel: complementary is 180° away, triadic uses 120° steps, split-complementary takes the two hues 30° either side of the complement (150° and 210°), analogous uses neighbours 30° apart, tetradic combines two complementary pairs 60° apart and square uses 90° steps. They come from painters' colour theory, popularised by Johannes Itten's 12-part red-yellow-blue wheel. On that wheel the complement of red is green; on the RGB light wheel it is cyan. Neither is wrong, they model mixing pigment and mixing light.

Rotating hue in HSL keeps the HSL numbers but not the perceived brightness: pure yellow and pure blue are both 50% lightness in HSL yet look very different. OKLab and its polar form OKLCH, published by Björn Ottosson in 2020 and now part of CSS Color 4, were designed so equal lightness looks equally light. Rotating in OKLCH gives palettes that hold together when used as tints, and the tool reduces chroma when a rotated colour falls outside the sRGB gamut rather than clipping the channels.

Accessibility is measured with the WCAG 2.2 contrast ratio, (L1 + 0.05) / (L2 + 0.05) from relative luminance. Normal text needs 4.5:1 for level AA and 7:1 for AAA; large text (24 px, or about 18.7 px bold) and interface components need 3:1. Ratios are truncated to two decimals, so 4.499 shows as 4.49 and fails. The 50 to 950 scale uses OKLCH lightness targets averaged from Tailwind CSS 3.4's blue, red, green and violet scales, and your exact colour replaces the step closest to its lightness.

Common use cases

  • Brand and product colours

    Grow one brand colour into accents, backgrounds and a full 50 to 950 scale.

  • Web and app design systems

    Export CSS variables or Tailwind tokens straight into a codebase.

  • Data visualisation

    Pick distinct series colours with triadic or square rules and check their contrast.

  • Illustration and print

    Use the painter's wheel for traditional complementary schemes.

Tips and limitations

  • Harmony rules give hues, not a finished design. Use one colour as dominant, one as secondary and the rest sparingly.
  • Check text contrast in the grid before shipping; harmonious colours often fail WCAG against each other.
  • Use the OKLCH wheel when palette colours will appear side by side at the same weight, such as chart series or tags.
  • The RYB wheel is an approximation. There is no single standard red-yellow-blue space, so different tools give slightly different results.
  • Generated scales are a starting point. Tailwind's own palettes are tuned by hand; adjust steps that look off for your hue, especially yellows.
  • Copy the link: the base colour, rule and wheel are kept in the address so you can share the palette.

Frequently asked questions

How do I make a colour palette from one colour?

Enter the colour, choose a harmony rule such as triadic or analogous, and copy the swatches or export them as CSS. Monochromatic and tints and shades keep the same hue.

What is the complementary colour of blue?

On the RGB screen wheel the complement of pure blue (#0000ff) is yellow (#ffff00). On the painter's RYB wheel it is orange. The tool lets you choose either wheel.

What is the difference between complementary and split-complementary?

Complementary uses the single hue opposite the base. Split-complementary uses the two hues next to it, 150° and 210° from the base, which gives contrast with less tension.

Why use OKLCH instead of HSL?

HSL lightness does not match what we see: yellow at 50% looks far brighter than blue at 50%. OKLCH lightness is perceptual, so rotating hue keeps colours visually balanced.

Can I generate a Tailwind colour scale from my brand colour?

Yes. The 50 to 950 scale is built in OKLCH with lightness steps averaged from Tailwind's own palettes, with your exact colour at the nearest step. Export it as a v3 config or v4 @theme block.

What contrast ratio do palette colours need?

WCAG 2.2 AA needs 4.5:1 for normal text and 3:1 for large text and interface components; AAA needs 7:1 for normal text. The grid colours each pair by those thresholds.

Can AI assistants use this palette generator?

Yes. The RedBison MCP server exposes it as the color_palette tool, which returns the same colours, contrast values, scale and CSS and Tailwind exports.

Is there an in-depth guide to the Color Palette Generator?

Yes. “Color Harmony Explained: Building Palettes That Work on Screen” covers the background, how it works, common pitfalls and worked examples. Read the full guide.

People also search for

  • generate color palette from one hex code
  • complementary color of a hex code
  • triadic color scheme generator
  • split complementary color palette
  • tailwind color scale from brand color
  • oklch palette generator
  • accessible color palette with contrast ratios
  • export palette as css variables

Related Tools You May Like

Free, in-browser tools that pair well with this one.