Named Color to HEX Converter
Type any CSS named color like 'coral', 'rebeccapurple', or 'cornflowerblue' and get its HEX, RGB, and HSL values instantly. Features an autocomplete search across all 148 CSS named colors with live colour preview, channel bars, and one-click copy for all output formats. Fully private, 100% free, and no signup required.
Popular Colors
Search across all 148 CSS named colors. Supports partial matching.
coralColor Values
Relative Luminance
0.5914(Light color)
Why Use Our Named Color to HEX Converter?
Instant Named Color Lookup
The named color to HEX converter updates all values on every keystroke - no button to press. Start typing any CSS named color and the autocomplete instantly filters all 148 CSS named colors. Select one to see HEX, RGB, HSL, luminance, and individual channel values immediately.
Smart Autocomplete Search
The named color to HEX converter supports fuzzy and partial matching. Type "blue" and see all blue-toned colors, or type "rebecca" to find rebeccapurple. The search covers both the CSS name (cornflowerblue) and the display name (Cornflower Blue) for maximum flexibility.
100% Private - No Upload
All conversion happens locally in your browser. Your colour values never leave your device and are never sent to any server - safe for client projects and proprietary design systems. The entire CSS named color database is built into the page.
Free & No Limits
Look up unlimited named colours with no signup, no subscription, and no usage caps. The named color to HEX converter is completely free forever with no ads blocking the interface.
Common Use Cases for Named Color to HEX Converter
CSS Development & Prototyping
Web developers use the named color to HEX converter to quickly look up CSS named colors during prototyping. Instead of memorising hex codes, type natural names like "coral" or "rebeccapurple" to get the exact HEX, RGB, and HSL values for your stylesheets.
Design Handoff & Communication
Designers and developers use the named color to HEX converter when communicating colour specifications. CSS named colors provide a common vocabulary - saying "use mediumseagreen for the button" is clearer than referencing a hex code during design reviews.
Learning CSS & Web Design
Students learning web development use the named color to HEX converter to explore how CSS named colors map to actual colour values. It is an educational tool that helps beginners understand the relationship between colour names and their numeric representations.
Colour Theme Exploration
Designers exploring colour themes use the named color to HEX converter to quickly browse CSS named colors by family. Search for all purple tones, blue shades, or warm reds to discover the perfect named colour for a design system.
Code Pen & Quick Prototypes
Frontend developers building quick prototypes or CodePen demos use the named color to HEX converter to find colours without leaving the browser. Named colors are often more readable than hex codes in inline styles and demonstration code.
SVG & Graphics Programming
Graphics developers working with SVG, Canvas, or WebGL use the named color to HEX converter to access the complete CSS named color palette. Named colors are frequently used in SVG files and graphics APIs for their readability and cross-browser consistency.
Understanding CSS Named Color Conversion
What are CSS Named Colors?
CSS named colors are predefined colour keywords recognised by all modern web browsers. The CSS Color Level 4 specification defines 148 named colors, from common colours like red and blue to more distinctive names like rebeccapurple and cornflowerblue. Our named color to HEX converter provides instant access to all 148 colours with autocomplete search.
How Our Named Color to HEX Converter Works
- Start typing a color name:Begin typing any CSS named color (e.g. “coral”, “rebecca”, “sky blue”). The autocomplete instantly filters the full database of 148 CSS named colors. You can search by the CSS name (
cornflowerblue) or the display name (Cornflower Blue). All processing runs locally in your browser. - Select a color or let auto-fill work: Click any suggestion from the dropdown, or keep typing until only one match remains. The colour preview and all values update in real time as you type. The large colour swatch shows the selected colour with its channel bars for Red, Green, and Blue.
- Copy any value instantly:Use the Copy button next to any output row (HEX, RGB, HSL) to copy that specific value, or use “Copy All Values” to copy the complete colour data including the colour name and luminance.
CSS Named Color Categories
- Red & Pink: 20 colours spanning pure red through pink tones, including
crimson,deeppink, andhotpink. - Orange & Yellow: 14 warm colours from
darkorangetolightyellow, including the gold and khaki family. - Green & Cyan: 33 colours covering the full green spectrum plus cyan/teal tones, from
forestgreentoturquoise. - Blue & Purple: 35 cool-toned colours from deep
midnightblueto lightlavender, including the iconicrebeccapurple. - Brown, White, Gray & Black: 46 neutral and earth-tone colours from
saddlebrownandwheatto the complete gray family and pureblack.
Why Use CSS Named Colors in Your Projects?
CSS named colors improve code readability compared to raw hex codes. Writing background: cornflowerblue is more self-documenting than background: #6495ED. Named colors are also useful in SVG files, Canvas API calls, and any context where colour names improve clarity. However, for production design systems, using CSS custom properties with semantic naming (like --color-primary) alongside named colors provides both readability and flexibility.
Our named color to HEX converter bridges the gap between named colors and precise numeric values. Whether you are prototyping, learning CSS, or need to convert a named colour to its exact HEX or RGB equivalent for a design system, this tool gives you instant, accurate results with no server-side processing.
Related Color Tools
CSS Named Colors Reference
Search, filter, and copy all 148 CSS named colors with HEX, RGB, and HSL values. Filter by 12 colour families - free online CSS named colors reference.
Color Name Finder
Enter any HEX or RGB color and instantly find the closest named color from 300+ CSS, X11, and Pantone color names. Search by name or browse the full database.
Hex to HSL Calculator
Convert HEX to HSL, RGB to HSL, and between all colour formats instantly with bidirectional inputs and live preview - free online hex to HSL calculator.
Color Picker & Converter
Visual colour picker with HEX, RGB, HSL, HSV, CMYK, HWB, and CIE LAB conversion. Bidirectional inputs, WCAG contrast checker, CSS variable output.
Frequently Asked Questions About Named Color to HEX Converter
A CSS named color is a predefined colour keyword recognised by web browsers. The CSS Color Level 4 specification defines 148 named colors, including common colours like "red" and "blue", plus more distinctive names like "rebeccapurple" and "cornflowerblue". Our named color to HEX converter supports all 148 CSS named colors with instant lookup and autocomplete.
Simply start typing any CSS named color in the search input (e.g. "coral", "rebeccapurple", or "sky blue"). The autocomplete dropdown will suggest matching colours as you type. Click any suggestion to see its HEX, RGB, and HSL values instantly. You can also use the popular colors chips above the input for quick access to commonly used named colours.
Yes. The named color to HEX converter supports partial and fuzzy matching. For example, typing "blue" will show all colours containing "blue" in their name like "skyblue", "steelblue", "cadetblue", and "cornflowerblue". You can search by both the CSS name (e.g. "cornflowerblue") and the display name (e.g. "Cornflower Blue") for maximum flexibility.
Yes. All conversion happens 100% client-side in your browser using JavaScript. The complete CSS named color database is built directly into the page. Your colour queries are never sent to any server, never stored, and never transmitted anywhere. The converter is completely private and processes everything locally on your device.
The named color to HEX converter outputs HEX (#RRGGBB), RGB, RGBA, and HSL values for every CSS named color. It also shows individual channel values (Red, Green, Blue), hue, saturation, lightness, and the relative luminance of the colour. Each value has a one-click copy button for easy use in your code.
The CSS Color Level 4 specification defines 148 named colors. These include the original 16 HTML colours (red, blue, green, etc.), the extended X11 colour names, and newer additions like "rebeccapurple" (added in CSS4). The named color to HEX converter covers all 148 colours across 12 colour families: red, orange, yellow, green, cyan, blue, purple, pink, brown, white, gray, and black.
Yes. The named color to HEX converter is 100% free with no signup required, no premium features, and no usage limits. Look up unlimited named colours without any restrictions or hidden costs. There are no ads blocking the interface.
This tool is focused on looking up CSS named colors and converting them to HEX, RGB, and HSL values. For converting hex codes back to the closest named color name, check our Color Name Finder tool in the related tools section, which can find the closest CSS named color for any hex or RGB value.