Color Picker Online
Choose a color visually, pick an exact pixel from an image, or sample your screen where supported. Copy HEX, RGB, HSL, and HSV codes, check contrast, and export CSS or JSON palettes.
Choose a color
Checking screen-picker support…
Color harmony
Recent colors
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%)How to use the color picker
Choose a color from the visual picker, enter a HEX code, or edit its RGB, HSL, or HSV values. The color preview and copyable codes update together.
- 01
Select a color
Drag within the color field, adjust the hue, or enter a known color code.
- 02
Get its color codes
Copy HEX, RGB, HSL, HSV, or estimated CMYK values for your project.
- 03
Check or export
Compare contrast, explore matching colors, or download a CSS or JSON palette.
Pick a color from an image or your screen
To use the image color picker, open an image, drag one onto the workbench, or paste it from the clipboard. Point to a pixel to inspect its color, then select it to make that color active.
For precise selection, use the 1×, 2×, or 4× inspection view, the pixel magnifier, and X/Y coordinates. You can also move the target by one source pixel with the arrow keys and select it with Enter or Space. The sampled value comes from the browser-decoded image, not a resized preview pixel.
The Pick from screen option can sample a visible color outside this page when your browser supports theEyeDropper API. Otherwise, use an image or screenshot.
HEX, RGB, HSL, HSV, and CMYK explained
HEX, RGB, HSL, and HSV describe the selected screen color in different ways. For example,#6C42FFand rgb(108, 66, 255) describe the same RGB color. Values can vary slightly after conversion because the editable fields use rounded numbers.
| Format | Example | When it is useful |
|---|---|---|
| HEX | #6C42FF | A compact color code commonly used in CSS and design tools. |
| RGB | rgb(108, 66, 255) | Red, green, and blue channels, each ranging from 0 to 255. |
| HSL | hsl(253 100% 63%) | Hue, saturation, and lightness; useful for adjusting colors in CSS. |
| HSV | hsv(253 74% 100%) | Hue, saturation, and value; commonly used in visual color pickers. |
| CMYK | cmyk(58% 74% 0% 0%) | An approximate ink-color conversion, not a print-ready profile. |
CMYK is a mathematical estimate only. The picker does not perform ICC-profile-based print conversion or support alpha transparency and wide-gamut color formats such as Display P3 or OKLCH.
Check color contrast and create a palette
Compare two colors to check the contrast of text against its background.WCAG Level AArequires at least 4.5:1 for normal text and 3:1 for large text. Level AAA requires 7:1 and 4.5:1 respectively. The picker checks these thresholds using the unrounded ratio.
For a color scheme, select complementary, analogous, triadic, or split-complementary harmony. You can choose a suggested color or download the palette as CSS variables or JSON. A harmonious palette is not necessarily accessible: check the contrast of the actual foreground and background colors you plan to use.
Frequently asked questions
Can I pick a color from an image without uploading it?
Yes. Open, drop, or paste an image. Olivez reads its pixels in your browser without sending the image to an Olivez processing server. The browser must support the image format.
Why can't I pick a color directly from my screen?
The screen eyedropper depends on your browser's EyeDropper API. It is not supported everywhere. You can still use the visual picker or open a screenshot as an image.
Does the color picker support transparency?
No. The current picker works with opaque colors. It accepts three- or six-digit HEX codes and does not expose an image pixel's alpha channel.
Can it automatically extract a palette from an image?
No. You select individual image pixels. The palette generator creates color harmonies from the selected color; it does not identify an image's dominant colors.
Can I use the CMYK values for professional printing?
Treat them as estimates. Accurate print conversion depends on the printer, ink, paper, and ICC color profile used by the print provider.
What can I download?
You can export the current harmony palette as CSS custom properties or JSON. The exports do not include the image you opened.
Choose a color visually or enter exact values.