Super Calculator logoSuper Calculator

Color Converter

Convert colors between HEX, RGB, and HSL formats

Results are estimates for informational purposes only — not professional financial, medical, or legal advice. See how we build and verify our calculators.

Frequently Asked Questions

What is the difference between RGB and HEX color codes?

RGB and HEX are two formats for the same color. RGB uses three decimal values (0-255): rgb(255, 107, 53). HEX uses hexadecimal: #FF6B35. They are identical: 255 in decimal = FF in hex, 107 = 6B, 53 = 35. HEX is compact for HTML/CSS. RGB is easier to understand intuitively.

What is HSL color format?

HSL stands for Hue (0-360 degrees on the color wheel), Saturation (0-100%, gray to vivid), and Lightness (0-100%, black to white). HSL is more intuitive for design: to make a color lighter, increase L. To desaturate, decrease S. Pure red = hsl(0, 100%, 50%).

How do I find the complementary color?

The complementary color is directly opposite on the color wheel: rotate hue by 180 degrees. If your color is hsl(30, 80%, 50%) (orange), the complement is hsl(210, 80%, 50%) (blue). In RGB, the complement is (255-r, 255-g, 255-b). Complementary colors create strong contrast.

What colors are best for accessibility (contrast)?

WCAG AA requires a contrast ratio of at least 4.5:1 for normal text. Contrast ratio = (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter color relative luminance. Dark text on white (#FFFFFF) or light text on very dark backgrounds works well. Avoid light gray on white, or yellow on white.

What is CMYK color?

CMYK (Cyan, Magenta, Yellow, Black) is used in printing. Unlike RGB (additive — mixing light), CMYK is subtractive — mixing inks. White paper = no ink (0,0,0,0). Black = K=100 (key plate). Formula: C=(1-R/255), M=(1-G/255), Y=(1-B/255), K=min(C,M,Y), then subtract K from each. RGB is for screens, CMYK for print.

Color Model Comparison

RGB — Screens, web, digital
0-255 per channel (16M colors)
HEX — CSS, HTML, design tools
#RRGGBB (same as RGB in hex)
HSL — Design, color relationships
Hue 0-360°, Sat/Light 0-100%
HSV/HSB — Photo editing (Photoshop)
Hue 0-360°, Sat/Value 0-100%
CMYK — Print, physical materials
0-100% per channel

Color Psychology

Red — urgency, passion, danger (#FF0000)
Orange — energy, warmth, creativity (#FF6600)
Yellow — optimism, attention, warning (#FFFF00)
Green — nature, growth, safety (#00AA44)
Blue — trust, calm, professional (#0066CC)
Purple — luxury, mystery, spiritual (#8800CC)