Uwarp

Help Us Improve

—

(—)

Color palette generator from name

Turn a color name or brand word into a palette. Copy hex and CSS variables. Local-first, no signup.

What is a color palette generator from name?

A color palette generator from name maps a color word or brand string to a seed hex, then builds a small working palette. This page matches CSS keywords and a named-color catalog, or hashes a brand word when no name exists.

Palette-from-name features

Name, brand word, or hex to a copyable palette.

  • Color names

    CSS keywords such as coral and a larger named-color catalog such as sage.

  • Brand words

    If the text is not a color name, a stable hue is hashed from the word.

  • Suggestions

    Partial matches appear as chips you can apply.

  • CSS export

    Copy hex from swatches or the full :root variable block.

How to generate a palette from a name

Three steps from a word to CSS variables.

  1. Type a name

    Try sage, navy, or a brand word such as Figma.

  2. Pick a suggestion

    If several catalog names match, tap a chip.

  3. Copy the palette

    Click a swatch for hex, or copy the CSS variables.

Great for

Name-first palette starts.

  • Mood words

    Start from sage, rust, or midnight instead of a hex.

  • Brand naming

    Hash a product name into a consistent seed when no brand hex exists yet.

  • CSS keywords

    Confirm what a CSS named color actually resolves to, then expand it.

Why use this generator

A free name-to-palette path in the browser.

  • Free to use

    No signup. The palette updates as you type.

  • Honest fallback

    Brand words are hashed, not pretended to be official brand colors.

  • Local-first

    Name lookup and palette math stay in the browser.

Technical details

How a name becomes a palette.
Resolution order
Hex → CSS named color → catalog match → hashed hue from the string.
Catalog
Uses the color-name-list dataset already on this site for extra names such as sage.
Palette
Seed plus lighter/darker, analogous, complement, and a neutral.

Sources & References

Named-color references used to resolve a word to a hex.
  • “The <named-color> CSS data type is a keyword that represents a specific color.”
    — MDN Web Docs — <named-color>

    MDN — named-color: CSS keywords typed here resolve to the same hex values documented on MDN. developer.mozilla.org/en-US/docs/Web/CSS/named-color

  • “16.7 million colors can be specified directly. A much smaller set has names.”
    — W3C — CSS Color Module Level 4

    W3C CSS Color Module: Named colors are the first lookup. Other strings fall through to the catalog or a hash. w3.org/TR/css-color-4/#named-colors

Frequently Asked Questions

Quick answers about this tool—open a question to read more.