Color Weight

Dustin Brown

www.speckofdustin.com

Color-only Priority

Intended low prominence → high prominence

Lightness relationship

0 · Dark50Light · 100

Help with Color Weight

Color Weight helps you build a five-color palette with an intentional reading order. It separates one accent from four supporting colors through lightness, while letting their hue and chroma change.

Choose the accent first. Then shape the supporting colors and watch the illustration, interface previews, and color-only strip to judge where attention is likely to go.

Accent controls
Hue changes the color family. Lightness moves the accent from dark to light. Chroma controls how colorful it is. The tool remembers hue and chroma even when very dark, light, or neutral settings temporarily hide them.
Supporting lightness
Automatic places the supporting colors on the side of the accent with more usable lightness room. Choose Lighter or Darker when you want to hold a direction yourself.
Gap and Range
Gap sets the nearest lightness distance between the accent and its supports. Range spreads the four supports across a wider or narrower lightness interval. Range stops at 30 OKLab lightness points by design, keeping the four supporting colors related rather than turning them into a second full tonal scale. Drag the center of the graph band to move it; drag either end to stretch it.
Hue path and Chroma
Hue path describes how the supporting hues travel away from the accent. Hue offset sets the destination or amount of rotation. Chroma controls how colorful the supporting set can be. At some lightness and hue combinations, the tool reduces chroma to produce a displayable color.
Protect supporting tones
This keeps supporting lightness between 12 and 94 so the palette avoids pure black, pure white, and compressed tones. When the requested Gap and Range cannot fit, the readout explains what was reduced or whether the opposite lightness direction was used.
Set Priority
Select Set priority, then choose preview elements from most important to least important. The first receives the accent; the next four receive progressively quieter palette roles. Selecting any text in an interface assigns all text as one group. This records your intended hierarchy; it does not predict eye movement.
Color-only Priority
The equal-size swatches remove composition, scale, and placement so you can judge the palette alone. They run from lower intended prominence on the left to higher prominence on the right.
View and contrast checks
Luminance grayscale removes hue and chroma from the preview so you can inspect tonal hierarchy. Accessibility Contrast markers compare neighboring swatches using relative luminance. The preview readout flags strong competing edges, but size, position, surrounding colors, and adaptation can also change what attracts attention.
Measurements, approximations and references

Lightness is OKLab L on a 0–100 scale. Hue is OKLCH hue; the accent Chroma control requests chroma from 0–0.4 and the supporting Chroma control requests chroma from 0–0.18. Their percentages indicate position within those instrument ranges, not standardized saturation percentages. Mapping reduces chroma at fixed lightness and hue when a display color is unavailable. Measurements use final mapped RGB.

HSV Value is the largest encoded RGB channel. Relative luminance is weighted linear-light RGB. Both differ from OKLab lightness and from perceived brightness. Saturation, surroundings and adaptation also affect brightness. The Helmholtz–Kohlrausch effect describes saturation-related brightness differences at equal luminance; we do not simulate it.

Grayscale preserves each color’s relative luminance, not OKLab lightness. Palette swatches and exports remain in full color.

This focal-point rule is an authored heuristic, not a validated attention model. Model basis: Björn Ottosson’s OKLab. Perception context: The Brightness of Colour. Neither validates this particular palette rule.

Export palette

Five full-color roles, even when the preview is grayscale. JSON includes measurements and requested accent settings.