Free

Free Color Picker Online

A free color picker: pick any color and copy its HEX, RGB, and HSL codes instantly — with tints, shades, and contrast hints.

Free tool · No sign-up · Private

#E0263C

Readable text on this color: white

Copy color codes

HEX#E0263C
RGBrgb(224, 38, 60)
HSLhsl(353, 75%, 51%)

Tints

Shades

Curated palettes — click any swatch to use it

Neubrutalist

Sunset

Ocean

Forest

Pastel

Warm paper

Private by design. Everything runs 100% in your browser — colors you pick are never uploaded, stored, or sent anywhere.

About this tool

About the Color Picker

A color picker turns the vague idea of a color into exact codes you can use in code and design tools. Click anywhere on the picker or type a known value into this free online tool and instantly get the HEX, RGB, and HSL representations, each with a one-click copy button. Designers grab brand colors for mockups, developers paste values into CSS, and content creators build palettes for thumbnails and slides without opening heavy software.

Beyond the base color, the tool generates tints and shades so you can build a full scale from one starting point, and a readability hint tells you whether white or black text stays legible on top of it — a small detail that prevents real accessibility mistakes. Your recent colors are kept in a history on your device for the session, making it easy to compare options. Everything runs locally in the browser with no account and no tracking.

How it works

Three steps to the right color

Pick or type

Use the visual color picker for exploration, or type an exact hex code when you already know it.

Copy the code

Grab the HEX, RGB, or HSL value with one click — formatted and ready to paste into CSS or design tools.

Build a scale

Click any tint or shade to make it active, or start from a curated palette to get a harmonious set in seconds.

Good to know

Color formats explained

Three ways to write the same color — and when each one wins.

HEX — #E0263C

The web's shorthand: 6 hex digits for red, green, blue. Compact and universal in CSS. 3-digit shorthand (#E24) expands by doubling each digit.

RGB — rgb(224, 38, 60)

Red, green, blue as 0–255 numbers. Easiest to tweak programmatically and the format canvas, WebGL, and most APIs expect.

HSL — hsl(353, 74%, 51%)

Hue, saturation, lightness — the human-friendly one. Nudge the hue to find neighbors, drop saturation for muted tones, raise lightness for pastels.

Contrast matters

A beautiful color that nobody can read is a bug. The readable-text hint uses relative luminance — keep body text at strong contrast, especially on colored buttons.

Examples

From brand color to full scale

brand.css
:root {
  --brand: #e0263c;          /* HEX */
  --brand-rgb: 224, 38, 60;  /* RGB */
  --brand-hsl: 353 74% 51%;  /* HSL */
}
hover-state.txt
Button: #e0263c (base)
Hover:  mix 20% toward black
        → #b31e30 (a “shade”)

Generate the shade above with
one click — no guessing.

FAQ

Color questions

How do I copy a color code?
Pick a color with the visual picker or type a hex code, then hit Copy next to the HEX, RGB, or HSL value. The exact string (e.g. rgb(224, 38, 60)) lands on your clipboard, ready to paste into CSS.
What hex formats are accepted?
Both 6-digit (#e0263c) and 3-digit shorthand (#e24, which expands to #ee2244), with or without the leading #. Anything else shows a friendly error instead of guessing.
How are tints and shades generated?
Tints mix your color toward white and shades toward black in four even steps (20%, 40%, 60%, 80%). Click any swatch to make it the active color and build a full scale from it.
What does the “readable text” hint mean?
It computes the color's relative luminance and tells you whether near-black or white text stays legible on top of it — the same contrast logic behind WCAG accessibility guidelines. Aim for strong contrast for body text.
Is my color history stored anywhere?
No. The picker runs entirely in your browser with no uploads, no cookies, and no history tracking. Your brand colors stay yours.
Can I copy HEX, RGB, and HSL codes at once?
Yes. Pick or enter any color and all three formats appear together, each with its own copy button — grab whichever your project needs.

Keep exploring

Related tools

Free
Image Converter

Convert images between PNG, JPG, and WebP.

Open tool →Free
Text to Image

Turn words into shareable typography posters.

Open tool →API
Website Screenshot

Capture any URL as a full-page screenshot.

Open tool →

For developers

Need this programmatically?

YATools also exposes simple REST APIs for screenshots, audio, documents, and more — free tier included.

Explore the API →