How to Pick a Color and Get HEX, RGB, and HSL Values
Visually pick any color and instantly get the values in every format used in web design and CSS.
Tool Used
Color Picker
Open the Color Picker
Go to /tools/color/color-picker.
Drag the picker to a color
Click and drag the small circle around the color square to select your desired color. Use the hue slider below the square to change between red, blue, green, yellow, and other base hues.
Read every color format
Below the picker, the same color is shown in HEX (like #3B82F6), RGB (like rgb(59, 130, 246)), and HSL (like hsl(217, 91%, 60%)). Pick whichever format your CSS or design tool expects.
Adjust transparency if needed
Use the alpha slider to set transparency from fully opaque to fully transparent. The tool then also shows the HEX with alpha (#3B82F680), RGBA, and HSLA versions of the value.
Copy and paste into your design
Click the copy icon next to any format to copy that value to your clipboard. Paste it straight into your CSS file, Figma fill, Tailwind config, or design system token.
All done!
You are ready to use Color Picker like a pro.