Color Picker

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.

Current Color

Selected Color

#3B82F6

≈ blue-500

HEX#3B82F6
RGBrgb(59, 130, 246)
HSLhsl(217, 91%, 60%)

Pick a Color

Click swatch to pick

R
G
B
H (°)
S (%)
L (%)

CSS Color Values

HEX#3B82F6
RGBrgb(59, 130, 246)
RGBArgba(59, 130, 246, 1)
HSLhsl(217, 91%, 60%)
Tailwindblue-500

Opacity Gradient (0% → 100%)

0%25%50%75%100%

Complementary Color Palette

Click any color below to select it. The palette includes your base color plus complementary, analogous, and triadic harmonies.

Recently Picked Colors

Quick Answer

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.

Key Facts

  • HEX codes use base-16: digits 0–9 and A–F, where FF = 255 (maximum)
  • RGB values range 0–255 per channel; 16,777,216 total possible colors
  • HSL Hue is in degrees (0–360°); 0 = red, 120 = green, 240 = blue
  • Complementary colors are 180° apart on the color wheel
  • CSS supports hex (#RRGGBB), rgb(), rgba(), hsl(), and hsla() formats
  • Shorthand hex (#RGB) doubles each digit: #F00 equals #FF0000
  • Alpha/transparency can be added: #RRGGBBAA or rgba(r,g,b,a)

Frequently Asked Questions

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.