COLOR PICKER

How to pick a color

1. 1

   Click the swatch to open your browser's native color picker.

2. 2

   The HEX, RGB, and HSL values update instantly as you pick.

3. 3

   Fine-tune a value directly by editing the HEX field or the individual R/G/B or H/S/L numbers.

4. 4

   Click Copy next to any format to copy it to your clipboard.

Questions

What's the difference between HEX, RGB, and HSL?

HEX (#ff6a35) and RGB (rgb(255, 106, 53)) describe a color by its red, green, and blue components — HEX is just RGB written in base 16. HSL (hue, saturation, lightness) describes the same color in terms that are easier to reason about, like 'a bit lighter' or 'more saturated'.

Can I type in exact values instead of using the picker?

Yes. Edit the HEX field directly, or adjust the individual R/G/B or H/S/L number inputs — every field stays in sync with the others.

Is my color data sent anywhere?

No. All conversion happens locally in your browser with JavaScript — nothing is uploaded, logged, or stored.

Does this support alpha/transparency?

Not currently — the tool works with opaque HEX, RGB, and HSL values, matching what your browser's native color picker provides.

Related tools

• Color Palette GeneratorPick a base color and a harmony, get five colors that work together.
• Random Color GeneratorGenerate random colors with HEX, RGB, and HSL values, click to copy.
• CMYK ConverterConvert a color between HEX, RGB, and CMYK, all fields updating together.
• Color Blindness SimulatorPreview a color, palette, or image under protanopia, deuteranopia, tritanopia, and achromatopsia.
• Accessible Color Palette GeneratorGenerate a tint/shade scale from a base color with WCAG contrast ratios against black and white.
• Color Temperature ConverterConvert a color temperature in Kelvin to RGB/HEX, with common light-source presets.
• CSS Gradient GeneratorBuild linear, radial, and conic gradients and copy the CSS.
• Box Shadow GeneratorBuild single or layered box-shadows and copy the CSS.