Pick colors visually and convert between HEX, RGB, and HSL. Generate complementary palettes, copy CSS values, and find color codes instantly — all in your browser.
Selected Color
#3B82F6
≈ blue-500
Click swatch to pick
#3B82F6rgb(59, 130, 246)rgba(59, 130, 246, 1)hsl(217, 91%, 60%)blue-500Click any color below to select it. The palette includes your base color plus complementary, analogous, and triadic harmonies.
A hex color code is a 6-character hexadecimal representation of RGB values (e.g., #FF5733). The first two digits are red (FF = 255), the middle two are green (57 = 87), and the last two are blue (33 = 51). RGB uses decimal values 0–255 for each channel. HSL describes colors by Hue (0–360° on the color wheel), Saturation (%), and Lightness (%). Our color picker lets you pick any color visually and instantly converts between all three formats, plus generates a complementary palette.
Split the 6-digit hex into three pairs: #RRGGBB. Convert each pair from hexadecimal to decimal. For #FF5733: FF = 255, 57 = 87, 33 = 51. So #FF5733 = rgb(255, 87, 51).
HEX and RGB both describe red/green/blue intensity — HEX uses hexadecimal, RGB uses decimal (0–255). HSL describes Hue (0–360°), Saturation (%), and Lightness (%), which is often more intuitive for design since you can adjust tints/shades with one value.
Complementary colors are 180° apart on the color wheel. For hue H, the complement is (H + 180) mod 360. Analogous colors are ±30°, triadic are ±120°. Our tool generates a palette of five harmonious colors automatically.
Yes. Use hex (#FF5733), rgb(255, 87, 51), rgba(255, 87, 51, 0.5) for transparency, hsl(11, 100%, 60%), or 8-digit hex with alpha (#FF573380). All are valid CSS. Our copy buttons give you ready-to-paste values.
Hex is most compact for solid colors. HSL is best for creating variations (tints/shades) by adjusting Lightness. RGB is useful for programmatic channel manipulation. Use rgba() or 8-digit hex for transparency.
Saturation is color intensity — 100% is vivid, 0% is gray. Lightness controls brightness — 0% is black, 50% is the pure color, 100% is white. E.g., hsl(0, 100%, 50%) is pure red, hsl(0, 100%, 25%) is dark red.
Selected Color
#3B82F6
≈ blue-500