Convert between RGB, HEX, HSL, and HSV color formats. Explore color harmony, contrast ratios, and generate complementary palettes for web design.
The RGB Color Calculator converts between all major color formats — RGB, HEX, HSL, and HSV — and provides instant visual feedback, contrast ratio checking, and color harmony palettes. Enter any color value in any format and see all equivalent representations plus accessibility scores.
Web designers and developers constantly juggle color formats. CSS uses hex (#3b82f6), rgb(59, 130, 246), and hsl(217, 91%, 60%) interchangeably. Design tools output HSB/HSV values. This calculator bridges all formats and adds WCAG contrast checking against white and black backgrounds.
The tool also generates complementary, analogous, triadic, and split-complementary color harmonies, giving you a complete palette starting from any single color. Each harmony swatch shows its hex code, making it easy to copy values directly into your CSS or design tool. Check the example with realistic values before reporting. Use the steps shown to verify rounding and units. Cross-check this output using a known reference case. Use the example pattern when troubleshooting unexpected results.
Instantly convert between all color formats, check WCAG accessibility compliance, and generate harmonious color palettes — all in one tool for designers and developers. Keep these notes focused on your current workflow. Tie the context to real calculations your team runs. Use this clarification to avoid ambiguous interpretation. Align the note with how outputs are reviewed.
HEX to RGB: Parse pairs of hex digits as decimal (0-255). RGB to HSL: H = atan2-based hue, S = (max-min)/(1-|2L-1|), L = (max+min)/2. Contrast Ratio = (L1 + 0.05) / (L2 + 0.05) where L = relative luminance.
Result: #3B82F6, hsl(217, 91%, 60%), Contrast on white: 3.44:1
RGB(59, 130, 246) is a vivid blue. It has good contrast on dark backgrounds (12.59:1 on black) but only 3.44:1 on white — below WCAG AA for normal text.
RGB is an additive color model: mixing all channels at maximum produces white. It maps directly to how screens emit light from red, green, and blue sub-pixels. Every pixel on your monitor is an RGB triplet.
HSL and HSV remap these three channels into more intuitive dimensions. Hue represents the color itself as an angle on a wheel (0°=red, 60°=yellow, 120°=green, 180°=cyan, 240°=blue, 300°=magenta). Saturation represents vividness, and Lightness/Value represents brightness.
WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios to ensure text is readable by people with moderate vision impairments. The contrast ratio formula compares the relative luminance of foreground and background colors.
A ratio of 1:1 means identical colors (invisible text). A ratio of 21:1 is the maximum (black on white). Most body text should exceed 4.5:1, and large/bold text should exceed 3:1.
Color harmonies are mathematical relationships on the color wheel that produce aesthetically pleasing combinations. Complementary (180°) creates vibrant contrast. Triadic (120° apart) offers rich diversity. Analogous (adjacent) feels cohesive. Split-complementary (150°/210°) balances contrast and harmony.
They encode the same information differently. RGB uses decimal (0-255) per channel; HEX uses hexadecimal (00-FF). #FF0000 = rgb(255, 0, 0) = pure red.
HSL (Hue, Saturation, Lightness) is more intuitive for design. Hue is the color angle (0°=red, 120°=green, 240°=blue), saturation is vividness, lightness is brightness. Use HSL when you want to create shades or tints of a color.
WCAG AA requires 4.5:1 for normal text and 3:1 for large text. WCAG AAA requires 7:1 for normal text and 4.5:1 for large text. Use this calculator to verify your color combinations.
Complementary colors are 180° apart on the color wheel. They create maximum contrast and visual vibrance when placed side by side. Example: blue (#3b82f6) and orange (#f6a23b).
A measure of how bright a color appears to the human eye, weighted by our sensitivity to green > red > blue. Formula: L = 0.2126×R + 0.7152×G + 0.0722×B (after gamma correction).
HSV (Hue, Saturation, Value) and HSL differ in the brightness axis. HSV 100% value means maximum channel intensity; HSL 100% lightness means white. HSV is used in color pickers; HSL is more common in CSS.