Why does WCAG require 4.5:1 contrast?
This ratio ensures people with moderately low vision can still read text without assistive technology. It's the AA accessibility standard.
Color Picker
Pick colors and convert between HEX, RGB, HSL
Contrast Ratio
⬜ ⬛
Complementary & Analogous
Color Picker
Should I use HEX or RGB in CSS?
HEX is more concise and commonly used. Use rgba() when you need transparency (e.g., rgba(0, 0, 0, 0.5) for 50% transparent black).
How do I implement dark mode colors?
Use CSS custom properties with @media (prefers-color-scheme: dark) to swap your color variables. Define light mode values by default, override them in the dark media query.
Understanding Color Codes: HEX, RGB, and HSL
Colors on screens are defined by mixing light, not pigment. The three most common formats are HEX (#FF5733), RGB (rgb(255, 87, 51)), and HSL (hsl(11, 100%, 60%)). They all describe the same color -- they're just different ways of expressing it. HEX is compact and widely used in CSS. RGB maps directly to how screens work. HSL is the most human-intuitive: rotate the hue, adjust saturation, change lightness.
WCAG Contrast Ratios: Accessibility You Can Measure
The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios between text and background. AA level requires 4.5:1 for normal text, 3:1 for large text. AAA requires 7:1. White text on a pure blue (#0000FF) background has a contrast ratio of 8.59:1 -- plenty of contrast. White on yellow (#FFFF00)? Just 1.07:1 -- nearly invisible. Color pickers that show contrast ratios help you make accessible color choices before you write a line of CSS.
HSL: The Color Model That Makes Sense to Humans
RGB is how computers think about color; HSL is how humans do. Hue is the color's position on the spectrum (0°=red, 120°=green, 240°=blue). Saturation controls how vivid the color is (0% is gray, 100% is pure color). Lightness controls brightness (0% is black, 100% is white, 50% is the "true" color). Want a lighter version of your brand color? Increase the L value. Want a muted version? Decrease the S value. Much more intuitive than trying to calculate new RGB values.
Color Harmony: Complementary and Analogous Palettes
Complementary colors are opposites on the color wheel -- they create maximum contrast and visual tension. Blue and orange, red and green, purple and yellow. Analogous colors are neighbors on the wheel -- they create cohesive, harmonious palettes. A good UI color system usually has one primary color, one accent (often complementary), a handful of neutrals, and semantic colors for success/warning/error. The primary and accent relationship is where complementary colors shine.
CSS Custom Properties for Color Systems
Modern web projects define colors as CSS custom properties (variables). Instead of scattering hex values throughout your CSS, you define them once: --color-primary: #2563EB; --color-accent: #F59E0B; Then use them everywhere: background-color: var(--color-primary). When your design needs to change a brand color, you change it in one place. Dark mode becomes a media query that overrides the variables.
Frequently Asked Questions
Should I use HEX or RGB in CSS?
HEX is more concise and commonly used. Use rgba() when you need transparency (e.g., rgba(0, 0, 0, 0.5) for 50% transparent black).
Why does WCAG require 4.5:1 contrast?
This ratio ensures people with moderately low vision can still read text without assistive technology. It's the AA accessibility standard.
How do I implement dark mode colors?
Use CSS custom properties with @media (prefers-color-scheme: dark) to swap your color variables. Define light mode values by default, override them in the dark media query.