Color Picker
Pick a color, set its opacity and copy it in any CSS format: HEX, RGB, RGBA, HSL, HSLA, OKLCH or LAB. Paste any CSS color to convert it to all the others, check WCAG contrast with white and black text, pick a color from your screen, and turn it into a full shade scale.
Color formats explained
- HEX
- Six hexadecimal digits for red, green and blue, like #3B82F6. Add two more digits for opacity (#3B82F680 is 50%). The most common way to write a color in CSS and design tools.
- RGB and RGBA
- Red, green and blue channels from 0 to 255, like rgb(59, 130, 246). RGBA adds an alpha channel from 0 (transparent) to 1 (opaque): rgba(59, 130, 246, 0.5).
- HSL and HSLA
- Hue in degrees, then saturation and lightness as percentages, like hsl(217, 91%, 60%). Easier to tweak by hand than RGB: change the hue to get a new color with the same feel.
- OKLCH
- Perceptual lightness, chroma and hue, like oklch(62.31% 0.188 259.81). Equal steps in lightness look equal to the eye, which makes OKLCH the best format for building shade scales and themes. Supported in every modern browser and used by Tailwind CSS v4.
- LAB
- CIE Lab: lightness plus two color axes, a (green to red) and b (blue to yellow), like lab(54.62% 8.77 -65.79). Device-independent and used for color matching and print workflows.
Color converters
- HEX to RGB
- HEX to HSL
- HEX to OKLCH
- HEX to LAB
- RGB to HEX
- RGB to HSL
- RGB to OKLCH
- RGB to LAB
- HSL to HEX
- HSL to RGB
- HSL to OKLCH
- HSL to LAB
- OKLCH to HEX
- OKLCH to RGB
- OKLCH to HSL
- OKLCH to LAB
- LAB to HEX
- LAB to RGB
- LAB to HSL
- LAB to OKLCH
Need every format at once? Use the color picker. To turn one color into a full scale, try the shades generator.