HEX, RGB & HSL Color Converter
Type a color in any of the three formats and the others update instantly. The palette below gives you tints and shades to build a scale from, and the contrast panel tells you whether text will actually be readable on it.
Tints and shades
Contrast
Which format to use where
HEX is the compact one — six characters, universally understood, and what design tools hand you. It is fine for storing a fixed brand color. What it is bad at is being edited: nothing about #6D5EFC tells you what will happen if you want the same color slightly darker.
RGB is the same information in decimal. Its real advantage is rgba(), which adds an alpha channel for transparency — though modern CSS lets you write #6D5EFC80 for the same thing.
HSL is the one to reach for when building a design system. Hue, saturation and lightness map to how people actually describe color, which makes a whole palette derivable by hand: keep hue and saturation fixed, sweep lightness, and you have a consistent scale. That is exactly how the tints and shades above are generated.
Why HSL lightness lies a little
Two colors with the same HSL lightness rarely look equally bright. Pure yellow at 50% lightness is visibly brighter than pure blue at 50% lightness, because human vision is far more sensitive to green than to blue. HSL treats all hues as if the eye responded to them equally, and it does not.
This is what OKLCH fixes. It is a newer CSS color space built on a model of human perception, so equal lightness values genuinely look equally bright across hues. If you are building a palette from scratch today and only need to support current browsers, OKLCH will give you more even results with less hand-correction. HSL remains the pragmatic choice for broad compatibility.
Reading the contrast numbers
Contrast ratio runs from 1:1 (identical) to 21:1 (black on white). The WCAG accessibility thresholds are:
- 4.5:1 — the AA minimum for normal body text. Treat this as the floor for anything you ship.
- 3:1 — AA for large text, meaning 24px and above, or 19px and above when bold. Also the minimum for UI components and focus indicators.
- 7:1 — AAA for body text. Worth aiming for on long-form reading, and genuinely helpful for anyone with low vision.
Two things the ratio will not tell you. First, it says nothing about color blindness — red and green text can have excellent contrast against a background and still be indistinguishable from one another. Never use hue alone to carry meaning. Second, passing the threshold is a floor, not a goal: text at exactly 4.5:1 is legal and still tiring to read.
Frequently asked questions
How do I convert HEX to RGB by hand?
Split the six digits into three pairs and read each as a base-16 number. #6D5EFC gives 6D = 109, 5E = 94, FC = 252, so rgb(109, 94, 252). The tool above does it instantly, but the arithmetic is genuinely that simple.
Can I paste a 3-digit shorthand hex?
Yes. #F0C is expanded to #FF00CC automatically, the same way browsers do it. The shorthand only works when each pair has two identical digits, which is why not every color has one.
What contrast ratio do I need to pass accessibility checks?
At least 4.5:1 for normal body text and 3:1 for large text (24px, or 19px bold) to meet WCAG AA, which is the level most legal accessibility requirements reference. AAA asks for 7:1 on body text.
Should I use HSL or OKLCH?
OKLCH if you only need current browsers and are building a palette from scratch — equal lightness values actually look equally bright across hues, which HSL cannot guarantee. HSL if you need older browser support or are editing an existing palette.
Why do the tints and shades look uneven?
Because they are generated by sweeping HSL lightness, and HSL lightness does not match perceived brightness. The steps are mathematically even but visually a little lumpy around yellows and blues. Adjusting individual steps by eye is normal practice.
Last updated September 19, 2026