Pick a color
Drag on the square and the hue bar, or type a HEX, RGB or HSL code. Copy the value with one click.
Tints and shades: lightest to darkest
Complementary colors and harmonies
Upload an image and click to pick colors directly from it
Click to open the spectrum color picker
Preset Colors
Color History
How to use the color picker
-
1
Pick a color
Click the preview to open the spectrum and adjust brightness, type a HEX or RGB code, or start from one of the preset colors.
-
2
Or grab a color from an image
Upload a photo, screenshot or logo and click the exact spot. The tool reads the color of that pixel.
-
3
Choose the format
See the same shade as HEX, RGB, HSL, HSV and CMYK and select the format your app or website uses.
-
4
Copy the code
Click Copy Color. The colors you used stay in the history so you can compare and reuse them.
Pick colors from images
Want the exact color of a logo, a piece of clothing in a photo or a reference website? Upload the image and click on it: the color picker reads that pixel and shows the code instantly. The image is only opened in your browser, with no upload, so it is safe to use with client materials and internal files.
To be accurate on textured or shaded areas, click a few nearby points and compare the results in the history. Heavily compressed photos, such as images forwarded many times through messaging apps, can show small color differences between neighbouring pixels.
HEX, RGB, HSL, HSV or CMYK: which should you use?
- HEX (#FF6B6B): the most common format in CSS, HTML, Figma and Canva.
- RGB (255, 107, 107): red, green and blue from 0 to 255; used for screens, code and photo editing.
- HSL: hue, saturation and lightness; makes it easy to create lighter or darker variants of a color in CSS.
- HSV: hue, saturation and value; the model behind the pickers in Photoshop and many editors.
- CMYK: cyan, magenta, yellow and black; the reference for printed material.
Tips for choosing colors that work
When building a palette, start from one main color and create variants by changing only the lightness in HSL; that way the shades belong together. For text, check the contrast with the background: light text on a light background is hard to read, especially on phones and outdoors.
Also keep in mind that screen and paper colors are not identical. If the design is going to print, check the CMYK values and ask the printer for a color proof when you can, because different monitors display the same RGB code slightly differently.
Color picker FAQ
How do I find the color of an image?
Upload the image on this page and click the spot you want. The color code appears as HEX, RGB, HSL, HSV and CMYK.
How do I convert HEX to RGB?
Type the HEX code into its field and switch the format to RGB. The conversion is instant and also works the other way round.
Does the color picker support CMYK?
Yes. Select CMYK as the color format to see the cyan, magenta, yellow and black percentages of the chosen shade.
Are my images uploaded anywhere?
No. The image is only opened in your browser to read its pixels.
What is the difference between RGB and CMYK?
RGB mixes red, green and blue light and is used on screens. CMYK mixes cyan, magenta, yellow and black inks and is used in print. That is why some very bright screen colors cannot be printed exactly the same.
Can I use it on my phone?
Yes. The color picker works in phone and tablet browsers; tap the image to pick a color.
Mastering Color Selection: A Complete Guide to Color Pickers
Discover the art and science of color selection with our comprehensive guide to using color pickers effectively in design, development, and creative projects.
Why Use Color Pickers?
Color pickers are essential tools for anyone working with digital design, web development, or creative projects. They provide precise color selection and conversion capabilities that ensure consistency across different platforms and applications.
Key Benefits:
- Precise color matching from any source
- Multiple color format support (HEX, RGB, HSL, etc.)
- Color history and preset management
- Real-time color preview and adjustment
- Cross-platform compatibility
- Time-saving workflow optimization
Color Theory Basics
Understanding color theory is fundamental to effective color selection. Learn about the color wheel, harmonies, and psychological impacts of different colors.
Primary Colors
Red, blue, and yellow - the foundation of all other colors
Brand identity, basic design elements
Secondary Colors
Green, orange, and purple - created by mixing primaries
Accent colors, complementary elements
Tertiary Colors
Red-orange, yellow-green, etc. - more complex hues
Advanced color schemes, sophisticated designs
Color Temperature
Warm vs cool colors and their psychological effects
Mood setting, brand personality
Types of Color Pickers
Different color picker tools serve different purposes. Understanding the various types helps you choose the right tool for your specific needs.
Image-Based Pickers
Extract colors directly from images and photos
Matching existing designs, brand colors
Spectrum-Based Pickers
Interactive color wheels and sliders for creative selection
Original color creation, design exploration
Palette Generators
Create harmonious color schemes automatically
Complete design systems, color harmony
Accessibility Tools
Ensure color choices meet accessibility standards
Inclusive design, web accessibility
Color Picker Applications in Design
Color pickers are used across various design disciplines. Each field has unique requirements and best practices for color selection.
Web Design
Graphic Design
UI/UX Design
Marketing Materials
Color Accessibility and Standards
Color accessibility ensures that digital content is usable by people with visual impairments. Understanding WCAG guidelines is crucial for inclusive design.
Accessibility Standards:
Accessibility Tools:
- Automated tools to verify color contrast ratios
- Preview designs as seen by color-blind users
- Comprehensive accessibility testing tools
Common Color Picker Mistakes
Even experienced designers make mistakes with color selection. Being aware of these pitfalls helps create better designs.
Ignoring Color Context
Always test colors in their intended context and lighting conditions
Overusing Bright Colors
Balance bright accent colors with neutral backgrounds
Neglecting Accessibility
Always check contrast ratios and color blindness compatibility
Using Inconsistent Color Formats
Standardize on one format (usually HEX) for your project
Ignoring Brand Guidelines
Maintain brand color consistency across all platforms
SEO Benefits of Using Color Pickers
Precise Color Matching
Ensure brand consistency across all digital assets
Accessibility Compliance
Meet WCAG standards for better search rankings
Performance Optimization
Optimize color usage for faster loading times
Enhanced User Experience
Create visually appealing, accessible interfaces
Cross-Platform Consistency
Maintain design integrity across devices
Professional Quality
Deliver polished, professional-looking designs
Who Benefits from Color Pickers?
Graphic and web designers creating consistent brand identities
Frontend developers implementing precise color schemes
Marketing professionals maintaining brand consistency
Companies ensuring professional visual presentation
Design students learning color theory and application
Independent creators working on multiple projects