Convert colors between HEX, RGB, HSL, HSV and CMYK with alpha, WCAG contrast check and palette variations.
Input color
All formats — click to copy
Color variations
WCAG contrast checker
Palette presets
FAQ
What is the difference between HEX and RGB?
HEX is a six-digit hexadecimal representation of the three RGB channels. #FF0000 is the same as rgb(255, 0, 0). RGB uses integers 0–255 per channel; HEX encodes the same values as hex pairs. Both describe additive red, green and blue light.
When should I use HSL instead of RGB or HEX?
HSL (hue, saturation, lightness) is intuitive for designers because you can adjust how light or saturated a color is without changing its hue. It is ideal for generating tints, shades, and color themes. RGB and HEX are better for exact color matching and web output.
What does the alpha channel mean?
Alpha controls opacity. A value of 1 (or 100%) is fully opaque; 0 is fully transparent. In rgba(255,0,0,0.5) the red is 50% see-through. The 8-digit HEX #FF000080 is the same thing — the last two hex digits encode the alpha byte.
Why does the converter show CMYK values?
CMYK is the subtractive model used by printers (cyan, magenta, yellow, key/black). Screens emit light (RGB), but ink absorbs it. Converting RGB to CMYK is an approximation because printer profiles vary — use the CMYK values as a starting point for print design, not a final specification.
How is the WCAG contrast ratio calculated?
It compares the relative luminance of two colors using the formula (L1 + 0.05) / (L2 + 0.05), where L is computed from the linearized RGB channels. Ratios range from 1:1 (no contrast) to 21:1 (black on white). WCAG AA requires 4.5:1 for normal text and 3:1 for large text; AAA requires 7:1 and 4.5:1.
What are tints, shades, and triadic colors?
A tint is a color mixed with white (lighter). A shade is a color mixed with black (darker). A complementary color sits 180° across the hue wheel. Analogous colors are adjacent on the wheel (±30°). Triadic colors form an equilateral triangle on the wheel (120° apart) and create vibrant, balanced palettes.
The Color Converter parses any color format you paste — HEX (3, 4, 6 or 8 digits), RGB, RGBA, HSL, HSLA, HSV, CMYK and CSS named colors — and outputs all equivalent formats at once. Every result card is click-to-copy, so moving values between design tools and CSS takes one tap.
Adjust the alpha slider to see the effect across every format, and use the color picker for a visual reference. The calculator also generates tints, shades, complementary, analogous and triadic variations so you can build a palette from a single starting color.
The built-in WCAG contrast checker compares your foreground color against any background and reports the exact ratio plus AA and AAA pass or fail for normal and large text. Use it to verify that UI text meets accessibility standards before shipping.