Color Palette

Color harmony rules — what the terms actually mean

Color harmony rules are based on geometric relationships on the color wheel, which arranges hues by how they look when mixed with light (additive color, used in screens). Each rule produces palettes with a predictable emotional quality.

Complementary colors sit directly opposite each other on the wheel — blue and orange, red and green, yellow and purple. They create maximum contrast and visual tension. Used well, they create vibrant, high-energy designs; used poorly, they vibrate against each other and become difficult to read.

Analogous colors are three to five colors that sit next to each other on the wheel. They feel cohesive and natural — the way a sunset moves from yellow through orange to red. They lack contrast, so they work best with one dominant hue and the others as accents.

Triadic palettes use three colors equally spaced around the wheel (120° apart). They maintain visual interest while being more balanced than complementary pairs. Tetradic (rectangular) palettes use four colors forming two complementary pairs — the richest palette but the hardest to balance.

Split-complementary takes one base color and the two colors on either side of its complement, producing contrast with more nuance than a pure complementary pair.

HEX vs RGB vs HSL — when to use each

HEX (#RRGGBB) is the most common format in web development because it is compact and works everywhere CSS does. It encodes three bytes (red, green, blue, each 0–255) as two hexadecimal digits each. #FF0000 is red, #000000 is black, #FFFFFF is white. Shorthand is available when digits repeat: #FF0000 can be written #F00.

RGB (rgb(255, 0, 0)) is more readable than HEX for humans who can map 0–255 values to color intensity. It is identical in meaning to HEX and equally supported. When you need semi-transparency, use RGBA (rgba(255, 0, 0, 0.5)) — the alpha channel accepts values 0 (fully transparent) to 1 (fully opaque).

HSL (hsl(0, 100%, 50%)) stands for Hue, Saturation, Lightness. Hue is the angle on the color wheel (0°=red, 120°=green, 240°=blue). Saturation is how vivid versus grey the color is (0% is grey, 100% is fully saturated). Lightness is how light or dark it is (0% is black, 100% is white). HSL is by far the most intuitive format for making design adjustments — to make a color lighter, increase L; to make it less vivid, decrease S; to shift the hue, adjust H.

How image color extraction works

Extracting a color palette from an image is a computational problem: given millions of pixels with arbitrary colors, find a small set of representative colors. This tool uses a quantization approach that clusters similar pixel colors into groups and then picks a representative color for each group.

The process works by sampling pixels across the image (skipping some for performance), placing each sampled pixel's RGB value in three-dimensional color space, and then grouping nearby points using a clustering algorithm. The center of each cluster becomes one palette color. The most common approach is median-cut quantization, which recursively divides the color space into boxes and picks the median color in each box.

Results depend heavily on image content. A photograph with a dominant sky will yield blues; a forest image will yield greens. For brand analysis or color matching, the extracted palette tells you what colors are most visually prominent — which may or may not be the designer's intended brand colors. For best extraction results, use images with distinct areas of solid or near-solid color rather than highly textured or photographic images with continuous tonal gradients.

Color contrast and accessibility — WCAG requirements explained

Web Content Accessibility Guidelines (WCAG) specify minimum contrast ratios between text and background colors to ensure readability for users with low vision or color blindness. The contrast ratio is calculated from the relative luminance of the two colors and ranges from 1:1 (identical colors, no contrast) to 21:1 (pure black on pure white, maximum contrast).

WCAG 2.1 Level AA — the most widely required compliance standard — specifies: 4.5:1 minimum contrast for normal text (below 18pt or 14pt bold), and 3:1 minimum contrast for large text (18pt+ or 14pt+ bold) and UI components like buttons and form inputs. WCAG Level AAA is stricter: 7:1 for normal text, 4.5:1 for large text.

Common palette mistakes that fail WCAG: light grey text on a white background (very popular in modern "clean" design but frequently fails the 4.5:1 threshold), tinted text on a tinted background of similar lightness, and disabled-state UI components that drop below 3:1. When you extract a palette from a brand image or generate a harmony palette, always check the contrast ratio of any text/background combination before using it in a UI. Browser DevTools (Chrome's accessibility panel and Firefox's colour-contrast checker) evaluate contrast in real time. For palette planning before production, tools like the WebAIM Contrast Checker accept two hex codes and immediately report the WCAG pass/fail status.