Colorpicker
Pick a pixel from a local image, sample the screen where supported, or enter an exact color. Inspect image pixels with source X/Y coordinates and a loupe, convert formats, check WCAG contrast, and export the active harmony as CSS or JSON.
Open the picker
01 / Workbench
Pick from an image, screen, or exact code.
Checking screen-picker support…
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 formats
Values ready to use.
Copy HEX, RGB, HSL, HSV, or estimated CMYK, then export the active harmony palette as CSS custom properties or JSON. Conversion and downloads stay in this browser.
Synchronized color formats
One color.
Five formats.
Edit HEX, RGB, HSL, HSV, and estimated CMYK from one opaque sRGB color. The values stay synchronized as you pick visually, sample an image or screen, or enter exact channels.
How to use it
Pick a color from an image or screen, then check contrast
Start visually, enter an exact color, use the screen eyedropper where supported, or open, drop, or paste a local image. Image selections include source X/Y coordinates, inspection zoom, and a source-pixel loupe before the color moves into conversion, contrast, harmony, and export.
01
Pick visually, from an image, or from the screen
Choose from the visual field, enter an exact HEX or numeric value, open a local image, drop or paste an image, or use the system eyedropper in a supporting browser. Image files stay in the current tab.
02
Inspect and refine the exact color
For images, use 1×, 2×, or 4× inspection zoom, the 11×11 source-pixel loupe, source X/Y coordinates, or arrow keys for one-pixel movement. HEX, RGB, HSL, HSV, and estimated CMYK stay synchronized.
03
Check contrast and build a harmony
Compare the active color with another HEX value using WCAG AA and AAA thresholds, then generate complementary, analogous, triadic, or split-complementary colors. Harmony does not guarantee readable contrast.
04
Copy or export CSS and JSON
Copy the notation your project needs, keep up to eight recent colors for the session, or download the active harmony as CSS custom properties or JSON. No signup is required.
Color formats
Convert HEX, RGB, HSL, HSV, and estimated CMYK
Choose the notation required by the next tool or workflow. HEX, RGB, HSL, and HSV here resolve to the same opaque sRGB color; CMYK is a separate mathematical estimate for rough print planning.
HEX
#6C42FFCompact six-digit sRGB notation for CSS, design systems, component props, and handoff.
Three-digit input is expanded to six digits. Alpha and eight-digit HEX are not supported.
RGB
rgb(108, 66, 255)Direct red, green, and blue channel values for screens, CSS, Canvas, and application code.
Each editable channel uses the common 8-bit range from 0 through 255.
HSL
hsl(253 100% 63%)Useful for CSS and controlled hue, saturation, and lightness adjustments.
HSL is derived from sRGB and is not a perceptually uniform or wider-gamut color space.
HSV
hsv(253 74% 100%)Common in visual color pickers because value tracks the brightest RGB channel.
HSV is useful in design software but is not a standard CSS color function.
CMYK
cmyk(58% 74% 0% 0%)A rough mathematical screen-to-print estimate when a workflow expects ink percentages.
Production conversion requires the intended printer, paper, inks, rendering settings, and ICC profile.
Practical guidance
Inspect source pixels, verify contrast, and export the harmony
01
Image sampling maps back to the source image
The preview may be scaled for efficient display, but pointer positions are mapped to the browser-decoded image's original dimensions. Olivez samples the corresponding 1×1 source location instead of reading a resampled preview pixel.
02
Zoom and the loupe are for inspection
The 1×, 2×, and 4× controls change only the preview's rendered inspection size. The 11×11 loupe is drawn from nearby source pixels with smoothing disabled, and X/Y reports the source coordinate being targeted.
03
WCAG thresholds must use the unrounded ratio
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. A computed 4.499:1 does not pass a 4.5:1 threshold even if a two-decimal display appears as 4.50.
04
Browser color and print color solve different problems
Browser decoding and embedded color profiles can affect the RGB represented after an image is decoded, and sampled alpha is not exposed here. CMYK is a generic estimate, not a profile-managed separation or press proof.
Technical references: CSS Color Module Level 4, WCAG 2.2 contrast minimum, MDN EyeDropper API, Canvas getImageData(), and ICC colour-management guidance.
Color picker FAQ
Image, screen, pixel, conversion, and contrast answers
The answers match the actual tool: local source-coordinate image sampling, supported screen picking, opaque sRGB conversion, four harmony modes, unrounded WCAG checks, and CSS or JSON export.
Is this color picker free to use without an account?
Yes. No payment or account is required for the visual picker, local image sampler, supported screen eyedropper, conversions, harmony palettes, contrast checker, copying, or CSS and JSON downloads.
Can I pick a color from an image without uploading it?
Yes. Open, drop, or paste a browser-supported image. The image is decoded and sampled in the current tab and is not uploaded to an Olivez image-processing server.
Does the image color picker sample the resized preview?
No. The preview can be scaled for display, but the pointer position is mapped back to the browser-decoded image's original X/Y dimensions and the corresponding source location is sampled.
How do I pick an exact pixel from an image?
Use 1×, 2×, or 4× inspection zoom, watch the source X/Y coordinates and 11×11 loupe, then click or tap. With the preview focused, the arrow keys move one source pixel at a time and Enter or Space samples it.
Can I drag and drop or paste an image?
Yes. You can choose an image file, drop an image into the workbench, or paste an image that the browser exposes through the clipboard. All three paths use the same local image workflow.
Can I pick a color from anywhere on my screen?
On browsers that implement the EyeDropper API, use Pick from screen to select a visible screen color. The API requires a secure context and a direct user action and is not available in every browser.
Why is screen picking unavailable?
The EyeDropper API has limited browser support. When it is unavailable, the visual picker, exact color fields, and local image sampler remain usable.
Which color formats can I edit or copy?
The active opaque sRGB color is available as HEX, RGB, HSL, HSV, and estimated CMYK. HEX, RGB, HSL, and HSV stay synchronized; CMYK is a generic mathematical estimate rather than a press profile.
Does the picker support transparency or alpha?
No. The tool outputs opaque six-digit HEX and RGB-based values. If an image pixel contains alpha, the current sampler uses its RGB channels but does not expose or export the alpha value.
Can I pick an image color and check its WCAG contrast?
Yes. A sampled image color becomes the active color immediately. Compare it with another HEX value and review AA and AAA results for normal and large text.
Do harmonious colors automatically have accessible contrast?
No. Complementary, analogous, triadic, and split-complementary relationships describe hue relationships, not text readability. Test the actual foreground and background pair with the contrast checker.
Which harmony modes are available?
Choose complementary, analogous, triadic, or split complementary. The exact selected base HEX is preserved, while non-base swatches are generated with fixed HSV hue rotations.
What WCAG contrast ratio should I use?
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 respectively. Pass or fail uses the unrounded calculation.
Are the CMYK values ready for printing?
No. They are generic mathematical estimates. Reliable print conversion requires the intended printer, paper, inks, rendering settings, and ICC output profile.
Are recent colors saved after I close the page?
No. The recent-color list is limited to eight entries and lasts only for the current page session.
Can I export the generated harmony as CSS variables or JSON?
Yes. CSS exports the active harmony as numbered custom properties. JSON includes the selected color, RGB, HSL, HSV, estimated CMYK, harmony mode, and harmony colors.
Choose a color visually or enter exact values.