Convert between HEX, RGB, HSL, and CMYK. Pick colors, generate harmonious palettes, check WCAG contrast ratios. All in your browser.
Convert colors between HEX, RGB, HSL, and CMYK formats instantly. MatrixAI's color converter runs entirely in your browser — no data is sent to any server.
| Format | Example | Use Case |
|---|---|---|
| HEX | #FF5733 | CSS, HTML, design tools |
| RGB | rgb(255, 87, 51) | CSS, JavaScript, screens |
| HSL | hsl(11, 100%, 60%) | CSS, color manipulation |
| CMYK | cmyk(0%, 66%, 80%, 0%) | Print design |
HEX colors use hexadecimal notation: #RRGGBB where each pair represents red, green, and blue channels (00-FF). To convert to RGB, simply convert each hex pair to decimal: #FF5733 → R:255, G:87, B:51.
HSL (Hue, Saturation, Lightness) is often more intuitive than RGB for color manipulation. Hue is a degree on the color wheel (0-360°), saturation is the intensity (0-100%), and lightness is how bright (0-100%). Adjusting lightness creates tints and shades without changing the base hue.
Use the contrast checker above to verify your color combinations meet WCAG accessibility standards.
To convert HEX to RGB, split the 6-character hex code into three pairs: the first pair is red, second is green, third is blue. Convert each pair from base-16 (hexadecimal) to base-10 (decimal). For example, #3B82F6 becomes R=59, G=130, B=246. This tool does the conversion instantly — just type or paste your HEX color and all formats update automatically.
RGB (Red, Green, Blue) defines colors by mixing three light channels with values from 0–255. HSL (Hue, Saturation, Lightness) uses a more intuitive model: hue is a degree on the color wheel (0–360°), saturation is intensity (0–100%), and lightness is brightness (0–100%). HSL is better for programmatic color manipulation — adjusting lightness creates tints and shades without changing the base hue.
WCAG (Web Content Accessibility Guidelines) contrast ratios measure the difference in luminance between foreground and background colors. WCAG 2.1 AA requires a minimum ratio of 4.5:1 for normal text and 3:1 for large text. AAA level requires 7:1 for normal text. Use this tool's contrast checker to verify your color combinations meet accessibility standards before publishing your design.
CMYK (Cyan, Magenta, Yellow, Black) is a subtractive color model used in print design. Unlike RGB which mixes light, CMYK mixes ink pigments — cyan, magenta, and yellow theoretically combine to black, but real inks produce muddy results, so black (K) ink is added separately. Use CMYK values when preparing files for commercial printing, as printers work in CMYK, not RGB.
Complementary colors sit opposite each other on the color wheel and create maximum contrast. In HSL, the complementary color is found by adding 180° to the hue. Analogous colors (adjacent on the wheel) create harmonious, natural palettes. Triadic palettes use three colors equally spaced 120° apart. This tool generates complementary, analogous, triadic, and shades/tints palettes automatically from any input color.