Generator Tools

Color Palette Generator

Generate complementary, analogous, triadic, split, tetradic, and monochromatic color palettes from any HEX. Copy HEX, RGB, HSL, CSS, or Tailwind.

Base color

HEX: #3B82F6
RGB: rgb(59, 130, 246)
HSL: hsl(217, 91%, 60%)
Hue: 217 deg

Color harmony

Base color and its opposite on the color wheel. High contrast.

Quick presets

Swatch 1

#094FC2

rgb(9, 79, 194)

HEX

#094FC2

RGB

rgb(9, 79, 194)

HSL

hsl(217, 91%, 40%)

Swatch 2

#0B63F3

rgb(11, 99, 243)

HEX

#0B63F3

RGB

rgb(11, 99, 243)

HSL

hsl(217, 91%, 50%)

Swatch 3

#3B82F6

rgb(59, 130, 246)

HEX

#3B82F6

RGB

rgb(59, 130, 246)

HSL

hsl(217, 91%, 60%)

Swatch 4

#F6AF3B

rgb(246, 175, 59)

HEX

#F6AF3B

RGB

rgb(246, 175, 59)

HSL

hsl(37, 91%, 60%)

Swatch 5

#F9CD84

rgb(249, 205, 132)

HEX

#F9CD84

RGB

rgb(249, 205, 132)

HSL

hsl(37, 91%, 75%)

Export the palette

Copy any block straight into a stylesheet, design token file, or doc.

HEX list

#094FC2, #0B63F3, #3B82F6, #F6AF3B, #F9CD84

CSS custom properties

:root {
  --color-1: #094FC2;
  --color-2: #0B63F3;
  --color-3: #3B82F6;
  --color-4: #F6AF3B;
  --color-5: #F9CD84;
}

Tailwind config

theme: {
  extend: {
    colors: {
        "palette-1": "#094FC2",
        "palette-2": "#0B63F3",
        "palette-3": "#3B82F6",
        "palette-4": "#F6AF3B",
        "palette-5": "#F9CD84",
    },
  },
},

JSON

[
  {
    "hex": "#094FC2",
    "rgb": "rgb(9, 79, 194)",
    "hsl": "hsl(217, 91%, 40%)"
  },
  {
    "hex": "#0B63F3",
    "rgb": "rgb(11, 99, 243)",
    "hsl": "hsl(217, 91%, 50%)"
  },
  {
    "hex": "#3B82F6",
    "rgb": "rgb(59, 130, 246)",
    "hsl": "hsl(217, 91%, 60%)"
  },
  {
    "hex": "#F6AF3B",
    "rgb": "rgb(246, 175, 59)",
    "hsl": "hsl(37, 91%, 60%)"
  },
  {
    "hex": "#F9CD84",
    "rgb": "rgb(249, 205, 132)",
    "hsl": "hsl(37, 91%, 75%)"
  }
]

Palettes are computed in your browser using HSL color math. Nothing is uploaded.

How to use

Pick a base color with the native color picker, type a HEX value, hit a preset, or click Random base to start from a usable color.
Choose a harmony: Complementary, Analogous, Triadic, Split Complementary, Tetradic, Monochromatic, Shades, or Tints. The palette updates instantly.
Copy any single color value from the swatch panel using the HEX, RGB, or HSL Copy buttons.
Use the export panel to copy the whole palette as a HEX list, CSS custom properties, Tailwind config, or JSON.

About this tool

Color Palette Generator builds a five color scheme from a single base HEX, using classic color harmony rules from the color wheel. Pick a base color with the native picker, type a HEX (3 or 6 digit, with or without a leading hash), tap a preset, or hit Random base to get a usable starting point, then choose a harmony to see the palette update instantly. Complementary returns the base plus its 180 degree opposite for high contrast pairs. Analogous returns five neighbors within a 60 degree window for calm, cohesive looks. Triadic returns three points evenly spaced 120 degrees apart for vibrant balance. Split complementary uses the base plus the two neighbors of its opposite for softer contrast than a straight complementary pair. Tetradic returns two complementary pairs at 90 and 270 degrees for rich, varied schemes with a clear dominant pair. Monochromatic, Shades, and Tints all keep the same hue and walk lightness up or down for cohesive UI ramps, dark mode steps, and disabled state variants. Each swatch shows the HEX, RGB, and HSL value alongside an in-swatch preview rendered with WCAG relative luminance to pick readable text automatically, and every line has its own copy button. The export panel below the palette renders the same five colors as a HEX list, a CSS custom properties block (`--color-1` through `--color-5`), a Tailwind config snippet ready to paste under `theme.extend.colors`, and a JSON array with HEX, RGB, and HSL together for design tokens, Figma plugins, and design system files. The math runs in HSL space (hue rotation in degrees plus lightness or saturation steps), so the palette stays predictable and reproducible across base colors. Useful for landing pages, brand systems, dashboard charts, dark mode token sets, marketing graphics, slide decks, social posts, and any time the question is `what colors go with this one`. Everything runs locally in your browser, so the colors you experiment with never leave your device.

Free to use. Works in your browser. No signup, no login.

Related tools

Color Palette Generator

How to use

About this tool

You may also like

HEX to RGB Converter

Color Format Converter

CSS Gradient Generator

Color Contrast Checker