Color Picker

How to Use

1. Click the colour swatch or type a HEX value into the input field.
2. The HEX, RGB, HSL, and CSS variable values update instantly.
3. Click any output field to copy its value to the clipboard.
4. Scroll down to see 10 tints and 10 shades — click any swatch to copy its HEX.

What Is It?

A colour picker lets designers and developers select colours and get their values in different formats for use in code. HEX codes are used in HTML/CSS, RGB values in JavaScript and CSS, and HSL is popular for programmatic colour manipulation. Our picker also generates a palette of tints and shades derived from your chosen colour.

Why Use Our Tool?

• ✓Outputs four formats simultaneously: HEX, RGB, HSL, and CSS variable.
• ✓Tints and shades palette — 20 swatches derived from your colour.
• ✓Manual HEX entry supports both 6-digit and 3-digit shorthand.
• ✓Click any value or swatch to copy — no buttons needed.

Frequently Asked Questions

• What colour formats does it output?
  HEX (e.g. #2563eb), RGB (rgb(37,99,235)), HSL (hsl(224,89%,53%)), and a CSS custom property (--color: #2563eb).
• Can I enter a HEX value manually?
  Yes. Type directly into the HEX input field and press Enter or click away. Shorthand 3-digit hex values are also supported.
• What are tints and shades?
  Tints are lighter versions of your colour (mixed with white). Shades are darker versions (mixed with black). Click any swatch to copy its HEX value.
• Is it free?
  Yes, completely free.

Related Tools