Color Picker & Converter
Pick colours visually and instantly convert between HEX, RGB, HSL, and HSV formats. Generate accessible colour palettes, check contrast ratios against WCAG accessibility standards, copy colour values with a single click, and explore complementary and analogous colour harmonies. Perfect for web developers, UI designers, and digital artists.
RGB Sliders
Color Values
Shades & Tints
Click any shade to use it. Dark → Light (left to right).
Color Harmonies
Complementary
Analogous
Triadic
Saved Colors
Color Details
Contrast Check
Colour Format Guide
HEX — #RRGGBB
6-digit hexadecimal, e.g. #FF5733. Most common in HTML/CSS. Can be shortened to 3 digits when pairs match: #FFF.
RGB — rgb(R, G, B)
Red, Green, Blue each 0–255, e.g. rgb(255, 87, 51). Use rgba() for transparency.
HSL — hsl(H, S%, L%)
Hue 0–360°, Saturation 0–100%, Lightness 0–100%. More intuitive for designers — easy to adjust brightness/saturation independently.
WCAG Colour Contrast
WCAG (Web Content Accessibility Guidelines) defines contrast ratio requirements to ensure text is readable for users with low vision or colour blindness.
Colour Psychology
- Red — urgency, passion, danger. Used in CTAs, food brands.
- Blue — trust, calm, technology. Used in finance, tech.
- Green — growth, success, health. Used in eco and finance brands.
- Yellow — optimism, warmth, attention. Used in retail warnings.
- Purple — luxury, creativity, wisdom. Used in premium brands.
- Orange — energy, enthusiasm, affordability.
Color Picker Use Cases
Web Design
Pick and convert colours for CSS stylesheets, Tailwind configs, and design tokens.
Accessibility
Check contrast ratios against WCAG AA/AAA to ensure readable text for all users.
Brand Colours
Convert brand hex colours to RGB/HSL for use across different design tools.
Digital Art
Explore colour harmonies — complementary, analogous, triadic — for artwork.