Skip to main content
Back to Colors generators

Colors

Random Named Color Generator

Used by developers, writers, and creators worldwide.

A random named color generator sounds simple until you realize CSS ships with 140 officially named colors most developers have never seen. This tool surfaces random named colors — complete with their exact hex codes — drawn from the full W3C specification. Set the count to anywhere from 1 to a full batch, and use the Color Family filter to stay within Reds, Blues, Greens, Yellows, Purples, or Neutrals. Designers use it to kick off moodboards without opening a color picker. Developers use it to write self-documenting CSS — background: MistyRose tells a reviewer far more than #FFE4E1. Hit refresh a few times and you will almost certainly find a color you have never typed before.

Loading usage…

Free forever — no account required

How to use

  1. Choose your options above
  2. Click Generate
  3. Copy your result

Detailed instructions

  1. Set the Number of Colors field to how many named swatches you want generated at once.
  2. Choose a Color Family from the dropdown to filter results to a specific hue range, or leave it on All.
  3. Click Generate to see your named colors displayed as swatches with their CSS name and hex code.
  4. Click any swatch or copy button to grab the hex code or color name for use in your project.
  5. Regenerate as many times as needed — each run pulls a new random selection from the filtered set.

Use Cases

  • •Prototyping a React component with readable named colors like SteelBlue instead of placeholder hex strings
  • •Generating a batch of Neutrals to seed CSS custom properties in a design token file
  • •Teaching a front-end class the full W3C named color set with visual hex comparisons
  • •Building a Figma moodboard confined to one color family using the filter before exporting swatches
  • •Populating a Storybook color palette story with real CSS-valid named color values

Tips

  • →Set count to 12 and Color Family to 'Blue' to quickly audition the full range of CSS blues side by side.
  • →When prototyping in CSS, named colors like MistyRose or SlateGray are faster to type and easier to remember than hex strings.
  • →Pair a neutral family result (grays, whites) with a vivid family result to find background-and-accent combinations fast.
  • →Copy the color name rather than the hex when writing CSS — it keeps your stylesheet readable and self-documenting.
  • →If a generated color name is unfamiliar, search it in MDN's CSS color reference to see its full browser compatibility history.
  • →Use the 'All' filter for random inspiration, then switch to a specific family once you identify a hue direction worth exploring.

FAQ

can I use CSS named colors instead of hex codes in production stylesheets

Yes — all 140 named colors work in any CSS property that accepts a color value, including SVG fill, inline styles, and CSS custom properties. They are parsed natively by every modern browser with no performance penalty, and they make code reviews easier because MediumSeaGreen communicates intent in a way that #3CB371 does not.

are CSS color names case sensitive

No. Coral, coral, CORAL, and cOrAl all resolve to the same value (#FF7F50). Convention in documentation leans toward PascalCase, but lowercase is fine and consistent with the rest of your CSS property values.

how do I use a named color in JavaScript or canvas

Named color strings work anywhere a CSS color is accepted — React inline styles (style={{ backgroundColor: 'SteelBlue' }}), canvas fillStyle, and SVG attributes all parse them correctly. Libraries like Chroma.js and the browser-native CSS.supports() API also accept named color strings and can convert them to hex or RGB on the fly.