Free Colour Picker
Pick any colour and get HEX, RGB and HSL codes instantly. Generate palettes, preview shades and tints, and copy codes with one click.
Shades & Tints
Colour Harmony
How Colour Codes Work
Digital colours are defined using three systems. HEX uses a six-character code after # (e.g. #EC4899) where pairs represent red, green, and blue in hexadecimal (00-FF). RGB uses decimal values from 0-255 for each channel (e.g. rgb(236, 72, 153)). HSL uses hue (0-360 degrees on the colour wheel), saturation (0-100%), and lightness (0-100%). All three describe the same colour — this tool converts between them instantly.
Understanding Colour Models
HEX (Hexadecimal)
The most common format in web design and CSS. A # followed by six hex digits: two for red, two for green, two for blue. Values range from 00 (none) to FF (maximum). #000000 is black, #FFFFFF is white, #FF0000 is pure red. Shorthand notation uses three digits when pairs match: #FFF = #FFFFFF.
RGB (Red, Green, Blue)
The additive colour model used by screens. Each channel ranges from 0 to 255. Mixing all three at maximum (255, 255, 255) produces white. All at zero produces black. CSS syntax: rgb(236, 72, 153). RGBA adds an alpha channel for transparency: rgba(236, 72, 153, 0.5) is 50% transparent.
HSL (Hue, Saturation, Lightness)
The most intuitive model for humans. Hue is the colour's position on the wheel (0°=red, 120°=green, 240°=blue). Saturation is intensity (0%=grey, 100%=vivid). Lightness is brightness (0%=black, 50%=pure colour, 100%=white). HSL makes it easy to create variations — keep hue the same, adjust saturation and lightness for shades and tints.
Colour Harmony Types
Colour in Web Design
- Primary colour: Your brand's main colour — used for CTAs, links, and key UI elements
- Secondary colour: Supports the primary — used for accents, hover states, and secondary actions
- Neutral colours: Greys, whites, and off-whites for backgrounds, text, and borders
- Contrast ratio: WCAG requires 4.5:1 minimum contrast between text and background for accessibility
- 60-30-10 rule: 60% dominant colour, 30% secondary, 10% accent — the classic interior and web design formula
Colour Psychology
- Red: Energy, urgency, passion — used for sales, CTAs, food brands
- Blue: Trust, calm, professionalism — most popular corporate colour (Facebook, LinkedIn, PayPal)
- Green: Growth, health, nature — finance, health, sustainability brands
- Yellow: Optimism, warmth, attention — caution signs, happy brands
- Purple: Luxury, creativity, wisdom — beauty, tech, premium brands
- Orange: Enthusiasm, action, warmth — ecommerce CTAs, food, fitness
- Black: Sophistication, luxury, power — fashion, luxury, high-end tech
Accessibility and Colour
About 8% of men and 0.5% of women have some form of colour vision deficiency. Never rely on colour alone to convey information — always pair colour with text, icons, or patterns. Use tools like the WebAIM Contrast Checker to ensure text meets WCAG AA standards (4.5:1 for normal text, 3:1 for large text). Dark text on light backgrounds is generally the safest choice for readability.
Related Tools
Frequently Asked Questions
A 6-digit hexadecimal code starting with # that represents a colour. Two digits each for red, green, blue. Example: #FF0000 = red.
RGB uses red/green/blue values (0-255). HSL uses hue (0-360°), saturation (0-100%), lightness (0-100%). HSL is more intuitive for adjustments.
Use browser DevTools (right-click → Inspect) or a colour picker extension like ColorZilla.
Colours 180° apart on the colour wheel. They create strong contrast — red/cyan, blue/orange, yellow/purple.
HEX is most common. HSL is growing in popularity because it's easier to create colour variations.
Minimum 4.5:1 for normal text, 3:1 for large text. Ensures readability for people with visual impairments.
