About the Color Analysis Tool
Understanding a color deeply means going beyond its appearance. This analysis tool breaks down any color into its fundamental measurable properties — relative luminance, saturation, hue angle, perceived temperature, and psychological category. These metrics help designers, developers, and brand strategists make data-informed decisions rather than relying on gut feeling alone.
Relative luminance is the most important accessibility metric: it determines how much light a color reflects, which directly affects readability when text is placed on or near it. Perceived temperature tells you whether the color reads as warm (reds/oranges/yellows) or cool (blues/greens/purples), which strongly influences the emotional tone of a design. The psychological label maps the hue to its most common emotional and cultural associations.
The automated insights section translates all these numbers into plain-English recommendations — ideal for design documentation, brand guidelines, and accessibility reports. The harmony swatches give you instant suggestions for colors that work well alongside your analyzed color.
Frequently Asked Questions
What is relative luminance? +
Relative luminance is a measure of the perceived brightness of a color, ranging from 0 (absolute black) to 1 (absolute white). It is calculated using a weighted sum of the linearized RGB values: L = 0.2126R + 0.7152G + 0.0722B. The weighting reflects the human eye's unequal sensitivity to different wavelengths — we are most sensitive to green, moderately sensitive to red, and least sensitive to blue. Luminance is the key input to the WCAG contrast ratio formula and is used in accessibility testing, image processing, and HDR tone mapping.
What does color temperature mean in design? +
Color temperature in design refers to the warm-cool distinction on the color wheel. Warm colors (reds, oranges, yellows — roughly 0°–60° and 300°–360° HSL hue) are associated with fire, sun, and energy. They advance visually — they appear to come forward and draw attention. Cool colors (blues, greens, purples — roughly 90°–270°) recede visually and create feelings of calm, distance, and professionalism. This is distinct from color temperature in photography (measured in Kelvin), though the intuition is the same: lower Kelvin = warmer (more orange), higher Kelvin = cooler (more blue).
How is saturation measured? +
In the HSL model, saturation is expressed as a percentage from 0% (pure grey — no color) to 100% (fully vivid). At 0% saturation, all hues become identical grey; only the lightness value distinguishes them. High saturation colors feel vibrant and energetic; low saturation colors feel calm, professional, and sophisticated. In the HSV model, saturation is calculated differently but expresses a similar concept. Most design systems include both highly saturated accent colors and desaturated neutral grays to create visual hierarchy.
What is a hue angle? +
The hue angle is a number from 0° to 360° that represents the position of a color on the color wheel. 0° and 360° are red; 120° is green; 240° is blue. Values in between are the mixed colors: 60° = yellow, 180° = cyan, 300° = magenta/pink. The hue angle is the H in both HSL and HSV models. Two colors' hue angles can be subtracted to find their angular relationship on the wheel — which is the basis for all color harmony calculations (complementary = 180° apart, triadic = 120° apart, etc.).
How are color harmonies calculated? +
Color harmonies are generated by taking the input color's HSL values and rotating the hue angle by fixed amounts. Complementary: hue + 180°. Triadic: hue + 120° and hue + 240°. Split-complementary: hue + 150° and hue + 210°. Analogous: hue ± 30° and hue ± 60°. The saturation and lightness values are preserved from the original color. The resulting colors are converted back to HEX for display. This mathematical approach ensures the relationships are geometrically precise rather than subjectively chosen.
What is the dominant hue category? +
The dominant hue category classifies a color into its nearest named hue family: red, red-orange, orange, yellow-orange, yellow, yellow-green, green, blue-green, blue, blue-violet, violet, or red-violet. This categorization is based on hue angle ranges and is the basis for the color's psychological and seasonal profile shown in the analysis. It also determines the color temperature classification: red through yellow (0°–60° and 300°–360°) are warm; green through violet (90°–270°) are cool; yellow-green and red-violet are neutral.
What is the "purity" metric? +
Purity (also called excitation purity or colorimetric purity) measures how close a color is to the spectral pure hue of its dominant wavelength. A fully saturated color at medium lightness has high purity; a muted, greyish, or very light or dark color has lower purity. In this tool, purity is an approximate measure derived from HSL saturation and distance from 50% lightness — a color is least pure when it's near 0% or 100% lightness. High-purity colors are vivid and eye-catching; low-purity colors are subtle and sophisticated.
How can I use this analysis for accessibility decisions? +
The luminance value shown here is the direct input to the WCAG contrast ratio formula. If your color's luminance is below 0.18, it is a relatively dark color — white text will likely have good contrast on it. If it's above 0.40, it is a relatively light color — dark text will likely be readable on it. For a precise WCAG pass/fail result, copy your color's HEX and paste it into our Contrast Checker tool, which calculates the exact ratio between two colors and shows the AA and AAA compliance results with sample text previews.
