Digital color exists in multiple formats because different tools, contexts, and output devices use different color models. Web browsers, design software, digital displays, and printing presses each operate differently, and converting between their formats accurately is a routine task in web development and design work.
HEX (hexadecimal) is the most common color format in web development. A hex code like #1E3A8A represents three bytes: red (1E = 30), green (3A = 58), blue (8A = 138). Each pair of hex digits ranges from 00 (0) to FF (255), giving 256 possible values per channel and over 16 million possible colors. Modern CSS also supports four-character shorthand (#RGB expands to #RRGGBB) and eight-character format (#RRGGBBAA) with an alpha transparency channel.
RGB (red, green, blue) is the native model for digital displays. Screens emit light from red, green, and blue subpixels, mixing them additively to produce color. Maximum intensity on all channels (255, 255, 255) produces white; zero on all channels produces black. HSL (hue, saturation, lightness) separates color identity from its properties. Hue is the color angle on a 360-degree wheel (0° = red, 120° = green, 240° = blue). Saturation controls intensity from grey (0%) to vivid (100%). Lightness controls brightness from black (0%) to white (100%). Designers prefer HSL because adjusting one axis does not accidentally affect the others: to lighten a color, increase the lightness value and the hue stays exactly the same.
A brand designer specifies the primary brand color as #2563EB. The same color is needed in four different formats for four different uses across the project.
The developer defines it as a CSS custom property using hex: --color-primary: #2563EB. For a CSS gradient function that requires RGB values: background: linear-gradient(to right, rgb(37, 99, 235), rgb(79, 70, 229)). The motion designer needs HSL for creating lighter and darker color variants without picking new colors from scratch: the base color is hsl(217, 91%, 53%) — decreasing lightness to 43% produces a darker pressed state, and increasing to 63% produces a hover state, both perfectly matched in hue and saturation. For a print brochure, the print team needs CMYK values: C=84% M=58% Y=0% K=8%. All four representations describe exactly the same color.
This tool converts between all four formats instantly as you type in any field. Change the HEX value and RGB, HSL, and CMYK update immediately. Adjust the HSL saturation and all other formats reflect the change. The color swatch updates in real time so you always see the actual color you are working with.
WCAG accessibility contrast requirements specify minimum contrast ratios between foreground and background colors to ensure readability for users with low vision. Normal text requires at least 4.5:1 for AA conformance and 7:1 for AAA. Large text (18pt or larger, or 14pt bold or larger) requires 3:1 for AA and 4.5:1 for AAA. The contrast checker in this tool calculates the luminance of both colors, computes the ratio, and shows clear pass/fail badges for both AA and AAA thresholds. Any production design that must meet accessibility standards — which includes most public-facing web applications — should verify contrast ratios before shipping.
Color gamut limitations affect print reproduction. The sRGB color space used by most computer monitors can display colors that CMYK printing cannot reproduce accurately. Bright saturated greens and blues that look vivid on screen often print as duller, less saturated versions. The CMYK values this tool provides are a mathematical approximation — always request a physical print proof or digital soft-proof when precise color matching is required for production print materials.
Modern color spaces are gaining adoption in CSS. The oklch color space (part of CSS Color Level 4) provides perceptually uniform color — equal numeric steps in lightness produce equal perceived brightness differences, which is not true of HSL. This makes oklch ideal for generating accessible, harmonious color palettes programmatically. The display-p3 color space covers a wider gamut than sRGB and is supported on modern Apple displays and many newer monitors, allowing richer, more vivid colors for devices that can display them.
This color converter syncs HEX, RGB, HSL, and CMYK formats in real time as you type in any field. Click the large color swatch to open the native color picker. The random color generator and recent colors history (stored in localStorage) make it easy to explore palettes. The built-in WCAG contrast checker shows AA and AAA pass/fail for any foreground/background combination. All color math happens in your browser.
Type or paste a hex color code (such as #2563EB or 2563EB) into the HEX field. The color converter instantly converts it to RGB (red, green, blue values 0–255), HSL (hue 0–360°, saturation and lightness 0–100%), and CMYK (cyan, magenta, yellow, black 0–100%). You can also click the color swatch at the top to open your browser's native color picker.
HSL (hue, saturation, lightness) separates the color identity (hue, 0–360°) from its intensity (saturation) and brightness (lightness). This makes it intuitive to create color variations: decrease lightness to darken, decrease saturation to mute. CSS natively supports HSL with the hsl(217, 91%, 60%) syntax, making it popular for design systems and theme variables.
Enter your foreground color using the main color picker, then enter the background color in the Contrast Checker section. The tool calculates the WCAG contrast ratio and shows pass/fail badges for AA (≥4.5:1 for normal text, ≥3:1 for large text) and AAA (≥7:1 for normal text, ≥4.5:1 for large text) accessibility standards. A live text preview shows how the colors look together.
RGB (Red, Green, Blue) is an additive color model for screens — colors are created by combining light, with white being the maximum of all three. CMYK (Cyan, Magenta, Yellow, Black) is a subtractive model for print — colors are created by absorbing light via ink, with white being the absence of all inks. The same hex color may look different when printed in CMYK due to gamut limitations.
No. All color conversion, contrast calculation, and recent color history storage runs entirely in your browser using JavaScript math. No color data is ever transmitted to any server. The recent colors history is stored in your browser's localStorage under the key "encodedecode-colors" and never leaves your device.