Named Colors And Hex Equivalents

The Complete Palette of Named Colors

Named colors can be grouped into several logical categories that help you understand their relationships and find the right color for your needs:

Basic Colors (16 Colors)

These core colors have been part of CSS since the beginning, including primary colors (red, blue, green), secondary colors (cyan, magenta, yellow), neutral colors (black, white), and intermediate colors (orange, purple, pink, brown, lime, teal, navy).

Gray Scale Colors

CSS provides 11 named gray colors ranging from nearly black to nearly white: black, dimgray, gray, darkgray, silver, lightgray, gainsboro, whitesmoke, and white. It's worth noting that some of these names can be counterintuitive--"darkgray" is actually lighter than "gray," which is a legacy quirk from the X11 color system that CSS inherited.

Extended Palette

The remaining named colors include a diverse range of hues, from cornflowerblue to tomato, from goldenrod to olivedrab. These colors are particularly useful when you need something more specific than the basic colors but don't want to deal with hex codes.

Special Named Colors

• transparent: Represents fully transparent color (no color at all)
• currentColor: Takes on the value of the element's color property, which can be helpful for creating consistent color schemes

Quick Reference Table

For a complete reference of all 148 named colors supported by modern browsers, consult the MDN Web Docs Named Colors reference. This comprehensive list includes hex and RGB values for each color, making it easy to reference when building your own color systems. When implementing color systems in production websites, consider working with our front-end development team to ensure consistency and maintainability.

Hexadecimal Color Notation

