Lite Tools

Color Picker

Pick colors and convert HEX, RGB and HSL instantly. Every pick is converted in real time with one-click copy: all done locally in your browser.

Click the swatch to open the system color dialog and drag the cursor to pick.

HEX 
#4F46E5
RGB 
rgb(79, 70, 229)
HSL 
hsl(243, 75%, 59%)

How to use

  1. Click the swatch next to "Pick a color" to open the system color dialog, or click any color in the suggested palette below.
  2. Every pick updates the preview area and the HEX, RGB and HSL values in real time.
  3. Click the "Copy" button next to a format to copy that color value to your clipboard.
  4. Looking for inspiration? Hit "Random color" and let chance decide.

FAQ

What is the difference between HEX, RGB and HSL: which should I use?
They describe the same color in different ways. HEX is the most common in CSS; rgb() is handy when you work with alpha or code; hsl() splits hue, saturation and lightness, which makes manual tweaking more intuitive. This tool keeps all three in sync.
How accurate are the conversions?
Conversions use the standard sRGB algorithm locally. HEX to RGB is an exact integer conversion; HSL is displayed as rounded degrees and percentages, so converting back may differ by one unit at most: that is normal rounding.
Can I pick a color from anywhere on my screen?
No. This is a web color component, so it only picks from the system color dialog. To sample colors from other apps on your screen, use your OS screenshot color tool or a dedicated picker app.
Will colors change in dark mode?
No. Color values are absolute: the page theme only affects the interface appearance, never the picked or converted colors.

How to use

  1. Open the system color dialog

    Click the swatch next to Pick a color to open your operating system color dialog. Or jump straight to one of the five suggested palette chips below.

  2. Read the synced formats

    Every pick updates the preview and the HEX, RGB and HSL outputs at the same time. The three values always describe one identical color.

  3. Copy the format you need

    Click the Copy button beside any output. Values like #4F46E5, rgb(79, 70, 229) and hsl(243, 75%, 59%) go straight to your clipboard.

  4. Roll a random color

    Out of ideas? Press Random color and the tool generates a fresh hue, syncing all three formats so you can keep exploring from there.

About this tool

Color Picker is a visual swatch that converts any color you select into the three notations used across the web: HEX, RGB and HSL. They are three descriptions of one color. HEX is the shorthand most CSS uses. rgb() is convenient when you add alpha in code. hsl() separates hue, saturation and lightness, so human tweaks stay intuitive. Conversions follow the standard sRGB algorithm and run locally. HEX to RGB is an exact integer mapping, while HSL is rounded to whole degrees and percentages.

It fits front-end developers matching a design mock and designers comparing notations while choosing brand colors. Anyone writing CSS can grab a value in a hurry. One limitation: as a web color component, it opens only the system color dialog and cannot eyedrop pixels from other applications. For that, use the color tool that ships with your OS screenshots. Values are absolute, so dark mode and page themes never alter what you copied.

How it works

All three notations describe the same sRGB color. #4F46E5 and rgb(79, 70, 229) are one value written in two bases. hsl() splits it into hue, saturation and lightness, which the browser converts back to RGB before painting. The conversion runs locally with the standard sRGB algorithm, and HEX to RGB is exact. The practical appeal of HSL is adjustability. Store the brand color as an HSL variable, and every darker or lighter variant is one number away. That is cheaper to maintain than a pile of frozen HEX strings.

CSS colors live in the sRGB gamut. The system dialog returns values in that space, so conversions between tools close exactly. Display gamut is a separate matter. The same HEX looks more vivid on a wide-gamut panel while the number never changes. When color has to match across devices, judge by the value rather than your eyes. Perception drifts with the panel, the ambient light and the OS color management settings.

When to use it

  1. From mockup to theme variables

    Take the HEX a designer hands you, convert it to HSL and store it as a CSS variable. Hover, active and disabled variants then fall out of the lightness channel instead of new picks.

  2. Consistent chart series colors

    Chart libraries and SVG fill accept all three formats. Start every series from one saturation and walk the hue angle, and a dashboard stays coherent where hand-picked colors rarely do.

  3. Learning the three notations

    All three outputs change together with every pick. Watching that link is an easier way to learn how HEX, RGB and HSL relate than memorizing conversion formulas.

Tips & tricks

  • Use the preset chips or Random color as a starting point, then fine-tune in your design tool to save time.
  • When hunting shades of the same hue, edit the HSL value and change only lightness. That is far quicker than editing HEX.
  • HSL is displayed rounded, so converting back may differ by one unit at most; that is normal rounding, not an error.

Things to watch

  • No alpha channel in the output

    The tool emits fully opaque colors. For translucency, copy the rgb() value and append a fourth argument by hand; there is no need to switch tools or re-pick.

  • The dialog differs per OS

    Windows and macOS ship different system color dialogs, and some Linux desktops offer only a minimal one. Typing a HEX value always works, whichever system you are on.

  • Output is CSS function syntax

    A value like rgb(79, 70, 229) pastes straight into stylesheets, but some older design tools expect three bare numbers. Strip the function wrapper and fill the R, G and B fields separately.

Related Tools