Color Theory Basics Every Designer Should Know

Color is one of the most powerful tools in a designer's kit and one of the least formally understood. Many designers develop color intuition through experience, but having a framework for color relationships makes decisions faster, more defensible, and more consistent.

This guide covers the fundamentals of color theory as they apply to digital design: color models, harmony, contrast, and the practical use of color palettes.

Color Models: RGB vs HSL vs HEX

Before discussing color theory, it helps to understand how digital colors are described.

RGB (Red, Green, Blue)

RGB is the native color model for screens. Every color on a display is produced by mixing red, green, and blue light at different intensities. Each channel ranges from 0 to 255.

• rgb(255, 0, 0) = pure red
• rgb(0, 0, 255) = pure blue
• rgb(0, 0, 0) = black
• rgb(255, 255, 255) = white

RGB is how your monitor actually works, but it is not intuitive for design thinking. Knowing that you want "a slightly darker orange" is harder to express in RGB terms than in HSL.

HSL (Hue, Saturation, Lightness)

HSL maps more closely to how people intuitively think about color:

• Hue: The color identity, measured in degrees around a color wheel (0° = red, 120° = green, 240° = blue, 360° = red again)
• Saturation: The intensity of the color, from 0% (gray) to 100% (fully saturated)
• Lightness: The brightness, from 0% (black) to 100% (white), with 50% being the "pure" color

Want a slightly darker version of your blue? Decrease the L value. Want a more muted version? Decrease the S value. HSL makes these adjustments predictable.

HEX

HEX is shorthand for RGB expressed in hexadecimal notation. #FF0000 is pure red: FF for red (255), 00 for green (0), 00 for blue (0). HEX is commonly used in CSS, design tools, and when copying colors between applications. It is RGB, just in a different notation.

The Color Wheel and Color Relationships

The traditional color wheel arranges hues in a circle, showing how they relate to each other. The standard wheel places:

• Primary colors (red, blue, yellow in traditional color theory; red, green, blue in digital/light-based color)
• Secondary colors at the midpoints between primaries (orange, green, violet)
• Tertiary colors between primaries and secondaries

Color harmony describes pleasing combinations derived from systematic relationships on this wheel.

Complementary Colors

Colors directly opposite each other on the wheel. Examples: blue and orange, red and green, yellow and purple.

Complementary pairs create high contrast and visual energy. They are effective for call-to-action buttons against backgrounds, highlighting key information, and creating visual tension in illustrations. Used in large doses, they can feel aggressive; used for accents, they create emphasis.

Analogous Colors

Two or more colors that sit next to each other on the color wheel. Examples: blue, blue-green, and green; red, red-orange, and orange.

Analogous palettes feel cohesive and natural because the colors share similar underlying hues. They create a unified, harmonious feel without strong contrast. Effective for backgrounds, illustrations with a specific mood, and interfaces where you want a calm, consistent atmosphere.

Triadic Colors

Three colors evenly spaced around the wheel, 120° apart. Examples: red, yellow, blue; orange, green, violet.

Triadic schemes offer strong visual contrast while remaining balanced. They are more complex to use than complementary pairs but can produce rich, vibrant palettes when handled carefully.

Split-Complementary

A color plus the two colors on either side of its complement. Examples: blue with yellow-orange and red-orange.

This scheme reduces the intensity of a true complementary pair while maintaining contrast. It is often easier to work with than pure complementary colors.

Understanding Color Contrast

Contrast is the difference in visual properties between two adjacent colors or elements. In UI and web design, contrast matters for three reasons:

Readability and Accessibility

The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios for text:

• Level AA (minimum standard): 4.5:1 ratio for normal text, 3:1 for large text (18pt+ or bold 14pt+)
• Level AAA (enhanced standard): 7:1 ratio for normal text, 4.5:1 for large text

Contrast ratios are calculated from the relative luminance of the foreground and background colors. White text on a white background has a ratio of 1:1 (no contrast). Black text on white has a ratio of 21:1 (maximum contrast).

Many interfaces fail accessibility requirements simply because designers choose text or icon colors that look "good enough" visually but do not meet the mathematical threshold.

Visual Hierarchy

High-contrast elements attract attention. Low-contrast elements recede. Designers use contrast to guide the user's eye: the most important action on a page should have the highest contrast. Supporting information can have lower contrast to visually indicate secondary importance.

Depth and Dimension

Subtle contrast differences between adjacent areas create the perception of depth. Card components with a slightly different background than the page, shadows defined by color rather than just opacity, and gradient backgrounds all use contrast to create spatial relationships.

Building a Color Palette for UI

A functional UI color palette typically includes:

Neutral scale: 8-12 shades from near-white to near-black. Used for text, backgrounds, borders, and most UI elements. These should be slightly warm or cool to complement the brand color, not pure grays.

Primary brand color: The main color used for primary actions, links, and brand elements. Should have a full range of tints (lighter versions) and shades (darker versions) available.

Semantic colors: Defined colors for specific meanings:

• Success: typically green
• Warning: typically amber or orange
• Error/Danger: typically red
• Info: typically blue

Accent color (optional): A secondary brand color used sparingly for emphasis, decorative elements, and variety.

Color in Dark Mode

Dark mode reverses the typical light-on-dark expectation. Several principles apply specifically to dark mode:

Avoid pure black backgrounds. True black (#000000) creates harsh contrast with most foreground elements. Dark gray (#121212 to #1e1e1e) feels softer and more professional.

Desaturate colors. Fully saturated colors look garish on dark backgrounds. Reduce saturation by 15-30% for dark mode variants.

Maintain contrast ratios. Meeting WCAG contrast standards is just as important in dark mode. Light text on dark backgrounds needs the same 4.5:1 minimum.

Use elevation to show hierarchy. In dark mode, lighter surfaces appear elevated. Cards, modals, and dropdowns are lighter than the base background.

Picking Colors That Work Together

Start with your primary color and one of the harmony relationships above. Then build a neutral scale that complements it. Add semantic colors (error red, success green) that do not clash with your primary color. Test all combinations against the WCAG contrast requirements before finalizing.

A color picker tool that shows hex, RGB, and HSL values simultaneously makes this process faster, letting you adjust individual channels (hue, saturation, lightness) without guessing.