Two ways to choose a colour
The <input type="color"> swatch opens your operating system's colour panel, which is best for grabbing something from a screenshot or an eyedropper. The HSL sliders are better for deliberate adjustment: hue picks the family, saturation controls how vivid it is, and lightness controls how close it sits to white or black. Both feed the same internal value, so nothing drifts out of sync.
The colour contrast checker covers the same ground with a different mechanism.
Reading the three notations
Hex is the storage format most style guides use. RGB is what you need for transparency via rgba() and for canvas or native mobile code. HSL is the one you should think in while designing, because a single number changes lightness without disturbing the hue. If you need to convert a value you found elsewhere, the hex to RGB converter handles it directly.
The RGB to HSL converter handles the same job in a slightly different way.
Practical picking tips
Keep body-text colours below roughly 45% lightness on light backgrounds, and avoid 100% saturation for large surfaces — it vibrates on screen. When you have found the colour you want, expand it into a usable set with the palette generator.
For text on white aim for a colour dark enough to clear 4.5:1 at AA, or 7:1 if you are targeting AAA; a saturated blue around 45% lightness normally clears both, while the same hue at 70% will not.
Frequently asked questions
- Do the sliders and the swatch stay in sync?
- Yes. Changing either the native colour input or any HSL slider immediately updates the other and all three readouts.
- Which value should I copy?
- Hex for CSS and design tokens, RGB when you need an alpha channel, HSL when you plan to build a lightness ramp.
- Why does the hex change slightly when I drag a slider back?
- Hex has only 256 steps per channel, so rounding can shift a value by one when you convert back and forth.
- Does it work on mobile?
- Yes. The colour input opens the system picker and the sliders are touch friendly.
- Can I pick a colour with an alpha channel?
- Not directly — the picker works with opaque colours only, so hex, RGB and HSL come back without transparency. Copy the RGB triple and add your own alpha, for example rgba(41, 66, 198, 0.15), when you need a translucent fill.