Can I type a HEX code directly instead of using the color wheel?

Yes, type or paste a 6-digit HEX code into the HEX field and the other formats update automatically.

What's the difference between RGB and HSL?

Both represent the same color; RGB uses red/green/blue intensity while HSL uses hue, saturation and lightness.

Color Picker

Pick a color and get its HEX, RGB and HSL codes

HEX

RGB

HSL

Quick Presets

What is the Color Picker?

The Color Picker lets you choose any color visually and instantly get its code in three common web formats — HEX, RGB and HSL — ready to paste into CSS, design tools or code.

How to Use It

Click the color swatch to open your browser's color picker, or type a HEX code directly.
Or click a quick preset for a commonly used color.
Copy any format — HEX, RGB or HSL — using the copy button next to each field.

Color Formats Explained

HEX (e.g. #4e73df) — a six-digit hexadecimal code widely used in CSS and web design.
RGB (e.g. rgb(78, 115, 223)) — defines red, green and blue intensity from 0–255.
HSL (e.g. hsl(228, 68%, 59%)) — defines hue, saturation and lightness, which is often more intuitive for adjusting shades.

Frequently Asked Questions

Yes — type or paste a 6-digit HEX code (e.g. #ff6b35) directly into the HEX field, and the swatch and other formats update automatically.

Both represent the same color, but RGB defines it by red/green/blue intensity while HSL defines it by hue, saturation and lightness — HSL is often easier for humans to reason about when lightening or darkening a color.