HandyTools Hub

Color Name Finder

Discover the CSS name for any color

How to Use

  • Enter a HEX color code: Type any 6-digit hex color code (with or without #) into the input field. You can also use the color picker to visually select any color.
  • Find the closest named color: Click Find Name to discover the closest CSS named color. The tool uses a perceptually-weighted distance algorithm to find the best human-perceived match.
  • View complete color data: See the color’s name, swatch preview, HEX, RGB, HSL values, and the distance score showing how close the match is to your original input.
  • Browse all named colors: Use the search bar to browse all 148+ CSS named colors. Search by name fragment (e.g., “dark”) to explore related color families.

Features

  • 148+ CSS named colors: complete database of all standard CSS named colors
  • Perceptually-weighted distance: uses human perception-based weights (R3, G4, B*2) for the closest visual match
  • Visual color picker: built-in native color picker to visually select any color from the full spectrum
  • Instant color search: search all 148+ colors by name fragment with instant results
  • Multi-format output: each result shows HEX, RGB, and HSL values alongside the color name

Use Cases

  • CSS Development: Identify which CSS named color matches your design mockup’s hex codes for more readable stylesheets.
  • Design Documentation: Document your design system with human-readable color names for clearer communication.
  • Color Accessibility: Learn standard color names to improve color communication for WCAG compliance.
  • Color Exploration: Browse the full palette of 148+ CSS named colors to discover new shades and inspiration.

Frequently Asked Questions

How many CSS named colors are there?

There are 148 standard CSS named colors recognized by all modern browsers. These include the original 16 HTML4 colors, 130 additional SVG/CSS3 colors, and the newer rebeccapurple added in CSS Color Level 4.

How does the color matching algorithm work?

The tool uses a weighted Euclidean distance formula in RGB space, with weights of R*3, G*4, and B*2 to better approximate human color perception. Green differences are weighted most heavily since human eyes are most sensitive to green.

Does it support 3-character hex codes like #fff?

Yes, the tool automatically expands 3-character hex shorthand (e.g., #f80 becomes #ff8800) before finding the closest named color match. You can use either 3 or 6 character hex codes.