Colour Picker

Pick any colour and get its HEX, RGB and HSL values. Adjust hue, saturation and lightness with sliders. Copy colour codes with one click.

HEX#3C71DD
RGBrgb(60, 113, 221)
HSLhsl(220, 70%, 55%)

Find the perfect colour with our interactive picker. Select a colour visually or dial it in with HSL sliders, then copy the exact HEX, RGB or HSL code. Ideal for web designers, developers and anyone who needs precise colour values.

When to Use the Colour Picker

Use this tool when designing websites, creating social media graphics, choosing brand colours, matching colours from a reference, or converting between HEX, RGB and HSL formats.

Tips

  • Use the Hue slider to pick the base colour, then fine-tune with Saturation and Lightness.
  • For accessible text, ensure a contrast ratio of at least 4.5:1 against the background colour.
  • Desaturated colours (low S value) work well for backgrounds, while saturated colours pop for accents.
  • HSL is the easiest format for creating colour variations — keep H the same and adjust S and L.

Frequently Asked Questions

What colour formats are supported? ▾

HEX (e.g. #FF5733), RGB (e.g. rgb(255, 87, 51)) and HSL (e.g. hsl(11, 100%, 60%)). All three update in real time as you pick a colour.

Can I enter a specific colour code? ▾

Yes. Use the native colour input to pick visually, or adjust the HSL sliders for precise control. The HEX, RGB and HSL values update live.

What do H, S and L stand for? ▾

H is Hue (the colour itself, 0-360 degrees), S is Saturation (colour intensity, 0-100%) and L is Lightness (brightness, 0-100%). HSL is often more intuitive than RGB for colour selection.

How do I copy a colour code? ▾

Click the copy button next to any format — HEX, RGB or HSL. The value is copied to your clipboard instantly.

Is this tool useful for web design? ▾

Yes. Designers and developers use it to find exact colour codes for CSS, pick accessible colour combinations, and convert between formats.

Related Tools

📊

Barcode Generator — Free Code 128 Barcode Maker

Generate Code 128 barcodes from any text. Download as PNG — free, instant, no software needed. Perfect for inventory, shipping and product labels.
🌈

Colour Palette Generator — Harmonious Colour Schemes

Generate 5-colour palettes using colour theory. Complementary, analogous, triadic and split-complementary harmonies. Lock colours and copy HEX codes.
🔖

Favicon Generator — Create Favicons from Text or Emoji

Generate favicons from letters or emoji. Pick a background colour, preview at 16x16, 32x32 and 48x48, and download all sizes as PNG. Free, instant, no design skills needed.