Free Color Tool
Free CSS Colour Namer — CSS Color Name, Variable & Snippet Generator
Enter any HEX color and instantly get the nearest CSS named color, a suggested CSS custom property variable name, and a copy-ready CSS snippet. No tool does all three together.
How to use the CSS Colour Namer
Using this tool takes under a minute. Furthermore, no account is needed and no data is sent to any server.
Paste a HEX code or click the color picker to select a color visually. Furthermore, the tool accepts RGB values in the format rgb(r, g, b) as well.
The tool shows the nearest CSS named color, your original HEX, the CSS color's own HEX and a suggested CSS custom property name derived from the color name. Furthermore, the variable follows the --color-name convention used in most design token systems.
The dark code panel below shows a complete CSS custom property declaration including a comment noting the nearest CSS name. Furthermore, clicking Copy CSS copies the full snippet ready to paste into a stylesheet.
A low distance score means the CSS name is a very close visual match. Furthermore, a high score indicates significant visual difference — use the exact HEX in production code rather than the named color.
How CSS variable names are generated
The tool finds the nearest CSS named color using the same Euclidean RGB distance algorithm as the Color Name Finder. Furthermore, once the nearest color name is identified, the variable name is generated by converting the camelCase or lowercase color name into kebab-case and prefixing it with '--color-', following the CSS custom properties naming convention.
For example, the nearest name 'slateBlue' becomes '--color-slate-blue'. Furthermore, the CSS snippet format — '--color-name: #HEX; /* ≈ cssname */' — provides both the exact color value and a human-readable comment indicating the semantic name, making the stylesheet more maintainable.
The combination of exact HEX value (for visual accuracy) and a semantic CSS name (for human readability) in the same declaration is the recommended approach for design token management. Moreover, the comment format is compatible with CSS documentation tools like Storybook and StyleDictionary.
Example: generating a CSS token for a brand purple
The following example walks through a realistic scenario step by step. Furthermore, it shows what output to expect from a typical use case.
A developer needs to add a brand purple #6A5ACD to a design token stylesheet. They enter the hex into the CSS Colour Namer.
The tool identifies the nearest CSS color as 'slateblue' (#6A5ACD — exact match, distance 0). Furthermore, it generates the variable name '--color-slateblue' and the complete CSS snippet: '--color-slateblue: #6A5ACD; /* ≈ slateblue */'.
The developer copies the snippet and adds it to their :root block. Moreover, because the CSS name and the hex are exactly the same color, they can also use 'color: slateblue;' directly in any CSS rule for maximum readability.
What are CSS custom properties and color naming conventions?
CSS custom properties (also called CSS variables) allow developers to define reusable values in a stylesheet using the syntax --property-name: value. Furthermore, they are natively supported in all modern browsers and are the foundation of scalable design token systems.
Color naming conventions vary across teams and frameworks. The most common pattern is --color-[name]-[scale], where the name is a semantic descriptor (brand, primary, accent) or a hue name (green, blue, slate) and the scale is a numeric lightness value from a design system (50, 100, 200 … 900). Furthermore, this tool generates variable names based on the nearest CSS named color, which provides a hue-based naming starting point.
Semantic naming (--color-primary, --color-danger) and descriptive naming (--color-emerald-600) serve different purposes. Semantic names communicate purpose; descriptive names communicate appearance. Furthermore, most mature design systems use both — a semantic layer that references descriptive tokens, providing flexibility to retheme the semantic layer without changing component code.
What is the CSS custom properties naming convention?
The W3C has no mandated naming convention for CSS custom properties beyond the required -- prefix. The most widely adopted convention in design systems is --color-[hue]-[scale] or --[component]-[property] (e.g. --button-bg, --input-border). Furthermore, Tailwind CSS uses a scale-first approach (--tw-color-emerald-500) while Material Design uses semantic naming (--md-sys-color-primary).
Should I use CSS named colors or HEX values in production?
Named colors are excellent for prototyping, documentation and educational code because they self-document. Furthermore, for production design systems, HEX or HSL values are preferred because they allow precise color specification regardless of browser interpretation, are version-controlled alongside design tokens, and do not depend on a designer knowing all 148 CSS names from memory.
Why having a CSS variable name alongside the color value matters
A stylesheet full of hex codes is functionally correct but semantically opaque. When a non-developer reads 'color: #6A5ACD', they cannot immediately picture the color without rendering it. Furthermore, a stylesheet with 'color: var(--color-slateblue)' tells every reader — developer, designer and reviewer — exactly what color to expect.
CSS variable naming also enables efficient theming. When a brand color changes, updating a single --color-primary variable updates every component that references it. Furthermore, this is substantially faster and less error-prone than finding every hex instance across potentially thousands of CSS rules.
The CSS snippet generated by this tool combines both approaches — the exact hex for precision and the nearest CSS name as a comment for readability. Moreover, this format is directly compatible with design token tools like Style Dictionary, Theo and Terrazzo, which parse CSS variable declarations with comments to generate documentation.
Frequently asked questions
Related color tools
Every tool in this collection runs entirely in your browser. Furthermore, all tools are free to use with no account required.
Brand Color Finder
Find the exact hex colors used by 869+ global and regional brands. Furthermore, search by color to discover which brands use that hue.
Color Converter
Convert any color between 8 formats: HEX, RGB, HSL, CMYK, HSB and more. Additionally, all values update instantly.
Color Name Finder
Find the nearest named color for any hex value. Furthermore, see both the CSS name and the designer name side by side.
Colour Blindness Simulator
Simulate how any color appears across all 8 types of color vision deficiency. Moreover, see before-and-after swatches instantly.
Contrast Checker
Check WCAG AA and AAA contrast ratios with a live text preview. Furthermore, the tool suggests passing alternative colors automatically.
CSS Gradient Builder
Build linear, radial or conic gradients visually. Furthermore, choose from 60+ mood-based presets and copy the CSS instantly.
Palette Generator
Generate a 5-color palette using 7 harmony rules. Moreover, see inline WCAG contrast scores for every color pair.
Tint & Shade Generator
Generate Tailwind-compatible tints and shades for any color. Additionally, export as CSS custom properties in one click.