Colorpicker
Select, sample, convert, compare, and export precise colors without leaving the browser.
Open the picker
01 / Workbench
Find the exact color.
02 / Palette
Color harmony
03 / Session
Recent colors
04 / Accessibility
Contrast checker
Contrast ratio
5.44:1
#6C42FF
#FFFFFF
#6C42FFrgb(108, 66, 255)hsl(253 100% 63%)hsv(253 74% 100%)cmyk(58% 74% 0% 0%)
One color / many systems
Values that travel.
Copy the notation your next tool expects or export the active palette as CSS and JSON. Conversion and downloads stay in this browser.
One color, every value
Change the model.
Keep the color.
Pick a color once, then read the matching HEX, RGB, HSL, HSV, and CMYK values without rebuilding it by hand. The screen formats stay synchronized to one sRGB result.
How to use it
How to use the online color picker
Start from a visual choice, a known code, your screen, or an image. The same workflow handles selection, conversion, palette building, and contrast review.
01
Choose a source
Pick visually, enter an exact value, use the browser eyedropper, or open a local image and select a pixel.
02
Refine the color
Adjust hue, saturation, and value or edit any supported numeric field. Every color model updates from the same sRGB color.
03
Check the result
Compare foreground and background colors before using them for text. A pleasant palette does not guarantee readable contrast.
04
Copy or export
Copy the notation your project needs, save useful swatches, or download the active palette as CSS custom properties or JSON.
Color formats
HEX, RGB, HSL, HSV, and CMYK explained
Choose a notation for the destination, not because one code is inherently more accurate. HEX, RGB, and HSL can represent the same sRGB color in different forms.
HEX
#6C42FFCompact sRGB notation for CSS, design tokens, and handoff documents.
Each pair represents red, green, and blue on a 00–FF scale.
RGB
rgb(108 66 255)Direct red, green, and blue channel control for screens and code.
The usual 8-bit channel range is 0–255.
HSL
hsl(253 100% 63%)Convenient for adjusting hue, saturation, and lightness in CSS.
HSL is an sRGB notation, not a wider or perceptually uniform color space.
HSV
hsv(253 74% 100%)Useful for visual picker interfaces where value controls the brightest channel.
HSV is common in design software but is not a standard CSS color function.
CMYK
cmyk(58% 74% 0% 0%)A rough planning estimate when a print workflow expects ink percentages.
Production conversion requires the printer, paper, ink, and ICC profile.
Practical guidance
Read color values with the right expectations
01
Image sampling reads a displayed pixel
A screenshot or photo may contain antialiasing, compression, transparency, gradients, and color-profile adjustments. Sample several nearby pixels when matching an edge or small text.
02
Harmony is not the same as accessibility
Complementary, analogous, and triadic palettes describe hue relationships. Test the actual foreground and background pair because contrast depends on relative luminance.
03
WCAG ratios are thresholds
WCAG 2.2 Level AA requires at least 4.5:1 for normal text and 3:1 for large text. Level AAA uses 7:1 and 4.5:1. Do not round a failing value up to the threshold.
04
Screen and print values are not interchangeable
HEX, RGB, HSL, and HSV in this tool resolve to sRGB. CMYK output is a generic mathematical estimate, not a press proof or profile-managed separation.
Technical references: CSS Color Module Level 4, WCAG contrast minimum, and MDN EyeDropper API.
Color picker FAQ
Common questions, direct answers
Can I pick a color from an image?
Yes. Choose Sample an image, open a file, and click the pixel you want. The selected color is available as HEX, RGB, HSL, HSV, and an estimated CMYK value.
Does an uploaded image leave my device?
No. The browser decodes and samples the image in the current tab. The file is not sent to an Olivez server.
Why is the screen eyedropper unavailable?
The native EyeDropper API has limited browser support and requires a secure context. You can still use the visual picker, exact fields, and local image sampling.
Is HEX more accurate than RGB?
No. Six-digit HEX and 8-bit RGB can describe the same sRGB color exactly. They are different notations for the same three channel values.
Should I use HSL or HSV?
Use HSL when you want a CSS-ready notation and intuitive lightness changes. HSV is often more convenient inside visual color pickers because value tracks the brightest RGB channel.
Are the CMYK values ready for print?
No. They are generic estimates. Reliable print conversion must use the ICC profile and production conditions supplied by the printer.
What contrast ratio should body text have?
WCAG Level AA requires at least 4.5:1 for normal text. Large text may use 3:1. Aim above the threshold when possible rather than designing to the exact minimum.
Choose a color visually or enter exact values.