User Rating 0.0 ★★★★★

Total Usage 0 times

Category Graphic Generators

Primary Color (Hex)

Harmony Mode

Primary (60%)

Secondary (30%)

Accent (10%)

AppName Dashboard Settings

Card Title This preview demonstrates the 60-30-10 color distribution applied to a typical UI layout.

Saved Palettes

No saved palettes yet. Generate and save your first palette.

Is this tool helpful?

Your feedback helps us improve.

★ ★ ★ ★ ★

About

The 60-30-10 rule is a spatial distribution principle borrowed from interior design and applied to interface composition. 60% of visible area uses the dominant (primary) color, 30% uses a secondary, and 10% uses an accent. Violating these proportions produces visual fatigue or flat, unreadable layouts. This tool derives secondary and accent colors algorithmically from a single primary input. It rotates hue on the HSL wheel - secondary at 180° (complementary), accent at 120° (triadic) - then adjusts saturation and lightness to maintain a WCAG contrast ratio above 4.5:1 between text and background. The foreground color for each swatch is computed from relative luminance L, not guessed.

Limitation: this generator assumes an sRGB gamut. Wide-gamut displays (P3) may render colors slightly differently. The derived palette is a starting point. Real products require testing against actual content density and imagery.

Formulas

Relative luminance of a color determines whether black or white text is readable against it. The formula linearizes each sRGB channel then applies perceptual weighting coefficients.

L = 0.2126 ⋅ R_lin + 0.7152 ⋅ G_lin + 0.0722 ⋅ B_lin

Where each linearized channel C_lin is computed from the sRGB value C_sRGB (0 - 1 range):

{

C_lin = C_sRGB12.92 if C_sRGB ≤ 0.03928C_lin = pow(C_sRGB + 0.0551.055, 2.4) otherwise

The contrast ratio between two luminances:

CR = L₁ + 0.05L₂ + 0.05

Where L₁ is the lighter luminance and L₂ is the darker. A ratio ≥ 4.5 satisfies WCAG AA for normal text. Secondary hue is derived as H_sec = (H_pri + 180) mod 360. Accent hue is H_acc = (H_pri + 120) mod 360.

Where L = relative luminance, R_lin, G_lin, B_lin = linearized sRGB channels, CR = contrast ratio, H_pri = primary hue in degrees, H_sec = secondary hue, H_acc = accent hue.

Reference Data

Harmony Type	Hue Rotation	Use Case	Typical Contrast	Energy Level
Complementary	180°	High-impact CTAs, hero sections	High	Bold
Triadic	120° / 240°	Balanced dashboards, cards	Medium-High	Vibrant
Analogous	30° / 330°	Calm reading interfaces	Low	Soothing
Split-Complementary	150° / 210°	Versatile UI, less tension than complementary	Medium	Moderate
Tetradic (Rectangle)	90° / 180° / 270°	Complex data-heavy layouts	Variable	Rich
Monochromatic	0° (lightness shift)	Minimalist, editorial	Low	Subtle
60-30-10 Distribution	N/A	General UI composition	Enforced by rule	Balanced
WCAG AA Text	N/A	Body text on backgrounds	≥ 4.5:1	N/A
WCAG AA Large Text	N/A	Headings ≥ 18pt	≥ 3:1	N/A
WCAG AAA Text	N/A	Enhanced accessibility	≥ 7:1	N/A
Relative Luminance (Red)	N/A	sRGB coefficient	0.2126	N/A
Relative Luminance (Green)	N/A	sRGB coefficient	0.7152	N/A
Relative Luminance (Blue)	N/A	sRGB coefficient	0.0722	N/A
sRGB Linearization Threshold	N/A	Channel value ≤ 0.03928	Divide by 12.92	N/A
sRGB Gamma	N/A	Channel value > 0.03928	Power 2.4	N/A

Frequently Asked Questions

Random color generation ignores perceptual relationships. Two random colors frequently clash in saturation or luminance, producing unreadable text or visual discord. This tool rotates hue on the HSL color wheel at fixed intervals (180° for complementary, 120° for triadic) and adjusts lightness to guarantee a minimum WCAG contrast ratio of 4.5:1 between each background color and its computed foreground text color.

It computes the relative luminance L of the background using sRGB linearization coefficients (0.2126 for red, 0.7152 for green, 0.0722 for blue). If the contrast ratio between white (#FFFFFF, L=1) and the background exceeds 4.5:1, white text is used. Otherwise, black text (#000000) is used. This follows WCAG 2.0 AA guidelines for normal-sized body text.

The algorithm adjusts the lightness component of the secondary color. If the initial complementary hue rotation produces a color whose luminance is too close to the primary (contrast ratio below 3:1), the lightness is shifted by up to 30 percentage points in whichever direction increases contrast. The saturation is also modestly reduced to prevent neon-like results.

The 60-30-10 rule is proportion-based, not lightness-based. It applies equally to dark and light themes. In a dark theme, the 60% dominant color would be a dark shade, and the 10% accent would be a bright highlight. The invert feature in this tool swaps primary and secondary, effectively demonstrating a 30-60-10 variant which is common in dark UI patterns.

No. HSL is a mathematical model, not a perceptually uniform color space like CIELAB. A 180° rotation in HSL produces a mathematical complement, but human perception of "equal contrast" varies across hues. For example, yellow (H≈60°) appears much lighter than blue (H≈240°) at the same S and L values. The tool compensates partially by adjusting lightness post-rotation, but it does not perform full CIELAB deltaE calculations. For production color systems, validate the output against actual UI mockups.

Palettes are serialized as JSON arrays in the browser's LocalStorage under a namespaced key. Each palette stores the primary hex, derived secondary hex, accent hex, and computed foreground colors. LocalStorage has a typical limit of 5 MB per origin. A single palette entry uses approximately 200 bytes, so the practical limit is around 25,000 saved palettes before storage pressure becomes an issue.