📖

Colors Tutorial Tools

27 free tools - running directly in your browser.

Colors HOME

Introduction to CSS colors and how they work on the web

Color Names

All 140+ CSS named colors with live previews

Color Values

Understanding RGB, HEX, HSL, and other color value formats

Color Groups

Colors organized by visual groups – reds, blues, greens and more

Color Shades

Generate shades from light to dark for any color

Color Picker

Interactive color picker with all format outputs

Color Mixer

Mix two colors together and see the blended result

Color Converter

Convert between HEX, RGB, HSL, HWB, and CMYK formats

Color RGB

Deep dive into the RGB color model with interactive sliders

Color HEX

Understanding hexadecimal color codes and notation

Color HSL

Hue, Saturation, Lightness – the most intuitive color model

Color HWB

Hue, Whiteness, Blackness color model explained

Color CMYK

Cyan, Magenta, Yellow, Key – colors for print

Color NCol

Natural Color System notation explained

Color Gradient

CSS gradient builder with live preview and code output

Color Theory

Fundamentals of color theory for designers and developers

Color Wheels

Interactive color wheel explorer with harmony rules

Color currentcolor

CSS currentcolor keyword explained with examples

Color Hues

Explore all hues around the 360° color wheel

Color Schemes

Complementary, analogous, triadic, and more scheme types

Color Palettes

Curated color palettes for design inspiration

Color Brands

Official brand colors for popular companies

Color W3.CSS

W3.CSS framework color classes reference

Color Metro UI

Metro UI design system color palette

Color Win8

Windows 8 style color palette reference

Color Flat UI

Flat UI design colors for modern interfaces

Color Psychology

How colors affect emotions, perception, and behavior