Convert any color between HEX, RGB, HSL, HSV and CMYK instantly. Paste a color code, use the color picker, adjust alpha — and get WCAG contrast scores in real time.
The Color Converter accepts any color in any format you know and instantly converts it to all other major formats. Paste a hex code like #ff6347, an RGB value like rgb(255, 99, 71), an HSL string, or a CSS named color like tomato — the tool auto-detects the format and updates all eight output panels simultaneously. There is no button to click: results appear as you type.
#f80 expands to #FF8800#ff8800#ff880080rgb(255, 136, 0) or rgba(255, 136, 0, 0.5)hsl(32, 100%, 50%) or with alphahsv(32, 100%, 100%)cmyk(0%, 47%, 100%, 0%)Every color is simultaneously displayed as HEX, HEX8 (with alpha), RGB, RGBA, HSL, HSLA, HSV/HSB, and CMYK. Each output row has a one-click Copy button. The large color swatch displays the current color over a checkerboard pattern so you can see transparency clearly when alpha is below 100%. The native color picker syncs bidirectionally with the text field — pick a color visually and the text field updates, or type a value and the picker moves.
RGB (Red, Green, Blue) is the additive color model used by screens. Each channel ranges from 0 to 255, giving 16.7 million possible colors. HEX is simply RGB encoded in hexadecimal: #RRGGBB. The shorthand #RGB doubles each digit, so #f80 is identical to #ff8800. CSS also supports an 8-digit variant (#RRGGBBAA) where the last two hex digits represent the alpha channel from 00 (fully transparent) to FF (fully opaque).
HSL (Hue, Saturation, Lightness) and HSV/HSB (Hue, Saturation, Value/Brightness) describe colors in a way that maps to human perception. Hue is an angle from 0° to 360° on the color wheel (0° = red, 120° = green, 240° = blue). Saturation controls color intensity. In HSL, lightness goes from black (0%) through the pure color (50%) to white (100%). In HSV, value goes from black (0%) to the brightest version of the color (100%). Designers often prefer HSL because concepts like "make this 20% lighter" map directly to the L component.
CMYK (Cyan, Magenta, Yellow, Key/Black) is a subtractive model used in print. Instead of mixing light, you mix inks that absorb it. A value of cmyk(0, 0, 0, 0) is pure white (no ink) and cmyk(0, 0, 0, 100%) is pure black. This tool performs a mathematical conversion; professional print applications apply ICC color profiles which account for ink behavior and paper stock — those values may differ from the mathematical result.
The WCAG (Web Content Accessibility Guidelines) 2.1 standard defines minimum contrast ratios to ensure readability for users with visual impairments. The tool shows the contrast ratio of your color against pure white and pure black text, with instant compliance badges. The contrast ratio is calculated using the relative luminance formula, which applies gamma correction to each RGB channel before combining with perceptual weights (0.2126 R + 0.7152 G + 0.0722 B).
Most jurisdictions including the EU, UK, and US federal agencies mandate WCAG 2.1 Level AA as a legal minimum for public-facing digital products. The WCAG contrast badges in this tool update instantly as you change the color, making it easy to test different shades until you reach the required compliance level.
Input: #1d4ed8
rgb(29, 78, 216)hsl(224, 76%, 48%)cmyk(87%, 64%, 0%, 15%)Input: tomato
#FF6347hsl(9, 100%, 64%)hsv(9, 72%, 100%)Input: rgba(0, 200, 100, 0.5)
#00C86480hsla(150, 100%, 39%, 0.5)cmyk(100%, 0%, 50%, 22%)Both HSL and HSV share the same Hue axis (a 0–360° angle on the color wheel) and Saturation concept, but they differ in the third dimension. HSL Lightness goes from black (0%) through the pure, fully-saturated hue (50%) to white (100%). HSV Value goes from black (0%) to the brightest possible version of the color (100%). At maximum saturation, a pure red in HSL is hsl(0, 100%, 50%) while the same red in HSV is hsv(0, 100%, 100%). HSV is used in most design application color wheels; HSL is the CSS standard.
The RGB-to-CMYK formula first normalizes channels to 0–1, then computes K = 1 − max(R, G, B). For non-black colors: C = (1 − R − K) / (1 − K), M = (1 − G − K) / (1 − K), Y = (1 − B − K) / (1 − K). This is a purely mathematical conversion. Real print CMYK values differ because professional software applies ICC color profiles that account for ink characteristics, paper type, and printing gamut — use this tool for web-to-print estimates and ICC software for production files.
The alpha channel controls a color's opacity, from 0 (fully transparent) to 1 (fully opaque). In CSS, it appears as the fourth argument in rgba() and hsla(), or as the last two hex digits in an 8-digit HEX code (00 = transparent, FF = opaque). The checkerboard pattern in the swatch is a standard UI convention for visualizing transparency — you see the pattern "through" the color when alpha is less than 1.
WCAG 2.1 Level AA is the legal minimum in most jurisdictions. It requires a 4.5:1 contrast ratio for normal text (below 18pt regular or 14pt bold) and 3:1 for large text. Level AAA (7:1) offers enhanced accessibility and is recommended for text that must be readable by users with significant visual impairments. Most commercial sites target AA. Government and public-sector sites often must meet AA by law (EU Web Accessibility Directive, Section 508, etc.).
CSS shorthand HEX (#RGB) is just a compact alias where each digit is doubled: #fff is identical to #ffffff, and #0af is the same as #00aaff. This tool always expands shorthand to full 6-digit form for clarity and maximum compatibility. Similarly, the 4-digit shorthand #rgba expands to the 8-digit #rrggbbaa form. Both expanded forms are accepted by all modern browsers and design tools.
The tool recognizes all 148 standard CSS named colors defined in the CSS Color Level 4 specification, from aliceblue to yellowgreen. Both UK and US spellings are supported (darkgrey and darkgray resolve to the same value). If your color exactly matches a CSS named color, the name is displayed below the swatch. The reverse lookup converts an exact RGB match back to its canonical CSS name.
No. All conversions run entirely in JavaScript in your browser — no data is sent to any server. Once the page has loaded you can disconnect from the internet and the tool continues to work. This makes it safe to use with proprietary brand colors, unreleased design tokens, or any other sensitive color values that should not leave your machine.
Professional tools like Adobe Photoshop and InDesign apply ICC color profiles that account for ink dot gain, paper absorbency, total ink coverage limits, and the specific printer's gamut. This tool performs a profile-free mathematical conversion, which gives accurate results for the formula but will differ from profile-aware conversion. For production print files always use ICC-profile-aware software. Use this tool to understand the color model relationship or for quick reference values.