Learn
Color, explained.
Short, plain-language guides to the color formats, theory, and quirks you run into every day. 16 guides, a few minutes each.
Start here · Guide 1 of 6
What are HEX Colors?
Hex colors explained: how hex color codes like #FF5733 work, how #RRGGBB maps to RGB, what shorthand hex means and how to convert hex to RGB. Read on.
Read the guide 4 min read
Up next · Guide 2 of 6
What are RGB colors?
RGB color explained: how red, green and blue - 255 values make every color on screen, how to read an RGB color code, RGB vs HEX, and RGBA. Learn it fast.
Read the guide 3 min read
Up next · Guide 3 of 6
What are HSL colors?
HSL color explained: how hue, saturation and lightness define a color, how the HSL color space differs from RGB, and how to use HSL and HSLA in CSS. Read on.
Read the guide 4 min read
Up next · Guide 4 of 6
What are CMYK colors?
What is CMYK? Learn how the CMYK color model works, how it differs from RGB, and why print looks duller than your screen, plus how to convert. Read on.
Read the guide 5 min read
Up next · Guide 5 of 6
What Are Pantone Colors?
Learn what Pantone colors are, how the Pantone Matching System and color codes work, and how Pantone compares to CMYK, RGB and HEX for print. Read on.
Read the guide 6 min read
Up next · Guide 6 of 6
What Is Color Harmony?
Color harmony explained: complementary, analogous, triadic and other harmonies, and how balanced color relationships make a design feel right. Read on.
Read the guide 4 min read
Start here
New to color on screen and in print? These six build on each other.
5 guides
Color formats
HEX, RGB, HSL, CMYK, and Pantone: what each is for and when to use it.
- HEX What are HEX Colors? Hex colors explained: how hex color codes like #FF5733 work, how #RRGGBB maps to RGB, what shorthand hex means and how to convert hex to RGB. Read on.
- RGB What are RGB colors? RGB color explained: how red, green and blue - 255 values make every color on screen, how to read an RGB color code, RGB vs HEX, and RGBA. Learn it fast.
- HSL What are HSL colors? HSL color explained: how hue, saturation and lightness define a color, how the HSL color space differs from RGB, and how to use HSL and HSLA in CSS. Read on.
- CMYK What are CMYK colors? What is CMYK? Learn how the CMYK color model works, how it differs from RGB, and why print looks duller than your screen, plus how to convert. Read on.
- Pantone What Are Pantone Colors? Learn what Pantone colors are, how the Pantone Matching System and color codes work, and how Pantone compares to CMYK, RGB and HEX for print. Read on.
8 guides
Color theory
Harmony, value, temperature, and building palettes that work together.
- Warm & Cool What Is Color Temperature? Color temperature explained: how Kelvin is measured, warm vs cool light and colors, and how temperature affects lighting, design and photos. Read the guide.
- Tints & Shades Tints, Shades, and Tones Tint, shade and tone explained: see how adding white, black or gray changes a base color, and how to use each to build richer palettes. Read the quick guide.
- High & Low Key High-Key vs Low-Key Colors High-key vs low-key colors explained: how light and dark color schemes set mood in design, art and photography, with tips on using each well. Read the guide.
- Color Wheel Primary, Secondary, and Tertiary Colors Explained Primary, secondary and tertiary colors explained across RYB, RGB and CMYK, with how each one is mixed on the color wheel. Learn the basics in 5 minutes.
- Palettes What Is a Color Palette? What is a color palette? Learn the main palette types, how many colors to use and how to build one for your brand or website. Then try our palette tools.
- Value What Is Color Value and Why Does It Matter? Color value is how light or dark a color is. Learn why value drives contrast, readability and depth in design and art, and how to check it. Read the guide.
- Neutrals Understanding Neutral Colors Neutral colors explained: warm, cool and balanced grays, beiges and muted tones, plus how to build a neutral color palette for rooms, brands and UI.
- Harmony What Is Color Harmony? Color harmony explained: complementary, analogous, triadic and other harmonies, and how balanced color relationships make a design feel right. Read on.
3 guides
Light, screens & print
Why the same color looks different on paper, on phones, and in daylight.
- Light How Light Affects Color How light affects color: learn how light sources, reflection and surroundings change the colors we see, and why paint looks different at home. Read now.
- Screens Why Colors Look Different on Every Screen Why do colors look different on different screens? Learn how color gamut, calibration and color profiles change what you see, and how to fix it. Read on.
- Mixing Additive vs Subtractive Color Additive vs subtractive color explained: how RGB light adds up to white, how CMYK ink subtracts toward black, and why screens and print differ. Read on.
Put it into practice
Try what you just read with a free tool, or train your eye with a quick game.
Screen ↔ print
Color Converter
One color in every format: HEX, RGB, CMYK, HSL, OKLCH, and the nearest Pantone, updated as you type.
Ready to use
Color Palettes
Build your own palette, or browse a new one every day plus a hand-picked collection. Copy as HEX codes or CSS variables.
Daily puzzle
Hue Match
Match colors by eye with hue, saturation, and lightness sliders. Five daily colors, endless random rounds, or a whole palette in Swatch Match.