Color Picker & Converter
Developer ToolsHEX, RGB & HSL — pick, convert, shade
Accepts #RRGGBB, RRGGBB, #RGB, RGB.
Color picker and converter with HSL lightness shade ramp.
The Color Picker & Converter is a precise tool for choosing colors and converting between the three formats designers and developers use every day: HEX (the #RRGGBB shorthand used in CSS and design tools), RGB (the red-green-blue channel values from 0 to 255), and HSL (hue-saturation-lightness, which is more intuitive for adjusting color). Pick a color with the native color picker, or type a value in any format — the other two update instantly.
HEX is the most compact format and the one CSS historically favors (#1a73e8). RGB is useful when you need to manipulate individual channels programmatically (rgba() for transparency, color mixing, channel masking). HSL is the most human-friendly: you can dial in a hue (0–360 degrees around the color wheel), then adjust saturation (0% gray → 100% full color) and lightness (0% black → 50% pure color → 100% white) independently. Need a darker shade of the same green? Drop the L in HSL — far easier than guessing RGB values.
The tool also generates a shade ramp for your picked color — five steps lighter and five steps darker — so you can grab complementary tints and shades for hover states, borders and backgrounds without leaving the page. This is invaluable for building cohesive design systems where one brand color needs 9–11 variations.
The picker uses the browser's native color input for accuracy. Everything runs locally; no colors are transmitted or stored.