Color Picker
Pick a color and inspect HEX, RGB, HSL and alpha formats. Build a palette, compare text/background contrast, and copy the values you need.
Pick a color and inspect HEX, RGB, HSL and alpha formats. Build a palette, compare text/background contrast, and copy the values you need.
- Prepare your input
Choose the relevant options using the controls below.
- Run your task
Adjust the controls below and inspect the preview.
- Use the result
Check the result, then use the available copy or download controls.
#3b82f6
Color formats
Color harmony
Color Picker
Choose a color for a CSS rule and inspect its numeric representations. For example, opaque red is #ff0000 or rgb(255, 0, 0); RGBA and HSLA outputs also include the selected alpha value. Use the palette and history to compare related choices before copying a format.
The contrast panel compares the selected color with your test text color and shows thresholds for ordinary text. A passing pair is not an accessibility audit of an entire page. Contrast calculations use the opaque RGB pair, so verify actual composited colors separately when using transparency. The CMYK value is a mathematical conversion from RGB, not a color-managed print proof with an ICC profile.
Features
- Inspect HEX, RGB/RGBA and HSL/HSLA color values.
- Generate related palette colors and review color history.
- Compare a text/background pair with the contrast indicator.
- Copy color values or export the palette using available formats.
How to use
- Choose a color or enter its supported numeric value. Try #ff0000 for red.
- Adjust hue, saturation, lightness or alpha and inspect the available representations.
- Set the test text color and review the contrast result; check transparent combinations in their actual background.
- Copy the needed CSS value or export a palette. For printing, use a color-managed workflow rather than treating the CMYK estimate as a proof.