HEX, RGB and HSL are the same color written three ways
They describe identical pixels. The difference is what each one makes easy, and picking the right one saves a surprising amount of fiddling.
HEX — #4F46E5 — is three pairs of hexadecimal digits for red, green and blue. It is compact and it is what most design tools hand you, which is why it dominates CSS. It is also the least readable: nothing about #4F46E5 tells you it is a violet-blue.
RGB — rgb(79, 70, 229) — is the same three channels in plain decimal, 0 to 255. Easier to reason about programmatically, and the form you want when a value is being calculated rather than typed.
HSL — hsl(243, 75%, 59%) — splits color into hue, saturation and lightness. This is the one worth learning. Want the same color but darker? Drop the lightness. Want a matching accent? Move the hue and leave the rest alone. Doing either in HEX means changing all three pairs and hoping.
Contrast is not a matter of taste
The contrast panel compares your color against white and black and gives a ratio between 1 and 21. Those thresholds come from the Web Content Accessibility Guidelines, and they are not arbitrary — they are the point at which text stops being readable for people with moderately low vision.
| Ratio | Meaning |
|---|
| 4.5:1 | AA for body text. The practical floor for anything people have to read. |
| 3:1 | AA for large text — roughly 24px, or 19px bold — and for icons and form borders. |
| 7:1 | AAA for body text. Worth aiming at for long-form reading. |
The trap is brand colors. A mid-tone blue or green that looks perfectly clear to you on a good monitor often lands around 3:1, which fails for body text. That is why the panel shows the number rather than only a pass or fail — when you miss, you can see whether you need a small adjustment or a different color entirely.
One thing this check cannot do is judge your color against a photograph or a gradient. Contrast is only defined between two flat colors. Text over an image needs a scrim or a solid panel behind it, not a ratio.
Tints, shades and why a palette needs them
A tint is your color mixed towards white; a shade is the same mixed towards black. Almost every interface needs both — a hover state, a pressed state, a subtle background wash, a border that reads as the same color but quieter.
Generating them from one base rather than choosing each by eye keeps the set coherent. If you are building properly, put the base in a CSS custom property and derive the rest, so changing the brand color later is one edit instead of forty.
Picking a color off your screen
If your browser supports it, the Pick from screen button appears and lets you sample any pixel on your display — a logo, a screenshot, a photograph. This uses the browser’s own EyeDropper API, so the permission prompt and the sampling are handled by the browser rather than by this page. It is available in Chrome, Edge and Opera; Firefox and Safari have not shipped it, and the button simply does not appear there.
Questions people ask
Why does my color look different on my phone?
Because screens differ in calibration, color gamut and brightness, and most phones apply their own adjustments on top. A HEX value is an instruction, not a guarantee. If exact reproduction matters — print, packaging, brand work — you need a color-managed workflow, not a browser tool.
What is the fourth pair in an eight-digit HEX?
Alpha, meaning opacity. #4F46E580 is that color at roughly 50%. This tool reads eight-digit values and ignores the alpha, because contrast and harmony only make sense for the solid color.
Are HSL and HSB the same thing?
No, and mixing them up is a common source of confusion. HSL’s third value is lightness, where 100% is always white. HSB — sometimes called HSV, and what Photoshop shows — uses brightness, where 100% is the most vivid version of the hue. CSS uses HSL.
Is anything sent anywhere?
No. Every conversion here is arithmetic done in your browser. There is no request from this tool at any point — you can watch the network tab while you use it. The site’s theme loads its web fonts from Google on every page, as most WordPress themes do, and that is separate from this tool.