Color Picker
Pick colors and convert between HEX, RGB and HSL.
#C5F82Argb(197, 248, 42)hsl(75, 94%, 57%)--brand: #c5f82a;How to Use the Color Picker?
Pick any colour and convert it between HEX, RGB and HSL, with shades, harmonies and contrast checks.
- 1
Use the colour box, type a HEX code, or click Pick from screen in supported browsers.
- 2
Copy the colour in HEX, RGB, HSL or as a CSS variable.
- 3
Check the contrast ratio on white and black backgrounds for readable text.
- 4
Click a shade or harmony swatch to explore related colours.
- 5
Drop an image and click anywhere on it to pick a colour from it.
Benefits of Using Our Color Picker
Every format
HEX, RGB, HSL and CSS variables, each with one click copy.
Accessibility check
See contrast ratios with WCAG AA results on light and dark backgrounds.
Palette ideas
Get shades plus complementary, analogous and triadic colours.
Pick from images
Grab exact colours from logos, photos and screenshots.
Who Can Use This Color Picker?
Web designers
Build palettes and check accessible contrast.
Developers
Convert colours between CSS formats.
Brand owners
Find the exact colours in your logo.
Students
Learn colour theory with live examples.
Frequently Asked Questions
Everything you need to know about the Color Picker.
What is the difference between HEX, RGB and HSL?
They are three ways to describe the same colour. HEX uses a six character code like #C5F82A. RGB lists red, green and blue values from 0 to 255. HSL uses hue, saturation and lightness, which makes it easier to create lighter or darker shades.
What does the contrast ratio mean?
Contrast ratio compares how bright two colours are. Web accessibility guidelines recommend at least 4.5 to 1 for normal text and 3 to 1 for large text. Higher ratios are easier to read for everyone.
Why is Pick from screen missing?
The screen eyedropper uses a browser feature currently available in Chrome and Edge on desktop. In other browsers you can still pick colours from an uploaded image.
How do I find a colour from my logo?
Drop your logo image into the upload area, then click on the part of the logo whose colour you want. The exact HEX, RGB and HSL values appear instantly.
Related Tools
All Utility ToolsInvoice Generator
Create professional invoices with your logo, taxes, payment links and QR codes, then export PDF, Word or PNG.
GST Calculator
Add or remove GST and see CGST, SGST and IGST split.
URL Shortener
Turn long links into short ones that are easy to share.
Percentage Calculator
Solve every common percentage question in one place.