Pick any color and instantly copy HEX, RGB, or HSL values
RGB Sliders
HSL Sliders
Color Values
CSS Snippet
:root { --color-primary: #3B82F6; --color-primary-rgb: 59, 130, 246; --color-primary-hsl: 217deg 91% 60%; }
Preset Colors
The HEX color picker lets you visually select any color and instantly see its HEX, RGB, and HSL codes — ready to copy in one click. Use the native color wheel, fine-tune with RGB and HSL sliders, type a HEX code directly, or pick from curated presets. Perfect for web designers, developers, and anyone who needs accurate color codes fast.
A HEX color code is a 6-digit hexadecimal value (e.g. #3B82F6) that represents a color by specifying the intensity of red, green, and blue channels. Each pair of digits encodes one channel from 00 (none) to FF (full). HEX codes are the most widely used format in CSS, HTML, and design tools.
Type or paste your HEX value into the input field and the tool instantly shows the equivalent RGB and HSL values. Switch between output tabs to see all three formats. You can also use the sliders to tweak individual channels and watch every format update in real time.
RGB (Red, Green, Blue) describes a color by the intensity of its three primary light components — useful for precise digital values. HSL (Hue, Saturation, Lightness) describes color in a more human-intuitive way: hue is the base color angle on the wheel, saturation is color richness, and lightness controls brightness. HSL is often easier to adjust in CSS.
Yes. All output formats are valid CSS. Use the HEX value with a # prefix (e.g. color: #3B82F6), the RGB value with rgb() (e.g. color: rgb(59, 130, 246)), or the HSL value with hsl() (e.g. color: hsl(217, 91%, 60%)). The CSS Snippet card also gives you ready-to-paste custom property declarations for your :root block.