All tools
🎨 IMAGE & MEDIA

Color Picker & Palette

Pick any color — get HEX, RGB, HSL, CMYK values instantly. Generate palettes, explore color harmonies, and extract dominant colors from images.

Click to pick
HEX#3B82F6
RGBrgb(59, 130, 246)
HSLhsl(217, 91%, 60%)
CMYKcmyk(76%, 47%, 0%, 4%)

Color Analysis

Brightness

Light

vs White

3.68:1

vs Black

5.71:1

Nearest Name

Royal Blue

Palette Generator

Shades (darker)

#0B64F4
#0950C3
#073C92
#052861
#021431

Tints (lighter)

#6DA2F8
#9EC1FA
#CEE0FD
#FFFFFF
#FFFFFF

Complementary

#3B82F6
#F6AF3C

Analogous (±30°)

#3CE0F6
#3B82F6
#523CF6

Triadic (±120°)

#3B82F6
#F63C83
#83F63C

Image Color Extractor

Upload an image to extract its dominant colors.

🖼️

Drop an image here

or click to browse — PNG, JPG, WebP

Understanding Color Formats

Each color format is designed for a different purpose — screen rendering, design systems, or professional printing.

HEX#3B82F6

Hexadecimal is the most common color format on the web. It encodes red, green, and blue channels as pairs of hex digits (00–FF), giving 16,777,216 possible colors. Used directly in CSS, SVG, and design tools like Figma.

RGBrgb(59, 130, 246)

RGB (Red, Green, Blue) expresses color as three integer values from 0 to 255. It maps directly to how screens emit light. CSS supports both rgb() and rgba() with an optional alpha channel for transparency.

HSLhsl(217, 91%, 60%)

HSL (Hue, Saturation, Lightness) is the most human-friendly format. Hue is a degree on the color wheel (0–360°), saturation controls intensity (0–100%), and lightness controls brightness (0% is black, 100% is white). Ideal for programmatic palette generation.

CMYKcmyk(76%, 47%, 0%, 4%)

CMYK (Cyan, Magenta, Yellow, Key/Black) is the standard for print. Unlike additive RGB, CMYK is subtractive — mixing inks absorbs light. Professional print workflows use CMYK values to match physical ink output on paper.

Frequently Asked Questions

What is a HEX color code and how do I read it?

A HEX color code is a 6-digit hexadecimal string prefixed with #. The first two digits represent red intensity (00–FF), the middle two represent green, and the last two represent blue. For example, #FF0000 is pure red, #00FF00 is pure green, and #0000FF is pure blue. Short-hand 3-digit codes like #F00 expand to #FF0000.

What is the difference between RGB and CMYK?

RGB is an additive color model used by screens: mixing all channels at full intensity produces white. CMYK is a subtractive model used in print: mixing all inks at full intensity produces near-black. RGB values cannot always be reproduced exactly in CMYK print because the color gamut of print is smaller than that of a display.

Why is HSL better for generating color palettes?

HSL lets you manipulate color properties independently. To create a lighter tint, increase the lightness value. To create a shade, decrease it. To find a complementary color, add 180° to the hue. To find analogous colors, add or subtract 30°. This predictable math makes HSL ideal for programmatic palette generation, which is exactly how this tool works.

What does the contrast ratio mean for accessibility?

The contrast ratio measures how distinguishable two colors are from each other. WCAG 2.1 requires a minimum 4.5:1 ratio for normal text and 3:1 for large text to meet AA compliance. A ratio of 1:1 means identical colors (no contrast), while 21:1 is the maximum (black on white). This tool shows the contrast of your selected color against both pure white and pure black.

How does the image color extractor work?

When you upload an image, the tool draws it to a hidden HTML5 canvas element, samples pixels across a grid, and then runs a simplified k-means clustering algorithm over the sampled pixels. The algorithm groups similar colors together and computes the centroid (average color) of each cluster, producing 5 representative dominant colors from your image.

What are complementary, analogous, and triadic colors?

These are classic color harmony schemes from color theory. Complementary colors sit opposite each other on the color wheel (180° apart) and create high-contrast, vivid combinations. Analogous colors are neighbors on the wheel (±30°) and create harmonious, low-contrast schemes. Triadic colors form an equilateral triangle on the wheel (±120°) and balance contrast with variety — popular in logo and brand design.

More free tools

Color contrast checker, JWT decoder, regex tester — all free, all in your browser.

Browse all tools