# 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.

- Calculator id: `color-converter` · Category: Unit Conversion (`conversion`) · Tool name: `convert_color`
- Canonical page: https://tttkmbb.com/conversion/color-converter · This document: https://tttkmbb.com/conversion/color-converter.md · JSON definition: https://tttkmbb.com/conversion/color-converter.json

## Purpose

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.

## Input

| Parameter | Type | Unit | Required | Description |
| --- | --- | --- | --- | --- |
| `color` | string |  | required | 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 |  | optional, default "auto" | How to interpret the colour string; auto detects #hex, rgb(...) and hsl(...) prefixes. |

## Output

| Field | 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. |

## 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.

## Data Sources

- W3C – WCAG 2.1: relative luminance and contrast ratio definitions — https://www.w3.org/TR/WCAG21/#dfn-relative-luminance (standard, retrieved 2026-09-24)
- W3C – CSS Color Module Level 4 (rgb(), hsl(), HSL ↔ RGB algorithms) — https://www.w3.org/TR/css-color-4/ (standard, retrieved 2026-09-24)
- Wikipedia – HSL and HSV — https://en.wikipedia.org/wiki/HSL_and_HSV (reference, retrieved 2026-09-24)

Data freshness: `static`. Deterministic formula with fixed constants; results never go stale. Inputs supplied by the caller determine the output.

## API

- `GET https://tttkmbb.com/api/v1/calculate/color-converter?color=…`
- `POST https://tttkmbb.com/api/v1/calculate/color-converter` with JSON body `{"inputs": {…}}`
- Response: unified envelope (`success`, `request`, `result.values`, `result.units`, `sources`, `freshness`, `timestamp`, `next_actions`, `links`); see https://tttkmbb.com/docs/response-format.md
- Schema: https://tttkmbb.com/api/v1/calculators/color-converter · OpenAPI operationId `convert_color` in https://tttkmbb.com/openapi.json
- Authentication: none. Rate limit: fair use, see https://tttkmbb.com/docs/rate-limits.md.

## MCP

- Server: `https://tttkmbb.com/mcp` (Streamable HTTP, JSON-RPC 2.0, no auth)
- Tool:  `run_calculator` with `{"calculator_id": "color-converter", "inputs": {…}}`

## Example

- #FF8800: inputs `{"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%): inputs `{"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
```

## Limitations

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. 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. All values are computed from the formula above; no measurement or live data is involved.

## 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

- [Number Base Converter](https://tttkmbb.com/math/base-converter.md) — Hex ↔ decimal digit conversion behind hex colour codes.
- [Percentage Calculator](https://tttkmbb.com/math/percentage.md) — Percent arithmetic for tints and shades.
- [Aspect Ratio Calculator](https://tttkmbb.com/everyday/aspect-ratio.md) — Another common design conversion.