What do the contrast ratios mean?

They measure text readability using the WCAG 2.x formula, from 1:1 (no contrast) to 21:1 (maximum). A ratio of 4.5:1 or higher meets the AA standard for normal text.

Can I type colors in different formats?

Yes. Type a hex code (#7C3AED or #7CE), an RGB value (rgb(124, 58, 237) or 124, 58, 237), or an HSL value, the picker and all other fields update instantly.

Are my picked colors saved anywhere?

Your recent colors are kept in a small on-page history (the last 8 picks) while the tab is open. Nothing is stored in your browser or sent to any server.

Color Picker

Pick colors and convert HEX, RGB and HSL instantly

Pick a color

Text on whiteText on black

Contrast vs white

5.70:1

Contrast vs black

3.69:1

AA (large text)

Color values

Edit any format, the picker, swatch, and other values update instantly. Click Copy to copy a value to your clipboard.

HEX

RGB

HSL

Contrast ratios follow the WCAG 2.x formula. Everything runs in your browser, no color data is sent or stored anywhere.

About this tool

Getting the exact color you need for a design or stylesheet starts with a good picker. JoliTools' free color picker combines a large visual color well with editable HEX, RGB and HSL fields that stay in sync, change any one of them and the rest update instantly, with a big swatch preview so you can see the color at a glance.

Developers will appreciate the one-click copy buttons next to each format, ready to drop straight into CSS, a Tailwind config or a design tool, plus a recent-colors history that remembers your last eight picks for the session. Input is flexible: short and long hex codes, rgb() notation or bare values, and the same for HSL.

How to use the color picker

1Click the color well to pick a color, or type a value into any format field.
2Edit the HEX, RGB or HSL fields directly, the picker, swatch and other values update instantly.
3Click Copy next to any format to copy the value to your clipboard.
4Check the contrast ratios against white and black for WCAG readability guidance.
5Click any recent color to reuse it.

Good to know

Accessibility matters too, so every color you pick gets a WCAG 2.x contrast ratio calculated against both white and black, with the AA or AAA rating shown next to it. That makes it quick to check whether your chosen color will keep body text readable before you commit to it in a design.