Color Name Finder

What Is a CSS Color Name?

CSS defines 148 named colors that browsers recognize by keyword instead of numeric code. Rather than writing #ff6347 in a stylesheet, you can write Tomato. Rather than #6a5acd, you can write SlateBlue. These names were standardized across CSS Color Level 3 (2011) and Level 4 (2022), building on the original 17 colors from CSS 2.1 and the 140 X11 color names inherited from early Unix window systems.

A color name finder takes an arbitrary hex or RGB value and locates the named CSS color closest to it. The matching algorithm computes the distance between two colors in RGB space, usually Euclidean distance: sqrt((r1-r2)^2 + (g1-g2)^2 + (b1-b2)^2). The named color with the smallest distance to your input wins. If the distance is zero, your input is an exact match for that name.

This matters when you want readable, self-documenting CSS. A rule like background-color: Tomato communicates intent faster than background-color: #ff6347. It also helps when you need to reference a color verbally in a design review, accessibility audit, or documentation. Instead of saying 'that reddish-orange one,' you can say 'Tomato.'

Why Use This Color Name Finder?

Looking up the nearest named color by hand means scrolling through a 148-entry reference table and eyeballing hex values. This tool does the distance calculation for you and returns the top 5 closest matches with their exact hex codes and distance scores.

Color Name Finder Use Cases

CSS Named Colors Reference by Group

The CSS Color Level 4 specification defines 148 named color keywords. The table below organizes them by hue group, with the count and first few names per group. Every name listed here is a valid CSS color keyword that works in all modern browsers.

Color Distance: Euclidean RGB vs Perceptual

The method used to measure color distance affects which named color is reported as the closest match. Two approaches exist, and they can give different results for the same input.

Code Examples

Find the nearest CSS named color programmatically using Euclidean distance in RGB space. Each example takes a hex string and returns the closest color name from the CSS specification.

// Euclidean distance in RGB space
function nearestCssColor(hex) {
  const r = parseInt(hex.slice(1, 3), 16)
  const g = parseInt(hex.slice(3, 5), 16)
  const b = parseInt(hex.slice(5, 7), 16)

  let bestName = ''
  let bestDist = Infinity

  for (const [name, value] of Object.entries(cssColors)) {
    const r2 = parseInt(value.slice(1, 3), 16)
    const g2 = parseInt(value.slice(3, 5), 16)
    const b2 = parseInt(value.slice(5, 7), 16)
    const dist = Math.sqrt((r - r2) ** 2 + (g - g2) ** 2 + (b - b2) ** 2)
    if (dist < bestDist) { bestDist = dist; bestName = name }
  }
  return bestName
}

nearestCssColor('#6366f1') // → "SlateBlue"
nearestCssColor('#1e293b') // → "DarkSlateGray"

import math

CSS_COLORS = {
    "Crimson": (220, 20, 60), "SlateBlue": (106, 90, 205),
    "Tomato": (255, 99, 71), "Teal": (0, 128, 128),
    # ... full list of 148 entries
}

def hex_to_rgb(hex_str: str) -> tuple[int, int, int]:
    h = hex_str.lstrip("#")
    return (int(h[0:2], 16), int(h[2:4], 16), int(h[4:6], 16))

def nearest_css_color(hex_str: str) -> str:
    r, g, b = hex_to_rgb(hex_str)
    best = min(
        CSS_COLORS.items(),
        key=lambda item: math.dist((r, g, b), item[1])
    )
    return best[0]

print(nearest_css_color("#6366f1"))  # → SlateBlue
print(nearest_css_color("#ff6347"))  # → Tomato (exact match, distance 0)

package main

import (
	"fmt"
	"math"
	"strconv"
)

type CSSColor struct {
	Name    string
	R, G, B int
}

var colors = []CSSColor{
	{"Crimson", 220, 20, 60},
	{"SlateBlue", 106, 90, 205},
	{"Tomato", 255, 99, 71},
	// ... full list
}

func hexToRGB(hex string) (int, int, int) {
	r, _ := strconv.ParseInt(hex[1:3], 16, 64)
	g, _ := strconv.ParseInt(hex[3:5], 16, 64)
	b, _ := strconv.ParseInt(hex[5:7], 16, 64)
	return int(r), int(g), int(b)
}

func nearest(hex string) string {
	r, g, b := hexToRGB(hex)
	best := ""
	bestDist := math.MaxFloat64
	for _, c := range colors {
		d := math.Sqrt(float64((r-c.R)*(r-c.R) + (g-c.G)*(g-c.G) + (b-c.B)*(b-c.B)))
		if d < bestDist {
			bestDist = d
			best = c.Name
		}
	}
	return best
}

func main() {
	fmt.Println(nearest("#6366f1")) // → SlateBlue
}

Frequently Asked Questions