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 RGB, HEX, HSL, and HSV and shows the results immediately in every format.
It is useful when you are moving between CSS, design tools, and accessibility checks. You can start with one color value and inspect its equivalent representations, contrast ratios, and related palette options without re-entering the same color in several places.
The harmony tools cover complementary, analogous, triadic, and split-complementary palettes, which makes the page useful both for quick conversion work and for broader color selection.
Color work often involves switching between formats rather than changing the color itself. This calculator keeps the conversion, contrast, and palette views together so you can make design decisions without bouncing between separate tools.
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.
Last updated:
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.