Color Name to Hex - Online Official CSS Colors
Type a CSS color name like 'tomato' or 'mediumseagreen' and instantly get its hex code and preview. Complete named colors list.
UD5 Toolkit
Complete list of all 148+ named CSS colors with hex codes, RGB values & live preview
No colors found
Try a different search term or clear filters
#FF0000 or RGB values, you can simply write red, blue, or tomato in your CSS and HTML. These named colors are officially recognized by the W3C and are supported across all modern browsers. There are currently 148 named colors in the CSS specification (including rebeccapurple added in CSS Color Level 4).
rebeccapurple (#663399) — a special addition honoring Rebecca Meyer. Additionally, several colors have alternate spellings (e.g., Gray / Grey), bringing the total recognized keywords to over 150. Note that transparent and currentColor are also valid CSS color keywords but don't map to specific hex values.
AliceBlue, aliceblue, ALICEBLUE, or even aLiCeBlUe — they all work the same. However, the conventional and most readable format is PascalCase (e.g., AliceBlue, LightSkyBlue), which is how they're listed in official specifications and our tool above.
tomato is more intuitive than #FF6347. They're ideal for basic colors like white, black, or red. However, hex codes offer far more precision (16.7 million colors vs. 148 named ones), are universally understood by design tools, and are preferred in production code for consistency. Many developers use named colors for quick drafts and replace them with hex/RGB values in final builds.
rebeccapurple was added in 2014 and is now supported everywhere. You can safely use any named color in production websites without compatibility concerns.
Aqua (#00FFFF), Black (#000000), Blue (#0000FF), Fuchsia (#FF00FF), Gray (#808080), Green (#008000), Lime (#00FF00), Maroon (#800000), Navy (#000080), Olive (#808000), Purple (#800080), Red (#FF0000), Silver (#C0C0C0), Teal (#008080), White (#FFFFFF), and Yellow (#FFFF00). These were the only named colors guaranteed to work across all early browsers.
rebeccapurple (#663399) is a heartfelt tribute to Rebecca Meyer, the daughter of prominent CSS developer Eric Meyer. Rebecca passed away from brain cancer in 2014 at age 6, and purple was her favorite color. The CSS community rallied to honor her memory by adding this color to the official CSS Color Module Level 4 specification. It's the first named color added to the web standard since the original X11 colors, and serves as a touching reminder of the human stories behind web standards.
rgba(255, 99, 71, 0.5) for semi-transparent tomato, or modern syntax like rgb(from tomato r g b / 0.5) in CSS Color Level 5 (still gaining browser support). For now, if you need transparency, you'll need to convert the named color to its RGB or hex equivalent and use rgba() or 8-digit hex like #FF634780.
Type a CSS color name like 'tomato' or 'mediumseagreen' and instantly get its hex code and preview. Complete named colors list.
Grid of all 148 named CSS colors. Hover to see detail, click to copy the name or hex. Essential frontend reference.
Find the official name of any hex color from the extended color dictionary. Search by name to get the hex code. Handy for CSS and design language.
Paste a stylesheet and extract every unique color (hex, rgb, hsl) into a palette. Swatches displayed. Copy as JSON.
Test the upcoming contrast‑color() CSS function. Get white or black automatically for a given background. See it live.
Write modern CSS color functions like oklch(), lab(), hwb() and see the rendered color with fallback. Copy compatible code.
Enter color in any CSS format and see all other representations. Live preview. Swatch history.
Convert RGB and RGBA color values to their HEX or HEX+alpha representation. Live preview and copy CSS color strings instantly.
Pick colors from a palette or use the eye dropper to sample colors from your screen. Converts between HEX, RGB, HSL. An essential tool for designers.
Quickly convert HEX color codes to RGB values and vice versa. See the color preview. Indispensable for web developers and graphic designers.
Generate single random colors or full palettes. Displays hex, RGB, and copy on click. Great for design inspiration.
Discover beautiful color palettes for your projects. Generate random, complementary, or trendy schemes and copy hex codes. Useful for designers and developers.
Select emotions (calm, energetic, sad) and generate a harmonious color palette that reflects the mood.
Interactively create colors in HWB space and get the CSS hwb() function. Simplifies tint/shade workflows. Live preview.
Fetch a website's CSS and extract :root custom properties (‑‑color) to reveal its design token palette. For learning and inspiration.
Paste hex colors, generate a contrast matrix against each other. Identify failing pairs for WCAG.
List up to 10 colors and generate a contrast ratio matrix. See which pairs pass WCAG quickly.
Dynamically blend two colors using the CSS color‑mix() function in different color spaces. Copy the exact CSS snippet. No JS required.
Paste a list of hex colors and generate CSS custom properties for them. Create your design token file instantly.
Use <input type='color'> and see its change events and value in hex. Understand the native color picker. Quick demo.
Enter a Kelvin value (1000‑40000) and see the approximate white‑balance color. Photography and lighting reference.
Use the light‑dark() CSS function to change colors based on color scheme. Build a simple dark mode toggle with one property.
Enter a color palette and see how it looks for different types of color vision deficiency. Get warnings on conflicting colors.
Classic HSV color wheel with sliders. See hex, RGB, and HSL equivalents. Intuitive for artists. No server interaction.
Upload an image and instantly get a 6‑color palette with the most dominant shades. Click to copy hex codes. Canvas‑based.
Pick colors using the HWB (Hue‑Whiteness‑Blackness) model. Get the CSS hwb() function code. Simpler than HSL for some.
Set a custom accent color for checkboxes, radios, range, and progress. See the browser’s rendering. Copy the CSS.
Pick a color in the Display‑P3 space and get the CSS color() function. See the difference from sRGB. For modern design.
Paste body text and test different font/background combos. See an actual passage rendered, not just a ratio. True feel for legibility.
Generate a range of tints and shades from a single hex color. Ideal for data visualization, UI design systems, and Tailwind custom palette creation. Local tool.