Color Picker

How to Use

Click the color swatch to open your browser's native color picker and choose any color visually. The HEX, RGB, and HSL values update instantly below, each with its own copy button ready to paste straight into a CSS file, a design tool, or a config. Every color you pick is added to the recently picked row, click one to bring it back without reopening the picker. The default color, a rich indigo (#4F46E5), loads pre-converted to rgb(79, 70, 229) and hsl(243, 75%, 59%), a quick way to confirm the tool is working and to see all three notations for the same color side by side.

HEX, RGB, and HSL Explained

A HEX code like #4F46E5 packs three color channels into six hexadecimal digits, two digits each for red, green, and blue, where each pair ranges from 00 (none of that color) to FF (full intensity). RGB writes the same three channels out as plain decimal numbers from 0 to 255 instead, rgb(79, 70, 229) describes the identical color as #4F46E5, just in base-10 rather than base-16. HSL takes a different approach entirely: instead of red/green/blue channels, it describes a color by hue (its position on a 360-degree color wheel), saturation (how vivid versus gray it is, as a percentage), and lightness (how close to black or white it is, also a percentage). All three notations are just different coordinate systems mapping onto the exact same set of visible colors, none is more "correct" than another, they're suited to different tasks.

How This Tool Converts Between Formats

Converting HEX to RGB is straightforward: the six hex digits are split into three pairs, and each pair is parsed as a base-16 number back into its 0 to 255 decimal value, no rounding or approximation involved, the conversion is exact in both directions. Converting RGB to HSL takes more work, the tool first normalizes each channel to a 0 to 1 range, finds the highest and lowest of the three values to determine lightness and how saturated the color is, then calculates hue based on which channel (red, green, or blue) was the maximum, using a different formula for each case since hue is fundamentally about the relationship between all three channels rather than any single one. This is genuine trigonometry-adjacent color math, not a lookup table, which is why the tool can convert any of the 16.7 million HEX colors instantly rather than only a fixed palette.

Choosing a Consistent Notation for Your Project

Most design systems and codebases standardize on one notation to keep things consistent, even though all three work equally well in CSS. HEX is the most compact and by far the most common choice for static brand colors and design tokens, since a 7-character code is easy to store, diff in version control, and paste around. RGB is often preferred when a color needs to be manipulated programmatically, blending two colors or calculating contrast is more direct with separate numeric channels. HSL tends to win when a design system needs to generate variations of a base color systematically, lightening a button's hover state is as simple as bumping the lightness value by a few percentage points, something that requires much fiddlier math starting from HEX or RGB. This tool gives you all three simultaneously specifically so you can grab whichever format your current context calls for without doing the conversion by hand.

Common Use Cases

Designers and developers reach for a color picker most often to nail down an exact value seen somewhere else, matching a brand guideline's swatch, picking a background that complements an existing palette, or fine-tuning a color by eye until it looks right, then reading off the precise value to hard-code into a stylesheet. The recently picked history is particularly useful mid-session when comparing several candidate colors side by side, tweak one, check another, and jump back to an earlier pick instantly instead of having to remember or re-enter its exact value. It's also a handy quick-reference when you already have a color in one format (say, a hex code from a client's brand book) and need the same color in RGB or HSL to paste into a tool or codebase that expects that specific format.

Common Mistakes

Assuming every browser's native color dialog includes an eyedropper for sampling colors directly from the screen is a common expectation gap, this capability (the EyeDropper API) is supported in Chromium-based browsers like Chrome and Edge but not universally elsewhere, so the picking experience can look different depending on which browser you're using. Treating HSL lightness as identical to perceived brightness is another subtle trap, two colors with the same HSL lightness value can still look noticeably brighter or dimmer to the human eye depending on their hue, since human vision isn't equally sensitive to all colors, a pure yellow at 50% lightness reads as much brighter than a pure blue at the same 50% lightness. Finally, copying a color value without checking whether your target expects a leading # (HEX) or the full rgb()/hsl() wrapper syntax is an easy paste mistake, this tool's copy buttons copy each field exactly as displayed, including the wrapper text, so double check the format matches what you're pasting into.

Frequently Asked Questions

How does the visual color picker work?

The swatch on the left uses your browser's built-in color picker, clicking it opens your operating system's native color selection dialog, complete with a color wheel or spectrum and eyedropper tool on browsers that support it. Whatever you pick is instantly converted to HEX, RGB, and HSL below.

What is the recently picked colors row for?

Every color you pick is added to the recently picked row so you can quickly switch back to an earlier choice without reopening the picker and searching for it again. This history only lasts for your current visit and resets when you reload the page.

Why do HEX, RGB, and HSL all describe the same color?

They are three different notations for exactly the same underlying color data, red, green, and blue light intensity, just organized differently for different purposes. HEX packs the three RGB values into a compact 6-digit code convenient for CSS and design tools. RGB spells out each channel as a 0 to 255 number, intuitive for direct color mixing. HSL reorganizes the same information around hue, saturation, and lightness, which maps more closely to how humans think about color ("a lighter version of this blue") and makes it easy to create tints, shades, and variations by adjusting a single value.

Does this tool support picking a color with transparency (alpha)?

No, this tool outputs solid HEX, RGB, and HSL values without an alpha channel, matching what the browser's native color input control supports. If you need a semi-transparent color, take the RGB or HSL value produced here and add an alpha component yourself, for example rgba(79, 70, 229, 0.5) or hsla(243, 75%, 59%, 0.5), which most modern browsers accept identically to the non-alpha versions.

Can I type an exact hex code instead of using the visual picker?

The swatch itself opens your browser's native color dialog, and most browsers' native dialogs include their own text field where you can type or paste a precise hex code rather than clicking around a color wheel. Once confirmed there, this tool immediately converts it to RGB and HSL and adds it to your recently picked history, giving you an easy way to see a known hex code's equivalent values in the other two formats.

Is my chosen color saved or sent anywhere?

No. Color selection and conversion happen entirely in your browser using the native color input element and simple JavaScript math, nothing is transmitted to a server. The recently picked history lives only in the page's memory for your current visit and disappears the moment you reload or close the tab.