Color Picker

About This Color Picker

This free color picker converts any chosen color to HEX, RGB, HSL, and HSB formats instantly. Use it whenever you need color codes for CSS, design tools, or presentations. Click the color swatch to open the native color picker, or tap any preset below.

HEX codes are used in HTML/CSS. RGB values define red, green, and blue intensity (0–255 each). HSL (Hue, Saturation, Lightness) is more intuitive for designers. HSB (Hue, Saturation, Brightness) is used in tools like Photoshop and Illustrator.

Worked Example: Reading a HEX Code

Take #2563EB (this site's blue). Split it into three pairs: 25, 63, EB. Each pair is a hexadecimal (base-16) number from 00 to FF (0–255 in decimal). 25 in hex = 37 decimal (red), 63 in hex = 99 decimal (green), EB in hex = 235 decimal (blue). So #2563EB = rgb(37, 99, 235) — a low amount of red and green with a high amount of blue, producing a strong, saturated blue.

Choosing Accessible Color Combinations

Text color and background color need enough contrast to be readable, especially for users with low vision. WCAG 2.1 recommends a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (AA level). Pure black on white (#000000 on #FFFFFF) has the maximum ratio of 21:1; light gray on white often fails the minimum. Once you've picked a color here, check it against your background with the color contrast checker before using it for body text.