Color Picker
Pick a color and get HEX, RGB, and HSL values instantly.
Colour Format Reference
The same colour can be expressed in many formats. This picker outputs HEX, RGB, and HSL. Here is when to use each — and what else exists.
| Format | Example | Used in | Note |
|---|---|---|---|
| HEX | #FF5733 | HTML, CSS, Figma, Photoshop, Sketch | Most compact — industry standard |
| RGB | rgb(255, 87, 51) | CSS, Canvas API, image processing | Use rgba() for transparency |
| HSL | hsl(11, 100%, 60%) | CSS, design systems, theming | Best for programmatic colour adjustment |
| RGBA | rgba(255, 87, 51, 0.8) | CSS overlays, shadows, backgrounds | Adds alpha (opacity) channel 0–1 |
| HSLA | hsla(11, 100%, 60%, 0.8) | CSS theming with transparency | HSL + alpha channel |
| OKLCH | oklch(65% 0.22 25) | CSS Level 4 (modern browsers) | Perceptually uniform, future-proof |
Colour Best Practices for Designers & Developers
- →Always check contrast ratios. Use your chosen colours in a contrast checker (e.g. WebAIM Contrast Checker) to ensure WCAG AA compliance (4.5:1 for body text, 3:1 for large text).
- →Build a design token system. Instead of hardcoding hex values, define semantic colour tokens in CSS variables:
--color-primary: #6d28d9and reference that everywhere. - →Use HSL for colour scales. To generate a tint/shade scale, keep the hue and saturation constant and step the lightness from 95% (lightest) to 5% (darkest). This creates harmonious palettes automatically.
- →Test for colour blindness. ~8% of males have red-green colour blindness. Use browser DevTools Rendering panel to simulate protanopia and deuteranopia and check your UI is still usable.
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.
What users say about Color Picker
Real feedback from ToolsBear users — reviewed and approved by our team.