God Color
Procedure
- Start from meaning, not from a wheel. What should the colour do: signal trust, appetite, energy, calm, heritage? Check cultural meaning for the audience (
references/color-reference.md, cultural table). - Pick an anchor. Choose one brand or accent hue. Everything else is neutral or supporting.
- Choose a harmony (see below) and a proportion: the 60-30-10 rule (dominant neutral / secondary / accent) is a safe default. Bold styles may use 50-40-10.
- Build scales in OKLCH. Use 11 steps (50–950) per hue with steady lightness steps and slightly reduced chroma at the extremes. OKLCH keeps perceived lightness consistent across hues, unlike HSL.
- Assign roles. Use
bg,surface,surface-raised,border,text,text-muted,accent,accent-contrast,success,warning,danger,info,focus. Components use roles, never raw hex. - Check contrast. Text ≥ 4.5:1 (large text ≥ 18.66px bold / 24px regular: ≥ 3:1). UI components and graphics ≥ 3:1 (WCAG 1.4.3, 1.4.11). Use the formula in the reference, or run
node scripts/contrast.mjs <fg> <bg>(path relative to this skill folder). - Design dark mode separately. Don't just invert. Use dark grey surfaces (
oklch(0.18–0.22 …)), lighter surfaces for elevation, desaturated accents, and off-white text (oklch(0.93 0 0)). - Test colour-blind safety. Never encode meaning by hue alone. Add icons, labels or patterns. Avoid pairing red and green as the only cue.
Harmony schemes
| Scheme | Construction | Feel | Use |
|---|---|---|---|
| Monochromatic | One hue, varied L/C | Calm, premium | Minimal brands, dashboards |
| Analogous | 3 neighbours (±30°) | Harmonious, natural | Wellness, food |
| Complementary | Opposite (180°) | Vibrant, high tension | CTAs, sports, posters |
| Split-complementary | Base + two neighbours of its complement | Lively but balanced | Marketing sites |
| Triadic | 3 at 120° | Playful, bold | Kids, Bauhaus, Memphis |
| Tetradic / square | 4 at 90° | Rich, hard to balance | Illustration |
| Neutral + one accent | Greys + single hue | Modern, focused | SaaS, Swiss, editorial |
Fast palette recipe (from one brand hex)
textaccent = brand hex (OKLCH L between 0.45 and 0.65 for text-on-white or white-on-accent) bg = oklch(0.985 0.005 <brand hue>) # tinted off-white surface = oklch(0.97 0.007 <hue>) border = oklch(0.90 0.01 <hue>) text = oklch(0.22 0.02 <hue>) # tinted near-black; no pure #000 on #fff text-muted = oklch(0.48 0.02 <hue>) # must still hit 4.5:1 on bg accent-contrast = white or text, whichever passes 4.5:1 on accent
Gradients that don't look generic
- Interpolate in OKLCH (
linear-gradient(in oklch, …)) to avoid muddy middles. - Use close hues (≤ 60° apart) or one hue + neutral. Default purple→blue→pink reads as AI slop.
- Add 2–4% noise to prevent banding on large areas.
Screen vs print
- Screen: sRGB by default. Display-P3 for vivid accents via
color(display-p3 …)with an sRGB fallback. - Print: CMYK conversion shifts saturated RGB (especially greens, blues and oranges). Specify Pantone/CMYK for brand colours. Rich black for large areas
C60 M40 Y40 K100; body text 100K only. Seegod-print.
See references/color-reference.md for contrast math, OKLCH ramps, curated palettes, cultural colour meanings and colour-blind-safe sets.


