/en/tool/color-converter/ works Runs in the browser
Paste a color in any format — HEX, rgb(), hsl(), hwb(), lab(), lch(), oklch(), color(display-p3 …), or an English name — and get eleven other formats at once, with each one copied in a separate click. You also get OKLCH sliders, sRGB, P3, and Rec2020 gamut, contrast against any background using WCAG and APCA, a ready-made shade scale from 50–950, and previews of how the color looks with three types of color blindness. Nothing is sent to the server.
The format is detected automatically by the hash sign, function name, or color name. The sliders adjust the same color shown in the field.
The color is evaluated as text against the selected background. A semitransparent color is first composited with the background — the result is what appears on screen.
Large text, 24 px bold
Normal text, 16 px. Under WCAG, large text is 18 pt or larger, which is 24 px, and bold text is 14 pt or larger, which is about 18.7 px.
Small caption, 13 px — it's always normal text; threshold 4.5.
Contrast against background
—:1
WCAG 2 answers “pass or fail,” while APCA answers “how readable”: Lc 60 roughly corresponds to normal text, Lc 45 to large text, and Lc 90 to small text.
Eleven steps from your color: the hue stays the same, while lightness follows the OKLCH scale. Clicking a step copies its HEX value to the clipboard.
Here, the scale is an add-on to the color. If you need the scale itself—with each step explained, its contrast, and format selection—see the separate color scale generator. Color scale generator.
Recalculated using the Brettel–Viénot–Mollon model: this shows how the color appears to an eye missing one of the three types of cones.
If two swatches next to each other become identical, that means you cannot distinguish interface states using this color alone: you also need an icon, label, or different lightness.
Paste the color as is: #3366CC, 3366CC without the hash, rgb(51 102 204), rgba(51,102,204,.5), hsl(220 60% 50%), hwb(220 20% 20%), lab(45 8 -55), lch(45 56 278), oklch(53.25% 0.1679 262.29), color(display-p3 .2 .4 .8), or an English name such as steelblue.
Click any value on the right—it will be copied to the clipboard in full, exactly as it is inserted into code. The “Copy all formats” button copies the entire list at once.
Adjust the color with the OKLCH sliders: lightness, chroma, hue, and transparency. On the chroma track, gray marks the range that is outside sRGB at this lightness—moving farther is pointless if the color is intended for a standard display.
The gamut line shows where the color fits: sRGB, P3 only, or Rec2020 only. If it is wider than sRGB, a fallback value is printed beside it—the same hue and lightness, but with chroma reduced to the sRGB limit.
In the contrast section, enter your page's actual background instead of white. It also calculates APCA Lc, which is more accurate for dark themes and thin text than the WCAG ratio.
The result link lives in the address bar: the color is added automatically, and the “Copy link” button copies the full address. The last twelve colors remain in a strip below the field—they are stored in the browser and go nowhere.
HEX ⇄ RGB ⇄ HSL ⇄ HWB ⇄ HSV — arithmetic. RGB → XYZ → LAB, LCH. RGB → LMS → OKLab → OKLCH
HSL and OKLCH answer different questions. In HSL, yellow and blue can both have 50% lightness, even though yellow looks noticeably lighter. In OKLCH, the same L means the same perceived lightness, which makes it useful for building color scales and for finding the nearest CSS name.
The input data is the same as the default field values: you can calculate it mentally and confirm that the tool is telling the truth.
Split it into pairs of digits: 33 = 51, 66 = 102, CC = 204. That gives rgb(51, 102, 204).
The brightest channel is 204 and the darkest is 51. HSL lightness is their average: (204 + 51) ÷ 2 = 127.5, exactly half of 255.
Saturation: the range is 204 − 51 = 153; divide by 255 to get 60%.
The maximum is the blue channel, so the hue is calculated from 240°: 240 + 60 × (51 − 102) ÷ 153 = 240 − 20 = 220°.
HWB uses the same extreme channels differently: the color contains 51 ÷ 255 = 20% white and 1 − 204 ÷ 255 = 20% black. The hue remains 220°.
HSL: hsl(220, 60%, 50%). HWB: hwb(220 20% 20%). The same color in OKLCH is oklch(53.25% 0.1679 262.29). The route there runs through XYZ and OKLab and cannot be calculated mentally, but 53% lightness there means the true perceptual midpoint—unlike 50% in HSL. The nearest CSS name is royalblue; the OKLab difference is noticeable: names are spaced far apart, so an exact match is uncommon.
Because these are different quantities. In HSL, lightness is the average of the brightest and darkest channels—pure arithmetic on numbers. In OKLCH, lightness is designed to match what the eye sees. These two numbers differ most for blue colors.
A color that is brighter or more saturated than a standard sRGB display can show. Display P3 is the gamut of modern Apple displays and some laptops; Rec2020 is a gamut that production displays have not yet reached. You can write such a color in CSS with color(display-p3 …) or oklch(). On a compatible display, it appears as is; on a standard display, the browser maps it to sRGB automatically. The tool prints a ready fallback value so you can place it alongside the original in @supports or simply use it instead.
Because an accurate conversion to CMYK requires a print profile: the same set of four numbers produces different colors on offset presses, digital presses, and newsprint. This tool uses a simple profile-free formula—it is useful for an estimate, but not for sending to a print shop. For print, take the color from an ink swatch book, not a converter.
Nothing is lost: the color remains unchanged, while the HEX, RGB, HSL, HWB, HSV, and CMYK strings show its sRGB fallback—with the same lightness and hue, but with saturation reduced to the gamut boundary. This is stated in the status line, so you cannot confuse the original color with its fallback.
WCAG 2 calculates a luminance ratio and answers “passes” or “fails.” It is equally strict with light text on a dark background and dark text on a light background, even though the eye reads these cases differently, and it barely accounts for font weight. APCA calculates contrast based on perception, distinguishes normal and reverse polarity, and gives an Lc value from −108 to 106. As a guide: Lc 90 for small text, Lc 60 for regular text, Lc 45 for large text, and Lc 30 as the distinction threshold for non-text elements. APCA is still a draft for WCAG 3, so formal accessibility checks still use WCAG 2—that is why both values are shown side by side.
It is a model, not a diagnosis. The Brettel–Vienot–Mollon matrices model the complete absence of one type of cone cell—the severe case. Reduced color perception is much more common: colors do not merge completely, but are harder to distinguish. Read the samples this way: if two of your colors become identical under any of the three models, do not rely on them to convey meaning without a second cue.
All 148 keywords are parsed once at load time by the browser itself through canvas, converted to OKLab, and the one with the smallest Euclidean distance is selected. The ΔE difference is the OKLab distance multiplied by 100 so it can be read as a number. Below one, the colors cannot be distinguished by eye; around two or three, the difference is visible in a large solid area; above five, it is simply a neighboring color, not the same one.
Nowhere. All conversions run in the browser, and the page makes no network requests after loading. The color appears only in the address bar—so you can share the link—and in the browser's memory, where the last twelve colors are stored. You can clear them with the button at the end of this strip.
Calculates the contrast of a color pair and shows whether it passes AA and AAA.
Open
Reduces the file size of JPEG, PNG, and WebP—the file is never uploaded.
Open