Hexadecimal (hex) notation is a number system using 16 symbols (0-9, A-F) to represent color values precisely. A hex color code begins with a hash symbol (#) followed by six hexadecimal digits, divided into three pairs representing red, green, and blue components.

Each pair ranges from 00 (zero intensity) to FF (maximum intensity, equivalent to 255 in decimal). This gives us over 16.7 million possible colors--the entire range of standard displays.

The hex system is particularly elegant because each pair of hexadecimal digits represents exactly one byte of color information. This precision is why hex codes are the dominant format for specifying exact colors in web development, as outlined in the CSS Color Module Level 4 specification.

Understanding hex notation is crucial for web designers and developers. When you work with design tools like Figma or Adobe XD, you'll export colors as hex codes that can be directly used in your CSS. Our web design services ensure your color implementations are precise and consistent across all platforms.

How Hex Colors Work

Common Color Examples

• #FF0000 -- Pure red (maximum red, no green, no blue)
• #00FF00 -- Pure green (no red, maximum green, no blue)
• #0000FF -- Pure blue (no red, no green, maximum blue)
• #FFFF00 -- Yellow (maximum red + green)
• #00FFFF -- Cyan (maximum green + blue)
• #FF00FF -- Magenta (maximum red + blue)
• #000000 -- Black (all channels zero)
• #FFFFFF -- White (all channels maximum)

Shorthand Hex Notation

CSS supports a shorter 3-digit hex notation when each color channel uses identical digits in both positions. The browser automatically expands these shorthand codes by duplicating each digit.

Cannot use shorthand for: #FF6600, #AABBCC, #123456 -- these require different digits in each position of their pairs. The three-digit notation is particularly useful when you're working with simple colors in CSS custom properties or when you want to minimize file size, as noted in the web.dev CSS Color guide.

8-Digit Hex with Alpha

Modern CSS supports an 8-digit notation that adds transparency. The last two digits control opacity:

• #FF000080 -- Red at 50% opacity
• #0000FF40 -- Blue at ~25% opacity
• #00FF00FF -- Fully opaque green (same as #00FF00)

Browser support for 8-digit hex codes is excellent in modern browsers, though you should be aware that older browsers (particularly Internet Explorer) do not support this notation. For projects that need to support older browsers, provide fallback colors using standard 6-digit hex codes before the 8-digit version. When implementing modern CSS features like alpha hex codes, it's important to test across browsers and consider fallbacks--something our front-end development team handles as part of our quality assurance process.

Converting Between Named Colors and Hex

Every named color in CSS corresponds to a specific hex value. When you use a named color like tomato, the browser internally converts it to its hex equivalent (#FF6347) before applying it to the element. This means you can always convert between named colors and hex codes, though not all hex codes have named equivalents--only 148 of the millions possible colors have been given names.

Common Color Conversions

The rebeccapurple Story

rebeccapurple is the only CSS color named after a person. Eric Meyer, a renowned CSS expert, proposed adding this color to CSS in memory of his son Rebecca's brother (Eric's nephew), who passed away. The color represents a purple that was commonly used in early versions of Adobe Photoshop, and its addition to CSS provides a way to use this meaningful color while maintaining cross-browser compatibility.

Manual Conversion Formula

If you need to convert a hex color value to its decimal RGB representation, you can use basic arithmetic. Each pair of hex digits represents a number between 0 and 255, where the left digit represents "16s" and the right digit represents "1s."

Hex to Decimal: Each hex pair = (first_digit × 16) + second_digit

• #B2 → (11 × 16) + 2 = 178

Decimal to Hex: Divide by 16, convert quotient and remainder

• 178 → 11 (B) and 2 → #B2

While you rarely need to perform these conversions manually during development, understanding how the conversion works helps you develop an intuition for hex colors. When building design systems, having a solid understanding of color conversion ensures consistency across your projects--our UI design services include comprehensive color system implementation.

Best Practices for Color Format Selection

When to Use Named Colors

Named colors excel in several specific scenarios. They are ideal for rapid prototyping when you're building out a design and need placeholder colors quickly. In educational content and tutorials, named colors improve readability significantly--for someone learning CSS, background-color: lightyellow; is immediately understandable, while #fff9c4 requires mental decoding.

For commonly used colors that don't need precise control, named colors are often the right choice. If you're setting a standard error color, using red or a slightly softer indianred may be preferable to guessing at a hex value. As noted by Josh W. Comeau in his color formats tutorial, named colors like tomato and cornflowerblue can communicate intent more clearly than mysterious hex sequences.

When to Use Hex Codes

Use hex codes when you need specific brand colors that must match exactly, you're defining a design system with precise color values, you're working with colors from design tools (Figma, Sketch, Adobe XD export hex values), or you need to programmatically manipulate colors. Hex codes provide the precision and consistency that production-quality designs require.

Building a Color System

Modern CSS development typically involves creating a systematic approach to colors through design tokens and CSS custom properties. Rather than scattering hard-coded colors throughout your stylesheet, you define semantic color names at the root level and reference them throughout your code:

:root {
 /* Brand colors */
 --color-primary: #0066CC;
 --color-secondary: #6C757D;
 
 /* Semantic colors */
 --color-success: #28A745;
 --color-danger: #DC3545;
 --color-warning: #FFC107;
 
 /* Typography */
 --color-text-primary: #212529;
 --color-text-secondary: #6C757D;
 
 /* Backgrounds */
 --color-background: #FFFFFF;
 --color-surface: #F8F9FA;
}

/* Usage */
.button {
 background-color: var(--color-primary);
 color: white;
}

This approach gives you the readability of named colors (once defined) with the precision of hex codes. You can use --color-primary throughout your stylesheet, and if you need to adjust your brand color, you only need to change it in one place. This system also makes it easy to support multiple themes by redefining these variables for different contexts, as demonstrated in our UI design services. When scaling color systems across large projects, consider using our front-end development services to implement maintainable, scalable CSS architectures.

Sources

1. MDN Web Docs - Named Colors - Complete list of 148 named CSS colors
2. MDN Web Docs - CSS Color Values - Comprehensive reference on all CSS color formats
3. web.dev - CSS Color - Google's educational resource on color selection
4. Josh W. Comeau - Color Formats in CSS - In-depth tutorial on hex, rgb, hsl, and modern color formats
5. W3Schools - CSS Color Names - Quick reference for named colors
6. CSS Color Module Level 4 - W3C - Official CSS color specification