Home › Unit Conversion › Color Converter

Color Converter

Parses a colour given as HEX, RGB or HSL and returns it in HEX, RGB, HSL, HSV and CMYK notation, plus its sRGB relative luminance and WCAG 2 contrast ratios against white and black with the conformance level for text.

When to use

You need the same colour in another notation (e.g. HEX to HSL for CSS, RGB to CMYK for print) or want to check whether text in this colour meets WCAG AA/AAA contrast on a white or black background.

Do not use when: You need the contrast between two arbitrary colours (run this tool for each and divide (L1 + 0.05)/(L2 + 0.05)), colour-managed conversions (Lab, wide-gamut, ICC profiles) or print-accurate CMYK for a specific press.

Formula

HSL: L = (max + min)/2, S = (max − min)/(1 − |2L − 1|), H from the dominant channel (60° sectors); HSV: V = max, S = (max − min)/max; CMYK: K = 1 − max, C = (1 − R − K)/(1 − K) etc.; luminance Y = 0.2126·R_lin + 0.7152·G_lin + 0.0722·B_lin with c_lin = c/12.92 if c ≤ 0.04045 else ((c + 0.055)/1.055)^2.4; contrast = (Y_lighter + 0.05)/(Y_darker + 0.05)

Channels are sRGB 8-bit; HSL/HSV use the standard hexcone formulas, CMYK the simple complement (real print profiles differ). WCAG 2 thresholds: 4.5:1 AA and 7:1 AAA for normal text, 3:1 AA for large text (≥ 18 pt or 14 pt bold) and UI components.

Inputs

Parameter	Type	Unit	Required	Description
`color`	string		yes	Colour as HEX (#FF8800 or F80), rgb(255, 136, 0) / 255,136,0, or hsl(32, 100%, 50%). Bare comma-separated numbers are read as RGB unless format says otherwise.
`format`	enum: auto \| hex \| rgb \| hsl		default auto	How to interpret the colour string; auto detects #hex, rgb(...) and hsl(...) prefixes.

Outputs

Output	Type	Unit	Description
`hex`	string		#RRGGBB, upper case.
`rgb`	string		CSS rgb() notation with 0–255 integers.
`red`	integer		Red component 0–255.
`green`	integer		Green component 0–255.
`blue`	integer		Blue component 0–255.
`hsl`	string		CSS hsl() notation (hue in degrees, saturation and lightness in %).
`hue_deg`	number	°	Hue angle 0–360° (shared by HSL and HSV).
`hsl_saturation_percent`	number	%	Saturation in the HSL model.
`lightness_percent`	number	%	HSL lightness.
`hsv`	string		Hue, saturation and value (brightness) as used by many colour pickers.
`hsv_saturation_percent`	number	%	Saturation in the HSV model.
`value_percent`	number	%	HSV value = max(R, G, B).
`cmyk`	string		Naive CMYK percentages (no ICC profile).
`relative_luminance`	number		WCAG sRGB relative luminance Y (0 = black, 1 = white).
`contrast_ratio_white`	number		WCAG contrast ratio against #FFFFFF (1 to 21).
`contrast_ratio_black`	number		WCAG contrast ratio against #000000.
`wcag_on_white`	string		WCAG 2 level for this colour as text on a white background.
`wcag_on_black`	string		WCAG 2 level for this colour as text on a black background.
`best_text_color`	string		black or white, whichever has the higher contrast when this colour is the background.

Example

#FF8800: {"color":"#FF8800"} → {"hex":"#FF8800","rgb":"rgb(255, 136, 0)","red":255,"green":136,"blue":0,"hsl":"hsl(32, 100%, 50%)","hue_deg":32,"hsl_saturation_percent":100,"lightness_percent":50,"hsv":"hsv(32, 100%, 100%)","cmyk":"cmyk(0%, 47%, 100%, 0%)","relative_luminance":0.3887,"contrast_ratio_white":2.39,"contrast_ratio_black":8.77,"best_text_color":"black","wcag_on_white":"Fails (below 3:1)"}

hsl(210, 50%, 40%): {"color":"hsl(210, 50%, 40%)"} → {"hex":"#336699","rgb":"rgb(51, 102, 153)","hsv":"hsv(210, 67%, 60%)","hsv_saturation_percent":66.7,"value_percent":60,"relative_luminance":0.1251,"contrast_ratio_white":6,"contrast_ratio_black":3.5,"wcag_on_white":"AA for normal text, AAA for large text (4.5:1 to 7:1)","best_text_color":"white"}

GET https://tttkmbb.com/api/v1/calculate/color-converter?color=%23FF8800

Machine access

API: GET https://tttkmbb.com/api/v1/calculate/color-converter (query parameters) or POST with a JSON body {"inputs": {...}}
Schema: https://tttkmbb.com/api/v1/calculators/color-converter · Markdown: https://tttkmbb.com/conversion/color-converter.md · JSON definition: https://tttkmbb.com/conversion/color-converter.json
MCP: server https://tttkmbb.com/mcp, tool run_calculator with calculator_id="color-converter"
OpenAPI operationId: convert_color
Freshness: static. Authentication: none. Rate limit: fair use (see rate limits).

Sources

W3C – WCAG 2.1: relative luminance and contrast ratio definitions (standard)
W3C – CSS Color Module Level 4 (rgb(), hsl(), HSL ↔ RGB algorithms) (standard)
Wikipedia – HSL and HSV (reference)

FAQ

Why is the CMYK different from my design software?

Software converts through ICC profiles (e.g. US Web Coated SWOP) that model real inks; the naive complement formula here is the one used by most online converters and gives an approximation only.

Which WCAG level do I need?

Level AA (WCAG 2 success criterion 1.4.3) requires 4.5:1 for normal text and 3:1 for large text; AAA (1.4.6) requires 7:1 and 4.5:1. Non-text UI components need 3:1 (1.4.11).

Does the converter accept alpha?

No. Use 3- or 6-digit hex, rgb() or hsl() without an alpha channel; transparency changes the effective contrast depending on what lies underneath.

Related calculators

Number Base Converter — Hex ↔ decimal digit conversion behind hex colour codes.
Percentage Calculator — Percent arithmetic for tints and shades.
Aspect Ratio Calculator — Another common design conversion.