Outils couleur
These colour tools convert, compare and generate colours in your browser using the actual colour-science formulas rather than approximations: sRGB's real transfer function, WCAG 2.x relative luminance, OKLab for anything perceptual, and the Machado matrices for colour-vision deficiency. Nothing is sent anywhere, and every number shown can be checked by hand.
Choisir
Valider
Convertir
Convertir des couleurs
HEX, RGB, HSL, HSV, OKLCH et CMYK dans les deux sens à la fois
Ouvrir l’outilConvertir HEX en RGB
Transforme une couleur hex en rgb(), canal alpha compris
Ouvrir l’outilConvertir RGB en HEX
Transforme des valeurs rgb() en hex à 3, 6 ou 8 chiffres
Ouvrir l’outilConvertir HEX en HSL
Transforme une couleur hex en teinte, saturation et luminosité
Ouvrir l’outilConvertir HSL en HEX
Transforme teinte, saturation et luminosité en couleur hex
Ouvrir l’outilConvertir RGB en HSL
Transforme des valeurs rgb() en teinte, saturation et luminosité
Ouvrir l’outil
Le guide ci-dessous n’est disponible qu’en anglais.
When should you use a browser-based color tool?
Colour tools have an unusual failure mode. A PDF tool that is broken produces a broken PDF and you find out immediately. A colour tool that is quietly wrong produces a plausible number, you paste it into a stylesheet, and nothing tells you — not the browser, not the build, not the review — until someone with lower vision cannot read your button, or the brand blue on the printed brochure arrives a shade off.
The errors are specific and they repeat. Raising a channel to the power of 2.2 instead of using sRGB's actual piecewise transfer function, which shifts every contrast ratio slightly and flips the borderline ones. Skipping the modulo in the hue formula, so a sixth of the colour space reports a negative angle. Compositing a semi-transparent foreground on nothing at all and reporting a contrast ratio for a colour that never appears on screen. Generating a palette by stepping HSL lightness. Every one of those produces output that looks entirely reasonable.
So the arithmetic here is written to the specifications rather than to the approximations that circulate. Contrast is WCAG 2.x relative luminance with the piecewise function, computed after alpha is composited against the real background. Anything perceptual — scales, mixing, gradients, nearest-passing-colour — runs in OKLab, which is the 2020 revision of the Lab idea that finally fixed the blue-hue drift older spaces had. Colour-blindness simulation uses the Machado, Oliveira and Fernandes matrices applied to linear RGB, not to the gamma-encoded values, which is the difference between a simulation and a colour wash.
The tools also refuse to guess. A five-digit hex is a typo, not a colour, and it is rejected rather than padded into something plausible; a converter that silently returns black on a bad input hands you a swatch you have no reason to doubt. Where a conversion genuinely cannot be exact — CMYK without a press profile, an OKLCH coordinate outside the sRGB gamut — the page says so instead of printing the number with the same confidence as the exact ones.
None of it needs a server. Colour conversion is a few dozen lines of arithmetic on three numbers; an image simulation is a loop over a canvas your browser already has. The site's Content-Security-Policy sets connect-src 'self', so a brand palette or an unreleased screenshot dropped into the simulator cannot leave the tab even if something here tried to send it.
Where to start: Color Picker for a colour and its whole ramp, Contrast Checker when a pair has to pass AA, Color Converter to move between formats, Color Codes to look up a named colour's hex, and Color Blindness Test to see what your interface looks like to the roughly one man in twelve who does not see red and green the way you do.
Frequently asked questions
Which colour format should I actually use in CSS?
Hex for a value you type once and never touch again — it is compact, universally understood and lossless. HSL when a human is going to edit it by hand, because 'a bit darker' and 'less saturated' are single-number changes there. OKLCH when a program computes the colour: a generated scale, a gradient, an interpolated hover state. OKLCH is the only one of the three whose lightness number matches what the eye reports, so evenly spaced numbers come out looking evenly spaced.
Why do two tools give me different HSL values for the same hex?
Almost always rounding rather than disagreement. HSL as normally written — a whole-number hue and a tenth of a percent — holds fewer distinct values than the 16.7 million a hex can express, so several hex values collapse onto the same HSL and the conversion back lands on whichever the formula produces. Where tools genuinely differ is in how they report a grey: the hue of a colour with zero chroma is undefined, and some print 0 while others print whatever the arithmetic produced.
Is the contrast ratio here the same one Lighthouse uses?
Yes. It is the WCAG 2.x formula: linearise each channel with the sRGB piecewise transfer function, weight them 0.2126, 0.7152 and 0.0722, add 0.05 to both luminances and divide the larger by the smaller. The most common mistake in a home-made implementation is raising the channels to the power of 2.2 instead — close, but it shifts the ratio enough to flip a borderline pair from pass to fail. The APCA figure shown alongside is a different model entirely and is informative, not a standard you can claim conformance against.
Can I trust CMYK numbers from a web tool for print?
As a starting point, not as a specification. CMYK is device-dependent: the same sRGB colour becomes different ink percentages on coated stock than on uncoated, and different again on a different press with different inks. That is what an ICC profile encodes, and no web page has one for your printer. Send the printer the sRGB or Pantone reference and let them convert with the profile for the job.
How accurate is an online colour blindness test?
It is a screening indication, not a diagnosis. A clinical result comes from an anomaloscope under controlled lighting on a calibrated display, and none of those conditions hold on your desk. What an online test can do honestly is tell you whether you read the same figures as someone with typical colour vision, which is enough to be worth following up on. The plates here are generated from confusion pairs found by simulation rather than scanned from a copyrighted plate set, which removes the single largest error source in the usual online version: a JPEG of a 1917 print, recompressed, at whatever colour accuracy the scanner had.
Why do the tints and shades here look more even than the ones I get elsewhere?
Because they are generated in OKLCh rather than by stepping HSL lightness. HSL weights all three channels equally when human vision weights green roughly ten times more than blue, so a ramp built on it looks light in the yellows and dark in the blues at identical numbers. Stepping OKLCh lightness on a curve, holding hue, and tapering chroma at both ends produces steps that look as even as they measure — and every stop is clamped back into the sRGB gamut, so none of them render as a flat clipped colour.
What else is on ToolsByUs?
- PDF ToolsMerge, split, rotate and convert PDFs without uploading them.
- Image ToolsCompress, resize and convert images in the browser.
- Creator ToolsResize and optimize banners, avatars, emotes and covers for every platform.
- JSON ToolsCompare, format, validate and explore JSON documents.
- Text ToolsDiff, convert and reshape plain text and code.
- Encoding ToolsBase64, URL encoding, hashing and token inspection.
- Generator ToolsIdentifiers, placeholder content and codes.