How to use the Color Palette Name Generator
- Load your colors. Click any swatch under Your colors to change it with your system color picker, press + to add one (up to ten) or × to remove one. You can also paste into Or paste HEX codes — a list, a CSS file or a Coolors-style link all work, because the tool simply picks out every HEX code it finds. That includes the page link of the Color Palette Generator, which carries its colors in the address.
- Read the color names. Every swatch gets a name, and the gray line under it shows the reasoning: the HEX code, how light it is, whether it’s muted or vivid, and its hue family.
- Steer the vocabulary. Under Name colors after, pick Food, Nature, Minerals or Textiles to favor that kind of word. Press ↻ beside a single color for an alternative, ↻ New names for a fresh set, or 🎲 Random colors if you just want to explore.
- Pick a palette name. Below the swatches you get names in different styles — poetic, place and time, food, one word, pairing, materials, mood, season, an era or botanical name, and a catalog-style minimal one. Copy grabs one; ☆ saves it with its colors in this browser.
- Export. Copy list gives you lines like
Muted Slate — #264653. Copy CSS variables gives a ready:rootblock with each property named after its color. Share copies a link that reproduces the same names.
How the names are worked out
The generator does not guess from the HEX code’s digits. It converts each color to CIE LCh, a color space designed so that equal numeric steps look roughly equal to the eye. L is lightness from 0 (black) to 100 (white), C is chroma — how far the color sits from a gray of the same lightness — and h is the hue angle in degrees.
That matters because the more familiar HSL model misreports lightness. Pure yellow #FFFF00 and pure blue #0000FF both have an HSL lightness of 50%, yet their L values are about 97 and 32. A naming system built on HSL would call them equally light, and anyone who has painted a yellow next to a blue knows that’s wrong.
Each color is then sorted three ways. Lightness falls into dark (below 38), mid (38–68) or light (above 68). Chroma decides muted or vivid, with a lower cut-off for light colors because pale tints can’t hold much saturation. The hue angle picks one of thirteen families. Anything with almost no chroma — below about 10 — is treated as a neutral and named by lightness and by the faint tint it carries: warm, cool, greenish or pinkish.
Every combination has its own small word list, tagged by theme. #264653 comes out at roughly L 28, C 14, h 236: dark, muted, blue, so it draws from words like Slate, Storm Cloud and Night Harbor. #E9C46A sits at L 81, C 50, h 87 — light, vivid amber — and gets Honeycomb, Butterscotch or Sunflower. A modifier is only added when the color sits at an extreme: Deep or Inky below L 20, Pale above L 90, Dusty or Smoky when chroma is very low for its group, Bright or Electric when it’s unusually high. Within one palette no noun is used twice.
Hue families at a glance
The ranges below are LCh hue angles. Examples are standard web colors measured with the same formula the tool uses.
| Family | Hue range | Example | Typical names |
|---|---|---|---|
| Rose | 345°–15° | Pink #FFC0CB, h 8° |
Petal, Peony, Rhubarb |
| Red | 15°–42° | Red #FF0000, h 40° |
Poppy, Garnet, Oxblood |
| Red-orange | 42°–55° | Coral #FF7F50, h 46° |
Terracotta, Adobe, Rust |
| Orange and brown | 55°–72° | Saddle brown #8B4513, h 57° |
Apricot, Camel, Walnut |
| Amber | 72°–92° | Mustard #E1AD01, h 85° |
Honey, Khaki, Bronze |
| Yellow and olive | 92°–112° | Olive #808000, h 103° |
Lemon, Lichen, Olive Drab |
| Yellow-green | 112°–130° | Sage #9CAF88, h 128° |
Sage, Pear, Loden |
| Green | 130°–165° | Emerald #50C878, h 149° |
Jade, Laurel, Bottle Green |
| Blue-green | 165°–215° | Teal #008080, h 196° |
Patina, Lagoon, Sea Glass |
| Blue | 215°–275° | Steel blue #4682B4, h 263° |
Slate, Cerulean, Chambray |
| Ultramarine | 275°–310° | Blue #0000FF, h 306° |
Cobalt, Lapis, Periwinkle |
| Violet | 310°–324° | Lavender #B57EDC, h 314° |
Heather, Amethyst, Lilac |
| Magenta | 324°–345° | Magenta #FF00FF, h 328° |
Orchid, Plum, Fuchsia |
Notice that screen blue #0000FF lands at 306°, much closer to violet than most people expect — one reason ultramarine and violet sit side by side here.
Tips from practice
Name for whoever uses the palette next. A client moodboard wants “Night Harbor”; a stylesheet wants a variable that still makes sense in a year. The copied CSS uses the names, but many designers also keep role names such as --color-accent pointing at them, so a recolor doesn’t mean renaming everything.
Stay in one vocabulary per collection. A fabric line named Lapis, Malachite and Garnet feels planned; Lapis next to Blueberry and Fog feels assembled. Pick one theme under Name colors after and keep it for the whole series.
Don’t let a name promise a different color. If a greenish yellow comes back as “Lemon”, buyers will picture something warmer. The gray reasoning line is there so you can catch mismatches before they reach a product listing.
Always pair the name with the code. Names are memorable; HEX codes are exact. Write “Night Harbor (#264653)” in shop listings, pattern notes and client emails, and nobody has to guess.
Use the names in your files. harbor-teal-tile.png and a layer called “Sunstone” are far easier to find six months later than color3-final-v2. If you started from an existing image, pull the colors with the Image to Palette Extractor first, then name them here.