Color Picker
Pick colors and convert between HEX, RGB, and HSL formats
Pick a Color
Color Values
How to Use
- Use the color picker wheel to visually select any colour.
- Or type a known HEX code (e.g. #1a7284) — RGB and HSL values update automatically.
- Or enter RGB values (0–255 for each channel) — HEX and HSL update accordingly.
- Click any value to copy it — paste directly into your CSS, Figma, Photoshop, or code.
Color Formats Explained
Digital colours can be expressed in multiple equivalent formats. Designers and developers choose the format that their tool or language requires.
- HEX (#RRGGBB): Most common in web CSS. Each pair is a hexadecimal value (00–FF) for Red, Green, Blue. Example: #FF5733.
- RGB (R, G, B): Values 0–255 for each channel. Used in CSS (
rgb(255, 87, 51)) and most image editors. - HSL (Hue, Saturation, Lightness): Most intuitive for designers — Hue is 0–360° on the colour wheel, Saturation and Lightness are percentages. Easier for creating colour variations.
Web Design Colour Tips
- 60-30-10 rule: 60% dominant colour, 30% secondary, 10% accent creates a balanced palette.
- Contrast for accessibility: Text needs a contrast ratio of at least 4.5:1 against its background (WCAG AA standard). Dark text on light backgrounds is safest.
- Semantic colours: Red = error/danger, Green = success, Yellow = warning, Blue = info — widely understood conventions.