Color Picker
Pick colors and convert between HEX, RGB, HSL
Contrast Ratio
Complementary & Analogous
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.