What's the difference between HEX and RGB?

They represent the exact same color information — HEX is a six-digit hexadecimal shorthand, while RGB writes the same red, green, and blue values as three decimal numbers from 0 to 255.

Why would I use HSL instead of HEX?

HSL separates hue, saturation, and lightness, so you can lighten or darken a color by changing one number while the hue stays the same — much easier than recalculating HEX or RGB values by hand.

What contrast ratio do I need for accessible text?

WCAG AA guidelines require at least a 4.5:1 contrast ratio between text and background for normal-size text, and 3:1 for large text (18pt or 14pt bold and above).

Color Picker & Palette Generator

Pick a color, get HEX/RGB/HSL values, generate palettes, and check WCAG contrast ratios.

HEX

RGB

HSL

Contrast Checker

Export Palette

How to use

Click the color swatch to open the color picker, or type a HEX value directly.
HEX, RGB, and HSL values update in real time — copy any with the Copy button.
Click the dice button for a random color.
Choose a palette type to generate harmonious color combinations.
Click any palette swatch to set it as your active color.
The contrast checker shows WCAG AA/AAA pass/fail for white and black text.
Export your palette as CSS custom properties or JSON.

About this Color Picker

Digital color is described in several interchangeable formats, and different tools expect different ones — a CSS stylesheet wants HEX or RGB, a design tool might display HSL, and a print shop wants CMYK. This tool converts between them and helps you pick shades and build palettes.

The formats explained

HEX (#3B82F6) — a six-digit hexadecimal code representing red, green, and blue in pairs; the standard for CSS and web design
RGB (rgb(59, 130, 246)) — the same red/green/blue values written as three numbers from 0–255
HSL (hsl(217, 91%, 60%)) — hue (position on the color wheel, 0–360°), saturation, and lightness; more intuitive for adjusting a color while keeping its hue

Why HSL is easier for adjusting shades

To make a HEX or RGB color lighter or darker, you have to recalculate all three channels. In HSL, you only change the lightness percentage — the hue and saturation stay fixed, so the color family stays consistent while you move from a pale tint to a deep shade.

Contrast and accessibility

WCAG accessibility guidelines require a contrast ratio of at least 4.5:1 between text and its background for normal-size text (3:1 for large text) to remain readable for users with low vision. Picking colors without checking contrast is one of the most common accessibility failures on the web.