Pick any color and instantly convert between HEX, RGB, HSL, and HSB formats.
The Color Picker provides instant conversion between HEX, RGB, and HSL color formats as you select or type any color value. Use the native color wheel for visual picking, type a hex code directly, or enter RGB channel values - all representations stay in sync in real time. You can also save favorite colors to a persistent swatch palette for quick reference during your design session.
HEX is simply a base-16 encoding of the three 8-bit RGB channel values (red, green, blue), so converting between HEX and RGB is a direct numerical transformation with no loss of information. Converting to HSL involves computing the maximum and minimum channel values to derive hue angle, saturation percentage, and lightness percentage - all standard mathematical operations that the browser performs in real time as you type. Because all three formats represent the same sRGB color space, round-trip conversion (HEX -> HSL -> HEX) is lossless.
HSL is the most intuitive format for programmatic color manipulation because its three components map directly to human perception: hue (what color), saturation (how vivid), and lightness (how bright). If you want a lighter version of a button's hover state, you simply increase the L value by 10% - something that is opaque in HEX and requires adjusting all three RGB channels manually. Modern CSS also supports hsl() natively, and frameworks like Tailwind CSS and many design tokens are built around HSL scales precisely because of this predictability.
Saved swatches are stored in the browser's localStorage, so they persist across page reloads and browser restarts on the same device and browser profile. They are not synced to a server or tied to an account, meaning they will not appear on other devices and will be lost if you clear your browser's site data. This approach is intentionally private-by-design - your working palette stays on your machine and is never transmitted anywhere.
The tool accepts HEX codes (with or without the # prefix) and RGB/HSL values typed directly into their respective fields. CSS named colors like rebeccapurple or tomato are not directly accepted as text input but you can use the native color picker wheel which resolves any visually selected color. Modern color spaces like OKLCH and Display P3 are outside the sRGB gamut this tool operates in, but for standard web design work involving sRGB colors, all three interchangeable formats are fully covered.
Browser DevTools color pickers are tightly integrated with the DOM and let you click any element to inspect and modify its color in context - an irreplaceable capability for debugging live pages. This tool is designed for a different workflow: working with colors in isolation before they enter your code, saving a palette of colors you are actively using, and quickly checking what a HEX value looks like without needing to open DevTools on a specific page. It is also more accessible for designers and non-developers who may not be comfortable navigating DevTools.