Which color formats are included?
The picker provides HEX, RGB, HSL, HWB, an approximate screen-to-CMYK conversion, and perceptually organised OKLCH values. Alpha is included where supported.
Free online design tool
Color Picker & Image Color Extractor
Choose a precise color, sample any pixel from an image, extract a complete palette, convert color formats, and verify accessible contrast in one workspace.
Precision picker
Build your color
Accessibility
WCAG contrast checker
Text
#FF7A18
Needs more contrast for text
Normal AA
Normal AAA
Large AA
UI 3:1
Readable design starts here.
Preview body text against your selected background before using the colors in a real interface.
Palette builder
Harmonies and tonal scale
Complementary
Analogous
Triadic
Tonal scale
Ready.
Image color picker
Pick a color from any image
Upload, drop, or paste an image, or load one from a public image URL. Click any pixel to use its color and generate an eight-color palette.
You can also copy an image and paste it anywhere on this page.
Your image will appear here
Hover to inspect pixels and click to select a color.
Image
Choose an image to begin.
Quick guide
How to pick and use a color
Start from a visual choice, an existing color value, or a pixel in an image. Every format, palette, and contrast result updates automatically.
-
01
Choose or sample a color
Use the visual field, enter a CSS color, open the device picker, sample the screen, or click a pixel in an uploaded or URL image.
-
02
Check formats and contrast
Copy HEX, RGB, HSL, HWB, CMYK, or OKLCH values and test the color against a background for WCAG text and interface contrast.
-
03
Build and export a palette
Explore complementary, analogous, and triadic combinations, use the tonal scale, or export the complete palette as CSS variables or JSON.
Color essentials
Useful color decisions, not just color values
A practical picker should help you move from inspiration to a color system that works in design, code, and accessible interfaces.
What contrast ratio should text have?
WCAG 2.2 uses at least 4.5:1 for normal text and 3:1 for large text at Level AA. Enhanced Level AAA uses 7:1 and 4.5:1 respectively.
Can I pick colors from a photograph?
Yes. Upload, drop, or paste an image, or provide a direct public image URL. Click any pixel or choose from the automatically extracted dominant palette.
Are uploaded images stored?
No. Local images are decoded directly in your browser. A URL image is fetched through Bobek to avoid browser cross-origin restrictions, sanitised in memory, and never saved.
What is OKLCH?
OKLCH describes perceptual lightness, chroma, and hue. Its more even visual spacing makes it useful when building predictable tonal scales and design systems.
What is an image’s dominant palette?
It is a compact group of representative colors calculated from the image pixels. Use it as a starting point, then verify contrast before assigning text or interface roles.