About CSS Named Colors
CSS defines 148 named colors that can be used anywhere a color value is accepted — from color and background-color to SVG fill and stroke attributes. They range from the basic 16 original HTML colors to specific names like rebeccapurple, papayawhip, and cornflowerblue.
Named colors are fully supported in all modern browsers and are defined in the CSS Color Level 4 specification. They provide a human-readable alternative to hex and RGB color values.
Frequently Asked Questions
CSS Color Level 4 defines 148 named colors. These include 16 basic colors from the original HTML specification, colors from the X11 color system, and the special addition of rebeccapurple. All named colors map to specific hex values and are universally supported in modern browsers.
The tool calculates Euclidean distance in RGB color space: sqrt((r1-r2)² + (g1-g2)² + (b1-b2)²). The named color with the smallest distance to your input is the closest match. While not perceptually perfect (human vision is more sensitive to certain colors), it gives a reliable closest name.
Yes! CSS named colors work in canvas fillStyle and strokeStyle, in CSS Custom Properties (var(--color)), and anywhere CSS accepts color values. In JavaScript: element.style.color = "rebeccapurple". You can also create an off-screen canvas element and use getComputedStyle to convert named colors to RGB values.
rebeccapurple (#663399) was added to CSS in 2014 in honor of Rebecca Meyer, daughter of web standards pioneer Eric Meyer, who passed away at age 6 from brain cancer. It was the first new named color added to CSS in a very long time and holds historical significance in the web development community.
Yes! CSS accepts both British and American spellings. gray and grey both equal #808080. This applies to all gray variants: darkgray/darkgrey (#a9a9a9), lightgray/lightgrey (#d3d3d3), dimgray/dimgrey (#696969), slategray/slategrey (#708090), lightslategray/lightslategrey (#778899), and darkslategray/darkslategrey (#2f4f4f).