Color Picker — HEX, RGB and HSL
Need the exact code for a shade? This free color picker lets you choose any color visually or type HEX, RGB or HSL values directly. Every field stays in sync, every value copies with one click, and you can save your favorite shades as swatches.
Saved swatches
No saved swatches yet. Save a color to keep it here between visits.
Eyedropper note: in Chrome and Edge, the built-in color dialog above includes an eyedropper icon that lets you sample any color shown on your screen.
How to use
- Click the color box and choose a shade from the dialog, or type a value into the HEX, RGB or HSL field.
- Watch the other fields update automatically — HEX, RGB and HSL always stay in sync.
- Press Copy next to any value to place it on your clipboard for use in your design or code.
- Press Save current color to add the shade to your swatch row. Saved swatches stay in your browser for your next visit.
- Click any saved swatch to load it back into the picker instantly.
Tips
- Type short HEX like #36f — the picker expands it to the full six-digit code automatically.
- For web design, HEX and RGB are the most common formats; HSL makes it easier to create lighter or darker shades of the same hue.
- Use the eyedropper in the color dialog to match colors from images or other apps on your screen.
- Save brand or theme colors as swatches so you can reuse the exact codes without looking them up again.