Color Picker
Pick a color and get HEX, RGB, and HSL values instantly.
0
0
0
Key Features
Interactive colour wheel and gradient picker
Instant HEX, RGB, and HSL values as you pick
One-click copy for each colour format
Supports full colour space from 000000 to ffffff
Type a HEX or RGB value to jump straight to a colour
Free, browser-based — no installation or account needed
How to Pick and Convert Colors
Use the ToolsBear color picker to find HEX, RGB, and HSL values for any color.
1
Pick a color
Use the color wheel or input to select the desired color.
2
View color values
See the HEX, RGB, and HSL values update automatically.
3
Copy the value
Click to copy the color format you need to your clipboard.
Frequently Asked Questions
What is a HEX colour code?
HEX (hexadecimal) colour codes are 6-character strings like #FF5733. The first two digits represent red (00–FF), the next two green, and the last two blue. HEX is the standard format used in HTML, CSS, and design tools like Figma and Photoshop.
What is the difference between RGB and HSL?
RGB (Red, Green, Blue) represents colours by mixing amounts of red, green, and blue light (each 0–255). HSL (Hue, Saturation, Lightness) represents colours by their hue angle (0–360°), saturation percentage, and lightness percentage. HSL is more intuitive for designers since adjusting lightness or saturation is natural.
When should I use HEX vs RGB vs HSL in CSS?
HEX is the most compact and most commonly used in CSS. RGB is useful when you need to set opacity with rgba(). HSL is best for programmatic colour manipulation (e.g. darken a colour by reducing lightness by 10%). Modern CSS (level 4) supports all three plus the new oklch() format.
How do I find the colour code for a specific colour on a website?
In Chrome or Firefox, right-click any element, choose Inspect, find the background-color or color CSS property, and click the colour swatch in DevTools to open the built-in colour picker. You can also use a browser extension like ColorZilla for pixel-level colour picking.
What is colour contrast and why does it matter?
Colour contrast is the difference in luminance between foreground text and background colour. WCAG 2.1 requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text to ensure readability for users with visual impairments. Always test your chosen colours against accessibility guidelines.
Is this colour picker free?
Completely free. Select a colour, get your HEX, RGB, and HSL values, copy and go.
Related Tools
YouTube Tools Hub
All 12 free YouTube tools in one place.
YouTube to MP3
Download YouTube audio as MP3.
YouTube Video Summarizer
Get AI-powered summaries from any YouTube video.
Invoice Generator
Create professional invoices instantly.
Meme Generator
Create memes with popular templates.
Readability Score
Calculate text readability scores.