Filuni

Color Picker

Pick a color visually and copy HEX / RGB / HSL values.

HEX
#3B82F6
RGB
rgb(59, 130, 246)
HSL
hsl(217, 91%, 60%)
CSS var
--brand: #3B82F6;
Private & SecureRuns in your browser — nothing is uploaded
Easy to UseJust paste or type — instant results
Free ForeverUnlimited use, no sign-up
Fast & ReliableAdvanced tech, fast and stable

Picking a colour and reading off its exact code should not need a design app open. Use the picker to choose a shade visually, or pull a colour off the screen, and get its HEX, RGB and HSL values ready to paste into CSS or a design tool.

#4F46E5rgb(79,70,229)
Swatch → HEX, RGB, HSL

How to use: Color Picker

  1. 1Enter inputDrag the color field or sliders to pick the shade you want.
  2. 2Set optionsOr paste a HEX, RGB or HSL value into the input to jump to a color.
  3. 3ProcessFine-tune hue, saturation and lightness in the live preview.
  4. 4Get resultClick copy next to the HEX, RGB or HSL value you need.

Common use cases

Grab a colour fastPick a shade and copy its HEX without launching a heavy editor.
Read every formatSee the same colour as HEX, RGB and HSL at once.
Match a brand colourDial in a precise shade and copy the code for your stylesheet.
Sample from the screenUse the eyedropper to lift a colour you can see on the page.

Good to know

HEX, RGB and HSL are the same colourThey are three notations for one shade. HSL makes a bit lighter or less saturated easy to reason about; HEX is compact for CSS.
The eyedropper needs browser supportOn-screen sampling uses a browser feature that Chrome and Edge support but some browsers do not. Where it is missing, pick visually instead.
Screen colour is not print colourWhat glows on a screen in RGB can shift on paper in CMYK. For print, confirm with the printer's profile rather than the screen.
Copy, then check in contextA colour can look different against another background. Paste it where it will live and judge it there.

Frequently Asked Questions