✔ 100% Free – No Signup Required
Home Utility Tools Color Picker
Design Tool

Color Picker & Palette Generator

Pick colors, convert HEX/RGB/HSL instantly, generate complementary palettes, build gradients, extract image colors, and check accessibility contrast.

Multi-Format Palette Generator WCAG Contrast
🎨
Color Picker
Click or type to change color
#F59E0B
Color Formats
All formats update instantly
HEX
#F59E0B
RGB
rgb(245,158,11)
HSL
hsl(38,92%,50%)
HSV
hsv(38,96%,96%)
CSS Named
–
RGB 0–1
rgb(0.96,0.62,0.04)
0.56
Luminance
AA ✓
White txt
AAA ✗
Black txt
🌗
Shades & Tints
Click any swatch to use that color
🎭
Color Palette Generator
Click any swatch to pick that color
🌈
CSS Gradient Builder
Build & copy linear gradients
Color 1
Color 2
135°
🖼️
Image Color Picker
Upload image → click to pick color
📁

Upload Image

jpg, png, gif, webp — max 5 MB
Click image to pick any color

🕐
Recent Colors
Last 12 picked colors
No history yet
❤️
Favorites
Saved to your browser
No favorites yet

How to Use the Color Picker

1

Pick a Color

Click the color input or type a HEX value. Use Eyedropper to pick any color from your screen.

2

Get All Formats

Instantly see HEX, RGB, HSL, HSV values — each with a one-click Copy button.

3

Generate Palettes

Switch between Complementary, Analogous, Triadic, Split-Complementary, and Monochromatic palettes.

4

Build & Export

Create CSS gradients, extract colors from images, and save favorites for future projects.

More Utility Tools

View All

Word Counter

Count words, characters, sentences with keyword density analysis.

Use Tool

Random Number Generator

Generate random numbers with custom ranges and bulk mode.

Use Tool

Base64 Encoder

Encode and decode Base64 with file upload and image preview.

Use Tool

Password Generator

Create cryptographically secure passwords instantly.

Use Tool

What is a Color Picker?

A color picker is an interactive tool that allows you to select any color and instantly see its value in multiple formats — HEX, RGB, HSL, and HSV. These formats are used across different design and development contexts: HEX and RGB are most common in web CSS, HSL is used in modern CSS variables, and HSV is preferred in design software like Photoshop and Figma.

How is Color Contrast Calculated?

WCAG (Web Content Accessibility Guidelines) defines contrast ratios to ensure readability for users with visual impairments. A contrast ratio of 4.5:1 is required for normal text (AA standard), and 7:1 for the highest level (AAA). Our tool calculates relative luminance using the formula: L = 0.2126R + 0.7152G + 0.0722B, then computes the ratio between foreground and background luminance values.

What are Color Harmonies?

Color harmonies are scientifically-based combinations of colors that are visually pleasing. Complementary colors sit opposite each other on the color wheel (maximum contrast). Analogous colors sit adjacent (harmonious, low contrast). Triadic uses three evenly-spaced hues. Split-complementary uses the two colors adjacent to the complement. Monochromatic uses different shades and tints of one hue for cohesion.