Color Picker
HEX#22c55e
RGBrgb(34, 197, 94)
HSLhsl(142, 71%, 45%)
CSS Variable
--color-primary: #22c55e;#d3f8e1
#7ce9a4
#21c45d
#16833e
#072c15
Click a shade to select it
Color Picker
Designers and front-end developers constantly need to switch between color notations: HEX codes are the standard in CSS and design tools, RGB values map directly to screen pixels, and HSL (Hue, Saturation, Lightness) makes it intuitive to adjust tones and build harmonious palettes. This picker lets you choose any color visually or by typing a value, and instantly shows the equivalent in all three formats — each copyable with one click. A generated shade palette displays lighter and darker variants of the selected hue, helping you build a consistent design system without a separate design tool.