Color Picker Tool
Color picker
Pick from the spectrum, screen, or a local image. Get alpha-aware CSS and color models instantly.
Selected color
#8b5cf6
rgb(139 92 246)
Live
RGBA
Drop or paste an image up to 12 MB. It stays in this browser.Upload, drop, or paste a supported image up to 12 MB. Image processing stays in this browser.
FormatsCopy-ready formats
Alpha-aware CSS output.Modern CSS syntax with synchronized opacity.
HEX
#8b5cf6HEX + alpha
#8b5cf6ffCSS RGB
rgb(139 92 246)CSS HSL
hsl(258.3 89.5% 66.3%)Palette, contrast, HSV & CMYKShowHide
HSV
hsv(258.3, 62.6%, 96.5%)CMYK approximation
cmyk(43.5%, 62.6%, 0%, 3.5%)Opaque contrast snapshot
Alpha colors must be checked again on their final background.
On white
4.23:1
Pass AA for large text only
On black
4.96:1
Pass AA for normal text
Harmony, shades & tints
Tap a swatch to make it the selected color.
CMYK is a mathematical approximation from sRGB, not a printer-profile conversion or press proof.
Formula
One sRGB color can be represented as HEX Symbol legend
| Symbol | Meaning | Unit | Copy |
|---|---|---|---|
Hex | Hexadecimal sRGB color notation | #RRGGBB or #RRGGBBAA | |
RGB | Red Green Blue channels | 0 to 255 | |
HSL | Hue Saturation Lightness | degrees and percent | |
\alpha | Opacity channel | 0 to 1 or 0% to 100% |
- Choose a color manually or sample a pixel from a local image or supported screen eyedropper.
- Normalize the selected sRGB channels and optional alpha value.
- Generate synchronized, copy-ready CSS and color-model representations.
Example
Worked example: translucent violet
- 1 Enter #8b5cf680
- 2 The tool reads the final 80 hex alpha byte as about 50.2% opacity
- 3 Copy #8b5cf680 or rgb(139 92 246 / 50.2%)
You get matching HEX8, RGB, HSL, HSV, and approximate CMYK values.
How
- Use the spectrum, enter a 3/4/6/8-digit hex value, or pick from a local image.
- Adjust opacity and review synchronized HEX, CSS RGB, and CSS HSL output.
- Copy one format or all models; open the advanced section for palette and contrast details.
Avoid
- Treating alpha transparency as part of the opaque base color.
- Using an approximate CMYK conversion as a printer-profile press proof.
- Checking contrast before compositing a transparent color on its final background.
FAQ
Can I type hex manually?
Yes. The input accepts 3, 4, 6, or 8 hexadecimal digits, including alpha-aware #RGBA and #RRGGBBAA.
Can I pick a color from an image?
Yes. Upload, drop, or paste a supported image and tap a pixel. The image stays in your browser.
Why is screen eyedropper not always shown?
The browser EyeDropper API has limited support and requires a secure context, so the button appears only where the feature is available.
Switch
Switch12
No match.