Color & Design

Color Picker

Pick a color with the swatch picker or type any HEX, RGB or HSL value. Every format updates live and copies with one tap.

Color & design

Pick and inspect a color

Local only

Color pickerHEX, RGB or HSL

#2563EBPreview of your selected color

HEX#2563eb

RGBrgb(37, 99, 235)

HSLhsl(221, 83.2%, 53.3%)

CSS variable--brand: #2563eb;

Tints and shades

Matching palette

Nothing leaves your browser

Colors are calculated on your device — no account, no uploads, no tracking of what you pick.

HEX, RGB and HSL explained

HEX packs red, green and blue into six hexadecimal digits — the format most designers paste around. RGB shows the same three channels as numbers from 0 to 255. HSL describes hue, saturation and lightness, which makes it far easier to build a consistent scale by hand.

Tips for choosing brand colors

Pick one strong hue, then generate tints and shades instead of inventing new colors.
Check text contrast before committing — a beautiful color that cannot be read costs you users.
Store the value as a CSS variable so a future rebrand is a one-line change.

Good to know

Frequently asked questions

Can I pick a color from an image or my screen?

The native color picker in Chrome and Edge includes an eyedropper that samples anywhere on your screen. Open the picker and choose the eyedropper icon.

Which formats are accepted?

HEX (3, 4, 6 or 8 digits), rgb()/rgba(), hsl()/hsla() and common named colors such as tomato-free basics like red, navy and gold.

Are the tints and shades accurate?

Yes — tints mix the color towards white and shades towards black in even steps, which is how most design systems build a color scale.

Is my color sent anywhere?

No. Everything runs in your browser, so nothing is uploaded or stored.

Pick and inspect a color

Tints and shades

Matching palette

HEX, RGB and HSL explained

Tips for choosing brand colors

Frequently asked questions

Related tools

Color Converter

HEX to RGB Converter

RGB to HEX Converter