Colour Picker — Free Online Colour Tool
Pick any colour and get HEX, RGB and HSL codes instantly. Generate colour palettes, preview shades and tints, copy codes with one click. Free, fast, no sign-up.
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
| Harmony | Rule | Effect |
|---|---|---|
| Complementary | 180° apart | Strong contrast, high energy |
| Analogous | Adjacent on wheel (±30°) | Harmonious, natural feel |
| Triadic | 120° apart | Balanced, vibrant |
| Split-complementary | 150° and 210° | Contrast with less tension |
| Tetradic | 90° apart (4 colours) | Rich, needs careful balance |
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.