How to choose image color tools
Choose the page based on where the color starts. Image Color Picker reads colors from an image. Color Finder works with a color value or name, then handles conversions, harmony palettes, WCAG contrast checks, and your own palette.
Pick colors from an image
Use Image Color Picker when the color is inside a photograph, screenshot, illustration, or another image. Its zoom loupe lets you inspect the part of the image you want to sample. The result includes HEX, RGB, HSL, HSB, or CMYK values, and the tool can extract dominant colors.
Image Color Picker can copy the selected color as CSS or JSON. Choose CSS for a stylesheet and JSON when the color needs to go into structured data.
Find a color by HEX, RGB, or name
Open Color Finder when you have a color value or name instead of an image. It converts between HEX, RGB, HSL, HSV, and CMYK. You can also build harmony palettes and keep your own palette.
Color Finder checks WCAG contrast for the colors you provide. Use the check when you need to inspect a foreground and background pair for interface text or another design.
Image color picker or color finder?
Start with Image Color Picker when the source is an image and you need to sample a color or extract dominant colors. Start with Color Finder when the source is a typed value or name and you need conversions, a harmony palette, your own palette, or contrast checking. For other image tasks, see Image Tools.
Where these color tools come up
- A designer samples a shade from a product screenshot with Image Color Picker and copies the CSS result into a stylesheet.
- A developer enters a HEX value from a design file into Color Finder and converts it to RGB, HSL, or CMYK.
- A content editor checks the contrast between interface text and its background, then keeps the colors in a personal palette.
- An illustrator extracts an image's dominant colors and uses the returned list when building a related palette.
Frequently asked questions
How do I pick a color from an image?
Use Image Color Picker and inspect the image with its zoom loupe. The tool returns HEX, RGB, HSL, HSB, or CMYK values and can copy the color as CSS or JSON.
How can I find a color by HEX or RGB?
Use Color Finder and enter the color value or name. It converts the color to HEX, RGB, HSL, HSV, and CMYK.
Which image color tool checks WCAG contrast?
Color Finder checks WCAG contrast for colors you provide. Image Color Picker is for sampling image colors and extracting dominant colors.
Do Image Color Tools run in my browser?
Yes. Color Finder and Image Color Picker run in your browser.