About the Color Picker (HEX, RGB, HSL)
Picking exactly the right color and getting its value in the correct format for your project — HEX for CSS, RGB for canvas or design tools, HSL for programmatically adjusting lightness or saturation — is something every designer and developer needs constantly. This Color Picker lets you select any color visually and instantly view it in all three common formats.
This tool is useful for web developers grabbing a precise color value for CSS, designers exploring color variations before finalizing a palette, and anyone who needs to convert a color they've seen (in an image, a brand guideline, or another tool) into a specific numeric format.
To use it, use the color picker swatch to choose any color, or type a HEX value directly if you already know it. The HEX, RGB, and HSL values all update instantly and can be copied individually with one click, ready to paste directly into your CSS, design tool, or code.
For example, picking a shade of blue instantly shows its HEX value (#4f46e5), its RGB equivalent (rgb(79, 70, 229)), and its HSL equivalent (hsl(243, 75%, 59%)) — all three represent the exact same color, just in different formats suited to different contexts, like HSL being especially convenient when you want to programmatically create lighter or darker variations by adjusting just the lightness percentage.
A common point of confusion is that HEX and RGB always represent the exact same color space (just written differently — HEX is base-16, RGB is base-10), while HSL represents color using hue, saturation and lightness, which is often more intuitive for humans to reason about and adjust than raw RGB numbers, especially when trying to create a lighter or more muted version of an existing color for a hover state or secondary UI element.
Tip: when building a design system, define your core brand colors in HSL so you can programmatically generate consistent lighter/darker shades and tints by adjusting only the lightness value, which produces far more visually consistent color scales than manually guessing at adjusted HEX or RGB values for each variant.