{"success":true,"version":"v1","request":{"tool":"get_calculator_schema","calculator_id":"color-converter"},"result":{"entity_type":"calculator","id":"color-converter","calculator_id":"color-converter","canonical_url":"https://tttkmbb.com/conversion/color-converter","name":"Color Converter","title":"Color Converter – HEX, RGB, HSL, HSV and CMYK with WCAG Relative Luminance and Contrast Ratios","category":"conversion","category_name":"Unit Conversion","tool_name":"convert_color","featured_mcp_tool":false,"description":"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.","use_when":"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.","inputs":[{"name":"color","label":"Colour","type":"string","required":true,"description":"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.","example":"#FF8800"},{"name":"format","label":"Input format","type":"enum","required":false,"default":"auto","values":[{"value":"auto","label":"Auto-detect"},{"value":"hex","label":"HEX"},{"value":"rgb","label":"RGB 0–255"},{"value":"hsl","label":"HSL (degrees, %, %)"}],"description":"How to interpret the colour string; auto detects #hex, rgb(...) and hsl(...) prefixes.","example":"auto"}],"outputs":[{"name":"hex","label":"HEX","type":"string","decimals":4,"description":"#RRGGBB, upper case."},{"name":"rgb","label":"RGB","type":"string","decimals":4,"description":"CSS rgb() notation with 0–255 integers."},{"name":"red","label":"Red","type":"integer","decimals":4,"description":"Red component 0–255."},{"name":"green","label":"Green","type":"integer","decimals":4,"description":"Green component 0–255."},{"name":"blue","label":"Blue","type":"integer","decimals":4,"description":"Blue component 0–255."},{"name":"hsl","label":"HSL","type":"string","decimals":4,"description":"CSS hsl() notation (hue in degrees, saturation and lightness in %)."},{"name":"hue_deg","label":"Hue","type":"number","unit":"°","decimals":1,"description":"Hue angle 0–360° (shared by HSL and HSV)."},{"name":"hsl_saturation_percent","label":"HSL saturation","type":"number","unit":"%","decimals":1,"description":"Saturation in the HSL model."},{"name":"lightness_percent","label":"Lightness","type":"number","unit":"%","decimals":1,"description":"HSL lightness."},{"name":"hsv","label":"HSV / HSB","type":"string","decimals":4,"description":"Hue, saturation and value (brightness) as used by many colour pickers."},{"name":"hsv_saturation_percent","label":"HSV saturation","type":"number","unit":"%","decimals":1,"description":"Saturation in the HSV model."},{"name":"value_percent","label":"Value (brightness)","type":"number","unit":"%","decimals":1,"description":"HSV value = max(R, G, B)."},{"name":"cmyk","label":"CMYK","type":"string","decimals":4,"description":"Naive CMYK percentages (no ICC profile)."},{"name":"relative_luminance","label":"Relative luminance","type":"number","decimals":4,"description":"WCAG sRGB relative luminance Y (0 = black, 1 = white)."},{"name":"contrast_ratio_white","label":"Contrast vs white","type":"number","decimals":2,"description":"WCAG contrast ratio against #FFFFFF (1 to 21)."},{"name":"contrast_ratio_black","label":"Contrast vs black","type":"number","decimals":2,"description":"WCAG contrast ratio against #000000."},{"name":"wcag_on_white","label":"Text on white","type":"string","decimals":4,"description":"WCAG 2 level for this colour as text on a white background."},{"name":"wcag_on_black","label":"Text on black","type":"string","decimals":4,"description":"WCAG 2 level for this colour as text on a black background."},{"name":"best_text_color","label":"Best text colour on this background","type":"string","decimals":4,"description":"black or white, whichever has the higher contrast when this colour is the background."}],"input_schema":{"type":"object","properties":{"color":{"description":"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.","type":"string","examples":["#FF8800"]},"format":{"description":"How to interpret the colour string; auto detects #hex, rgb(...) and hsl(...) prefixes.","type":"string","enum":["auto","hex","rgb","hsl"],"default":"auto","examples":["auto"]}},"additionalProperties":false,"required":["color"]},"output_schema":{"type":"object","properties":{"hex":{"description":"#RRGGBB, upper case.","type":"string"},"rgb":{"description":"CSS rgb() notation with 0–255 integers.","type":"string"},"red":{"description":"Red component 0–255.","type":"integer"},"green":{"description":"Green component 0–255.","type":"integer"},"blue":{"description":"Blue component 0–255.","type":"integer"},"hsl":{"description":"CSS hsl() notation (hue in degrees, saturation and lightness in %).","type":"string"},"hue_deg":{"description":"Hue angle 0–360° (shared by HSL and HSV). Unit: °.","type":"number","x-unit":"°"},"hsl_saturation_percent":{"description":"Saturation in the HSL model. Unit: %.","type":"number","x-unit":"%"},"lightness_percent":{"description":"HSL lightness. Unit: %.","type":"number","x-unit":"%"},"hsv":{"description":"Hue, saturation and value (brightness) as used by many colour pickers.","type":"string"},"hsv_saturation_percent":{"description":"Saturation in the HSV model. Unit: %.","type":"number","x-unit":"%"},"value_percent":{"description":"HSV value = max(R, G, B). Unit: %.","type":"number","x-unit":"%"},"cmyk":{"description":"Naive CMYK percentages (no ICC profile).","type":"string"},"relative_luminance":{"description":"WCAG sRGB relative luminance Y (0 = black, 1 = white).","type":"number"},"contrast_ratio_white":{"description":"WCAG contrast ratio against #FFFFFF (1 to 21).","type":"number"},"contrast_ratio_black":{"description":"WCAG contrast ratio against #000000.","type":"number"},"wcag_on_white":{"description":"WCAG 2 level for this colour as text on a white background.","type":"string"},"wcag_on_black":{"description":"WCAG 2 level for this colour as text on a black background.","type":"string"},"best_text_color":{"description":"black or white, whichever has the higher contrast when this colour is the background.","type":"string"}}},"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)","method":"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.","sources":[{"name":"W3C – WCAG 2.1: relative luminance and contrast ratio definitions","url":"https://www.w3.org/TR/WCAG21/#dfn-relative-luminance","type":"standard","retrieved_at":"2026-09-24"},{"name":"W3C – CSS Color Module Level 4 (rgb(), hsl(), HSL ↔ RGB algorithms)","url":"https://www.w3.org/TR/css-color-4/","type":"standard","retrieved_at":"2026-09-24"},{"name":"Wikipedia – HSL and HSV","url":"https://en.wikipedia.org/wiki/HSL_and_HSV","type":"reference","retrieved_at":"2026-09-24"}],"freshness":{"type":"static","max_age_seconds":null,"note":"Deterministic formula with fixed constants; results never go stale. Inputs supplied by the caller determine the output."},"examples":[{"name":"#FF8800","inputs":{"color":"#FF8800"},"expected":{"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)"},"url":"https://tttkmbb.com/api/v1/calculate/color-converter?color=%23FF8800"},{"name":"hsl(210, 50%, 40%)","inputs":{"color":"hsl(210, 50%, 40%)"},"expected":{"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"},"url":"https://tttkmbb.com/api/v1/calculate/color-converter?color=hsl%28210%2C+50%25%2C+40%25%29"}],"faq":[{"q":"Why is the CMYK different from my design software?","a":"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."},{"q":"Which WCAG level do I need?","a":"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)."},{"q":"Does the converter accept alpha?","a":"No. Use 3- or 6-digit hex, rgb() or hsl() without an alpha channel; transparency changes the effective contrast depending on what lies underneath."}],"tags":["color converter","hex to rgb","rgb to hsl","hex to hsl","cmyk","wcag contrast ratio","relative luminance"],"related":[{"calculator_id":"base-converter","reason":"Hex ↔ decimal digit conversion behind hex colour codes."},{"calculator_id":"percentage","reason":"Percent arithmetic for tints and shades."},{"calculator_id":"aspect-ratio","reason":"Another common design conversion."}],"links":{"html":"https://tttkmbb.com/conversion/color-converter","markdown":"https://tttkmbb.com/conversion/color-converter.md","json":"https://tttkmbb.com/conversion/color-converter.json","api":"https://tttkmbb.com/api/v1/calculate/color-converter","schema":"https://tttkmbb.com/api/v1/calculators/color-converter","openapi":"https://tttkmbb.com/openapi.json","mcp":"https://tttkmbb.com/mcp"},"version":"v1","updated_at":"2026-09-24"},"timestamp":"2026-09-24T01:47:54Z"}