ToolHorizon

🎨 Color Name Finder

Closest Color Name: -

🎨 Sample of CSS Named Colors
A preview of the 140 official CSS named colors

tomato

#FF6347

steelblue

#4682B4

mediumseagreen

#3CB371

goldenrod

#DAA520

orchid

#DA70D6

coral

#FF7F50

slateblue

#6A5ACD

cadetblue

#5F9EA0

firebrick

#B22222

peru

#CD853F

teal

#008080

rebeccapurple

#663399
🚀 How to Use
Find your color name in seconds
1

Enter Your Color Code

Type or paste a HEX code (e.g. #FF6347) or RGB value (e.g. rgb(255,99,71)) into the input field. The tool supports both formats.

2

See the Exact & Closest Match

If your color is one of the 140 exact CSS named colors, its name appears immediately. If not, the tool finds the closest named color using color distance algorithms.

3

Explore Color Family

See which color family your code belongs to (Red, Blue, Green, Purple, Orange, etc.) and browse similar named colors in the same family.

4

Copy Name or Code

Copy the CSS color name, the exact HEX, or the matched color's HEX with one click — ready to use in your stylesheets or design tools.

💡 Use Cases
Why designers and developers use Color Name Finder
📝

CSS Readability

Use named colors in CSS for readability — color: tomato is clearer than color: #FF6347 in some contexts.

🎓

Learning Colors

Learn what visual color a HEX code represents by finding its human-readable name.

🔍

Color Research

Find what CSS named colors are closest to a brand color you're trying to match.

🎨

Design Naming

Name custom colors in a design system by finding their closest natural-language equivalent.

📚

Documentation

Write design documentation using human-friendly color names instead of cryptic HEX codes.

🖨️

Communication

Communicate color choices to non-technical stakeholders using descriptive color names.

✨ Pro Tips
📖

Use Named Colors Sparingly

Named colors are great for quick prototyping and learning. For production code, use HEX or HSL so your exact brand colors are used — named colors may not match your palette precisely.

🌿

Nature-Inspired Names

Many CSS color names come from nature — orchid, coral, salmon, olive, teal, lavender. These make great starting points when exploring a nature-themed design palette.

🕰️

rebeccapurple's Story

The color "rebeccapurple" (#663399) was added to CSS in 2014 as a tribute to Rebecca Meyer, the daughter of web standards pioneer Eric Meyer, who passed away at age 6.

🔍

Browse by Family

Filter the color library by family (reds, blues, greens, etc.) to quickly find all named colors in a specific hue range for your design exploration.

❓ Frequently Asked Questions
How many CSS named colors are there? +
CSS defines exactly 140 named colors — from basic ones like red, blue, and green, to descriptive ones like "blanchedalmond", "papayawhip", "mediumaquamarine", and "darkslategrey". The full list is defined in the CSS Color Level 4 specification.
What if my color doesn't have an exact CSS name? +
Most custom colors won't have an exact match. The tool uses a color distance algorithm (typically Delta-E or Euclidean distance in RGB/Lab color space) to find the closest named color to your input. This gives you the nearest visual equivalent.
Can I search for a color by its name? +
Yes — you can also search by name (e.g. type "coral" or "teal") and the tool will show you that color's HEX, RGB, and HSL values so you can use it in design tools that require exact numeric codes.
Are CSS color names case-sensitive? +
No. CSS color names are case-insensitive. "Red", "RED", "red", and "rEd" all refer to the same color (#FF0000). By convention, lowercase is used in modern CSS.
Is "grey" or "gray" correct in CSS? +
Both spellings are valid in CSS. "grey" and "gray" (and similarly "darkgrey"/"darkgray", "lightgrey"/"lightgray") are all accepted and point to the same color values. Use whichever spelling you prefer or matches your team's style guide.
🔗 Related Tools