HedgieTools

Palette generator

Start from your main color and get a full interface palette: secondary, tertiary, success, warning, danger and neutrals, with their shades and contrast checks.

Your main color

Type a value or pick a color: the rest of the palette is built around it.

Secondary and tertiary
Value format

Type a HEX value, such as #2563EB, or click the square to pick the color.

Your palette

Click a value or a shade (50 to 950) to copy it. The pencil replaces a suggested color with your own: it stays fixed when you change the main color.

  • —

    Primary

    your color
  • —

    Secondary

    complementary
  • —

    Tertiary

    near complementary
  • —

    Info

    blue
  • —

    Success

    green
  • —

    Warning

    orange
  • —

    Danger

    red
  • —

    Neutral

    tinted gray

Light and dark tokens

The working colors of your interface, ready for the light and the dark theme. Each one points to a shade of the palette. Click to copy.

  • --backgroundPage background
  • --surfaceCards and panels
  • --surface-mutedSecondary areas
  • --borderBorders and dividers
  • --textMain text
  • --text-mutedSecondary text
  • --primaryButtons and links
  • --primary-hoverHover state
  • --on-primaryText on primary
  • --focus-ringFocus outline
  • --secondarySecondary accent
  • --tertiaryTertiary accent
  • --infoInformation
  • --info-softInformation background
  • --successSuccess
  • --success-softSuccess background
  • --warningWarning
  • --warning-softWarning background
  • --dangerDanger, error
  • --danger-softError background

Matching colors

The classic harmonies around your main color, for illustrations, charts or accents.

  • Complementary

    the opposite color

  • Split complementary

    softer than the opposite

  • Analogous

    the neighboring colors

  • Triad

    three balanced colors

  • Tetrad

    four colors in a square

  • Monochromatic

    one hue, several intensities

Preview and contrast

The palette applied to a few interface elements, and how readable each pairing is under the WCAG rules.

Preview theme
Page titleSecondary text, less important, under the title.
A card with a link and buttons.
PrimarySecondaryTertiary
Info · An update is available.
Success · Your changes are saved.
Warning · Your subscription expires soon.
Error · The payment failed.
  • Text on background
    Ratio—Normal text—Large text—AAA—
  • Secondary text on background
    Ratio—Normal text—Large text—AAA—
  • Link on background
    Ratio—Normal text—Large text—AAA—
  • Primary button
    Ratio—Normal text—Large text—AAA—
  • Secondary button
    Ratio—Normal text—Large text—AAA—
  • Tertiary text on background
    Ratio—Normal text—Large text—AAA—
  • Info alert
    Ratio—Normal text—Large text—AAA—
  • Success alert
    Ratio—Normal text—Large text—AAA—
  • Warning alert
    Ratio—Normal text—Large text—AAA—
  • Danger alert
    Ratio—Normal text—Large text—AAA—

Export

Get the palette in the format chosen above (HEX).

Enter a main color to generate the code.

CSS variables for the palette (--color-primary-500…). The tokens point to these variables; turn the dark theme on with data-theme="dark" on the html element.

About the palette generator

Pick the main color of your brand and get everything an interface needs around it: companion colors, state colors, neutrals, shades, light and dark tokens, contrast checks and code to paste, all without leaving your browser.

A full palette from one color

The tool derives a secondary and a tertiary color from your main one, the state colors (info, success, warning, danger) matched to its style, and slightly tinted greys for backgrounds and text.

Ready-to-use shades

Every color comes in eleven shades, from the lightest (50) to the darkest (950), for backgrounds, borders, hover states and text. If a suggested color does not suit you, replace it with your own: its shades follow.

Light and dark tokens

Background, surface, border, text, hover, focus and alert backgrounds: each working color points to a shade of the palette, with one value for the light theme and one for the dark theme.

Checked contrast

Every pairing of text and background is rated against the WCAG rules: 4.5:1 for normal text, 3:1 for large text and 7:1 for the AAA level.

Export to CSS, Tailwind, JSON

Copy each value in HEX, RGB, HSL or OKLCH, or download a CSS variables file, a Tailwind v4 theme, a Tailwind v3 config, JSON or a plain list. Everything happens in your browser: nothing is sent or saved.

Related tools