jsontools
Free · No signup · No tracking

Color Picker & Converter

Pick a color visually and convert between HEX, RGBA, HSLA and HSBA. Check WCAG contrast ratios.

HEX, RGB, HSL — what's the difference? →
#388ce0
HEX
RGB
HSL
HSB
Shades
Contrast checkerWCAG 2.1
19.8:1
AA Large ✓AA Normal ✓AAA Large ✓AAA Normal ✓
The quick brown fox jumps over the lazy dog.

HEX, RGBA, HSLA, HSBA: what is the difference?

Four notations for exactly the same set of colors, including transparency. Conversion between them is lossless.

HEX#RRGGBB, add two digits for alpha (#RRGGBBAA)
RGBARed, Green, Blue 0-255, alpha 0 (transparent) to 1 (opaque)
HSLAHue, Saturation, Lightness, alpha — matches human intuition
HSBAHue, Saturation, Brightness, alpha — same idea as HSLA

How does WCAG contrast work?

WCAG 2.1 defines contrast ratio as (L1+0.05)/(L2+0.05), from L1 and L2, the relative luminances of the two colors. 1:1 is identical colors, 21:1 is maximum (black on white). Only fully opaque colors are defined — the checker always uses the opaque version of your current color.

Normal AA4.5:1 — text below 18pt / 14pt bold
Normal AAA7:1
Large AA3:1 — text at or above 18pt / 14pt bold
Large AAA4.5:1

How to use the color picker

Drag inside the square to adjust saturation (left-right) and brightness (top-bottom). Drag the rainbow strip to change hue. Drag the checkerboard strip below it to set opacity: fully right is 100% opaque, fully left is fully transparent.

All format fields (HEX, RGB, HSL, HSB) update instantly and are editable; type a value with or without an alpha component and press Enter to apply. Click any shade swatch to jump to that tone. In the contrast checker, "Use current" loads the opaque version of your color as background.

Related toolsCSS Gradient GeneratorNumber Base ConverterUUID Generator
Related guidesHEX, RGB, and HSL Explained