Shades of Red & Brown
Warm, energetic colors perfect for calls-to-action and emphasis
Pastel Colors
Soft, gentle colors ideal for backgrounds and subtle accents
Shades of Black & Grey
Neutral colors essential for text, backgrounds, and balance
Shades of Green
Natural, fresh colors great for success states and eco themes
Shades of Blue
Professional, trustworthy colors perfect for links and primary actions
Shades of Violet & Pink
Creative, playful colors ideal for artistic and modern designs
Complete CSS Color Reference Guide
What are CSS Named Colors?
CSS named colors are predefined color keywords that can be used directly in CSS without specifying hex, RGB, or HSL values. All modern browsers support 147 named colors, ranging from basic colors like "red" and "blue" to more specific shades like "RebeccaPurple" and "DarkSlateGray".
How to Use CSS Colors
CSS colors can be applied to any property that accepts color values. Here are the most common ways to use them:
- Named Colors: color: tomato;
- Hexadecimal: color: #FF6347;
- RGB: color: rgb(255, 99, 71);
- RGBA (with opacity): color: rgba(255, 99, 71, 0.8);
- HSL: color: hsl(9, 100%, 64%);
- HSLA (with opacity): color: hsla(9, 100%, 64%, 0.8);
Understanding Color Formats
HEX Colors
Hexadecimal format using 6 characters (or 3 for shorthand). Most commonly used in web design. Example: #FF6347
RGB Colors
Red, Green, Blue values from 0-255. Intuitive for adjusting individual color channels. Example: rgb(255, 99, 71)
HSL Colors
Hue, Saturation, Lightness. Most intuitive for color adjustments. Example: hsl(9, 100%, 64%)
Best Practices for Using CSS Colors
- Accessibility: Ensure sufficient contrast ratio (4.5:1 for normal text, 3:1 for large text)
- Consistency: Use a defined color palette across your project
- Performance: Named colors and hex codes are slightly faster than RGB/HSL
- Maintainability: Use CSS variables for frequently used colors
- Browser Support: All named colors are supported in modern browsers
CSS Color Codes FAQ
How many named CSS colors are there?
There are 147 named CSS colors supported by all modern browsers. These range from basic colors like "red" and "blue" to specific shades like "RebeccaPurple" and "MidnightBlue".
What's the difference between HEX, RGB, and HSL?
HEX uses hexadecimal notation (#RRGGBB), RGB uses decimal values for red, green, and blue (0-255), and HSL uses hue (0-360°), saturation (0-100%), and lightness (0-100%). All represent the same colors in different formats.
Can I use opacity with CSS colors?
Yes! Use RGBA or HSLA to add an alpha channel for opacity. For example: rgba(255, 99, 71, 0.5) creates a 50% transparent tomato color. You can also use the opacity property separately.
Are CSS named colors case-sensitive?
No, CSS color names are case-insensitive. "Red", "red", and "RED" all work the same way. However, lowercase is the standard convention.
Which color format should I use?
HEX is most common and compact. RGB/RGBA is good for programmatic manipulation. HSL/HSLA is most intuitive for creating color variations. Choose based on your use case and team preferences.
How do I ensure color accessibility?
Use tools to check contrast ratios. WCAG 2.1 requires 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt+ bold). Avoid using color as the only way to convey information.