Explore Colors. Create Better Designs.
Color Encyclopedia & Free Color Tools
Free color references and tools for designers, developers, creators, and everyone else.
Pick a color, get every code
Click the wheel or type any HEX, RGB or HSL value. Everything runs in your browser.
#4169E1
rgb(65, 105, 225)
hsl(225, 73%, 57%)
71%, 53%, 0%, 12%
Library at a glance
Popular colors
See all 720 colors →Browse by color family
All families →Free color tools
All tools →Color Picker
Pick any color and copy its HEX, RGB, HSL and CMYK values.
Color Converter
Convert between HEX, RGB, HSL, HSV, HWB and CMYK instantly.
Color Palette Generator
Generate harmonious palettes and export them as CSS, JSON, SVG or PNG.
Contrast Checker
Check text and background contrast against WCAG AA and AAA.
Gradient Generator
Build linear and radial CSS gradients with multiple color stops.
Image Color Extractor
Pull a color palette out of any image, privately in your browser.
Color Mixer
Mix two colors in any proportion and see the in-between steps.
Color Blindness Simulator
Preview colors and images as people with color vision deficiency may see them.
Color palettes
All palettes →Learn about color
All guides →HEX Color Codes Explained
What the six digits mean, how shorthand works and how to read any #RRGGBB value.
RGB Colors Explained
How screens mix red, green and blue light, and how to write RGB values.
HSL Colors Explained
Hue, saturation and lightness, and why HSL is handy for building color scales.
CMYK Colors Explained
The print color model, and why CMYK values from a screen conversion are only a reference.
Color Theory Basics
The color wheel, hue, saturation, lightness and the main color harmonies.
Color Contrast and Accessibility
How contrast ratios work, the WCAG thresholds, and how to pick readable text colors.
How to Choose a Color Palette
A practical method for choosing colors that match, from first color to final export.
Quick answers about color
What is a HEX color code?
A HEX color code is a six-digit hexadecimal number written after a #. The first two digits set the amount of red, the next two green and the last two blue. For example #FF0000 is pure red, #00FF00 is pure green and #0000FF is pure blue.
What is the difference between RGB and CMYK?
RGB mixes red, green and blue light and is used by screens. CMYK mixes cyan, magenta, yellow and black ink and is used for printing. A color that looks bright on a screen can print duller, so treat CMYK values from any converter as a reference.
What contrast ratio is needed for readable text?
WCAG level AA asks for at least 4.5:1 for normal text and 3:1 for large text and interface components. Level AAA asks for 7:1 for normal text. The contrast checker shows all of these for any pair of colors.
Are my images or colors uploaded anywhere?
No. The tools run entirely in your browser. The image color extractor reads your picture with the Canvas API on your own device and never sends it to a server.
Where do the color names come from?
Names come from the CSS color specification and from the CC0-licensed XKCD Color Survey, with duplicates and unsuitable names removed. Each color page states which source its name comes from.