Color is the first thing people notice — before your layout, before your copy, before anything. Get the colors right and everything looks professional. Get them wrong and even a great product feels cheap. Here are the fundamentals.

How Colors Are Represented: HEX, RGB, HSL

On the web and in design, colors are described in a few standard ways:

  • HEX — a six-character code like #FF5733. Pairs of characters represent red, green, and blue. The most common format on the web.
  • RGB — three numbers from 0-255, like rgb(255, 87, 51). Same idea as HEX, different notation.
  • HSL — Hue, Saturation, Lightness. More intuitive for humans — hue is the color, saturation is intensity, lightness is brightness.

The Three Building Blocks of Color

  • Hue — the base color (red, blue, green, etc.). Measured in degrees 0-360.
  • Saturation — how intense the color is. 0% is gray, 100% is vivid.
  • Lightness (or Brightness) — how light or dark. 0% is black, 100% is white.

Common Color Schemes That Just Work

  • Complementary — colors opposite each other on the wheel (blue + orange). High contrast, eye-catching.
  • Analogous — colors next to each other (blue, teal, green). Calm and harmonious.
  • Monochromatic — one hue at different lightness levels. Clean, minimal, professional.
  • Triadic — three colors evenly spaced on the wheel. Vibrant but balanced.

Rules of Thumb for Great Palettes

  • 60-30-10 rule — use 60% dominant color, 30% secondary, 10% accent
  • Limit to 3-5 colors — too many colors looks chaotic
  • Pick one accent color — for buttons, links, and calls to action
  • Check contrast — text needs enough contrast against its background to be readable
  • Consider mood — blue feels trustworthy, red feels urgent, green feels calm

Where to Get Inspiration

  • Nature — sunsets, forests, oceans always have perfect color combos
  • Photos — extract a palette from a photo you love
  • Existing brands — study palettes of brands you admire (but don't copy)
  • Color tools — use a palette generator to explore combinations

Extract colors and build palettes with the free color tool →