Pick any color and get HEX, RGB, HSL and CSS values instantly. Save colors to your palette.
A color picker is a tool that lets you select a color and get its value in different formats. Web developers use color values constantly when writing CSS. Designers use them to define brand colors and share them with developers. This tool lets you pick any color and instantly see the HEX, RGB, and HSL values you need.
HEX is the most common format in CSS and design tools. It represents each color channel as a two-digit hexadecimal number. RGB uses three decimal numbers from 0 to 255. HSL is the most intuitive for humans because hue is the actual color, saturation controls how vivid it is, and lightness controls how bright or dark it is. All three formats describe the same colors and are equally valid in CSS.
Click the plus button to add the current color to your palette. Click any saved swatch to load that color back into the picker. Hover over a swatch and click the red X to remove it. Your palette is saved in your browser's local storage and persists between sessions.
HSL uses lightness as the third component where 0 percent is black, 100 percent is white, and 50 percent is the pure color. HSB (also called HSV) uses brightness where 0 percent is black and 100 percent is the pure color. Design tools like Photoshop use HSB. CSS uses HSL.
Your palette is saved in your browser's local storage on your device. It persists between sessions but is specific to this browser. It will not sync between devices.