Digital color exists in a dozen different formats optimized for different purposes — HEX for web, RGB for displays, CMYK for print, HSL for intuitive human adjustment, OKLab and OKLCH for perceptually uniform scales, and Display P3 for wide-gamut monitors. A good color tool converts between them accurately, generates harmonious palettes that respect underlying color theory, and verifies accessibility compliance before colors ship. The sections below cover why multiple color formats exist, how color harmonies work mathematically, and why WCAG and APCA contrast compliance have become non-negotiable for professional digital design.
Why Multiple Color Formats Exist
Each color format solves a specific problem that the others handle poorly. RGB is the native format of digital displays — every screen renders color by mixing red, green, and blue sub-pixels, so RGB has a direct hardware mapping. Its weakness is that RGB values don't correspond well to how humans perceive color: (255, 128, 0) and (255, 0, 128) are both "intense" but visually very different, and there's no intuitive way to adjust "make this color darker" in RGB without knowing the channel math. HEX is just RGB in compact hexadecimal notation, ubiquitous in CSS and web design because it fits cleanly into 6 characters. HSL addresses the human-perception gap: Hue is the color angle you'd point to on a color wheel, Saturation controls vibrancy, and Lightness controls brightness. Most design-tool color pickers default to HSL because adjusting those three axes feels natural. HSV/HSB is a close cousin of HSL with a different brightness definition. CMYK is the print format — printers use cyan, magenta, yellow, and black inks rather than light, and the subtractive mixing math is fundamentally different. OKLab and OKLCH are modern perceptual color spaces where equal numeric steps produce equal visual differences. This makes them ideal for generating accessible color scales that look evenly spaced rather than clumping in the middle like HSL scales do. Wide-gamut spaces like Display P3 provide ~25% richer greens and reds for modern mobile and desktop displays. A good color tool converts between all of these accurately and understands the gamut differences.
How Color Harmonies Work
Color harmonies are sets of colors that look good together, and the theory behind them is surprisingly mathematical. Harmonies are generated by rotating the hue angle in color space while keeping saturation and lightness constant. The seven standard harmonies: Complementary (+180°, opposite on the color wheel) produces the highest contrast and is used for accent colors and calls to action. Analogous (±30°, neighbors on the wheel) produces a subtle, unified look common in nature photography and calming interfaces. Triadic (+120°, +240°) produces three colors at equal spacing, vibrant but balanced. Split-Complementary (+150°, +210°) softens the complementary pair with adjacent neighbors, easier to work with than pure complementary. Tetradic (+60°, +180°, +240°) produces four colors in a rectangular arrangement. Square (+90°, +180°, +270°) produces four equally-spaced colors — maximum variety but hardest to balance. Monochromatic holds the hue constant and varies lightness or saturation for single-color schemes. The math is simple rotation, but the visual results depend heavily on the starting color's saturation and lightness. Highly saturated starting colors produce dramatic harmonies; desaturated starting colors produce subtle ones. This tool generates all seven harmonies for any input color and shows them in context with export-ready CSS, Tailwind, SCSS, SwiftUI, Jetpack Compose, and Design Tokens configurations.
WCAG and APCA Contrast Compliance
Web Content Accessibility Guidelines (WCAG) contrast requirements have moved from optional best practice to legal requirement in many jurisdictions, and they directly affect design choices that would otherwise be made purely aesthetically. WCAG 2.1 specifies minimum contrast ratios between text and its background, measured as a ratio of relative luminances. Level AA (the typical compliance target) requires 4.5:1 for normal body text and 3:1 for large text (18pt+ bold or 24pt+). Level AAA is stricter at 7:1 for normal and 4.5:1 for large text. The emerging WCAG 3 standard introduces APCA (Advanced Perceptual Contrast Algorithm), which accounts for spatial frequency, font weight, background polarity, and light adaptation to produce a more physiologically accurate contrast score (Lc). Meeting these ratios is not optional for government and commercial applications covered by Section 508 and the ADA. The Contrast & A11y tab in this tool displays both WCAG 2.1 and APCA scores, provides one-click accessible fix suggestions, and simulates how combinations look across all major forms of color vision deficiency.