Green-blind
Red-blind
Blue-blind
148 Named CSS Colors
Click any color to load it into the picker. Search by name or hex value.
| Swatch | Name | Hex | RGB |
|---|
All 148 standard CSS named colors per CSS Color Level 4 specification.
How Color Codes Work
Hex Codes
A hex color code like #FF5733 encodes color as three 2-digit hexadecimal numbers: red (FF = 255), green (57 = 87), blue (33 = 51). Hex ranges from #000000 (black) to #FFFFFF (white). Shorthand like #F60 expands to #FF6600.
RGB
RGB specifies the intensity of Red, Green, and Blue light, each from 0 to 255. rgb(255, 0, 0) is pure red; rgb(0, 0, 255) is pure blue. You can also specify alpha: rgba(255, 87, 51, 0.5) is 50% transparent.
HSL
HSL (Hue, Saturation, Lightness) is more intuitive: hue is the color angle (0°=red, 120°=green, 240°=blue), saturation is color intensity (0%=grey, 100%=vivid), and lightness is brightness (0%=black, 50%=normal, 100%=white). Great for programmatic color variations.
CMYK
Used in print design: Cyan, Magenta, Yellow, and Key (Black). Conversion from RGB is approximate — professional print workflows use ICC profiles for accuracy. The values shown are for reference; always verify with your printer.
Worked Example
The CSS color tomato is #FF6347. Breaking it down: R=255 (FF), G=99 (63), B=71 (47). In HSL: hue≈9°, saturation=100%, lightness=64%. WCAG contrast vs white: ~3.0:1 (AA fail for small text). Vs black: ~7.0:1 (AAA pass). So use tomato text on dark backgrounds for best readability.
Frequently Asked Questions
What is a hex color code?
A hex color code is a 6-digit hexadecimal number (like #FF5733) representing a color by mixing red, green, and blue light. The first two digits are red, next two green, last two blue — each from 00 (none) to FF (full). Shorter 3-digit codes (#F60) are valid shorthand where each digit doubles.
What is the difference between RGB and HSL?
RGB mixes red, green, and blue light values (0–255 each), matching how screens work. HSL describes Hue (color angle 0–360°), Saturation (vividness 0–100%), and Lightness (brightness 0–100%), matching how humans perceive color. HSL makes it easy to create lighter/darker variants by adjusting just the L value.
What WCAG contrast ratio do I need?
WCAG 2.1 AA requires 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold). AAA requires 7:1 and 4.5:1 respectively. These ratios apply to text against its background. Decorative graphics and inactive UI components are exempt. Use the contrast checker above to verify your color combinations.
What are complementary, analogous, and triadic colors?
Complementary colors sit opposite on the color wheel (180° apart) and create strong contrast. Analogous colors are adjacent (±30°) and create harmonious, cohesive palettes. Triadic colors are evenly spaced at 120° and provide vibrant balance. All three harmony types are shown in the "Color Harmonies" section above.
Does the eyedropper work on all browsers?
The EyeDropper API is currently supported in Chrome 95+, Edge 95+, and Opera 81+. It is not available in Firefox or Safari. The picker button is automatically hidden on unsupported browsers — the core color picker and all code formats work in all modern browsers.
What are CSS named colors?
CSS defines 148 named colors — from aliceblue to yellowgreen — that you can use directly in CSS without hex or rgb values. They're part of the CSS Color Level 4 specification and include classic web-safe colors (like red, blue) plus many descriptive names (like cornflowerblue, mediumaquamarine). The full table is searchable above.