About CSS Color Code Reference & Contrast Checker
Visual reference catalog of all standard W3C CSS Color Module named colors (from aliceblue to yellowgreen). Filter by hue family, inspect precise HEX, RGB, and HSL values, and view automated WCAG 2.1 contrast ratio calculations against pure black and white backgrounds.
Key Capabilities & Features
- Visual catalog of all 148 standard W3C CSS named colors with crisp color swatches
- Color family filtering (Red, Pink, Orange, Yellow, Purple, Green, Blue, Brown, Gray, etc.)
- Exact color format conversions: 6-digit HEX, rgb(r, g, b), and hsl(h, s%, l%)
- Automated WCAG 2.1 contrast ratio calculations against white (#FFF) and black (#000)
- WCAG compliance badges: AAA, AA, AA Large, or Fail indicators
How to Use CSS Color Code Reference & Contrast Checker
Search or Filter
Search for a color name or select a hue family pill.
Inspect Swatch
View the live full-color preview and color values.
Verify Contrast
Check the WCAG accessibility ratings for readability on dark or light backgrounds.
Copy Values
Click any RGB, HEX, or HSL value to copy directly to your stylesheet.
Privacy & In-Browser Execution Guarantee
100% Client-Side. Color conversions and relative luminance calculations execute locally in-browser.
Frequently Asked Questions
What contrast ratio is required for WCAG AA compliance?
WCAG 2.1 Level AA requires a contrast ratio of at least 4.5:1 for normal body text and 3:1 for large text (at least 18pt or 14pt bold).
Are named CSS colors supported in all web browsers?
Yes, the standard 148 named CSS colors are defined in the W3C CSS Color Module Level 3 and 4 and are universally supported across all browsers.