Color is the first thing a visitor processes — before they read a word of copy. It communicates industry, credibility, and tone in milliseconds. It also directly affects whether text is readable, which affects whether people stay on the page.
This post explains how NoDevZone's palette system works and why the constraints we impose on color selection actually produce better results than giving the AI unlimited freedom.
The problem with asking an AI to "pick nice colors"
If you ask an LLM to choose colors for a website, you get hex codes. Sometimes they look fine together. Sometimes they don't. The model has no reliable way to evaluate whether the colors actually work — whether text is readable, whether the palette feels appropriate for the industry, whether the combination is visually coherent rather than accidentally matchy.
We saw this problem clearly in early testing. Unconstrained color generation produced palettes that ranged from excellent to completely unusable. There was no consistency.
The solution was to take color selection out of the LLM's hands entirely and build an algorithmic system that guarantees specific properties.
The 4-color system
Every NoDevZone site uses exactly four named colors:
ink — the primary text color. Always dark (high luminance contrast against backgrounds). Used for headings, body text, and UI elements that need to be read.
bg1 — the primary background. Usually the lightest color in the palette. Used for the main page background and light sections.
bg2 — the secondary background. Creates visual variety between sections. Must have a different color temperature from bg1 — if bg1 is a warm cream, bg2 is a cool grey or blue-tinted white.
accent — the brand color. Used for buttons, links, highlights, and decorative elements. Usually the most saturated color in the palette.
This constraint — four named roles, not arbitrary hex codes — is what makes the palette system work. The AI never decides which color goes where; it only selects which palette to use from a pre-audited set.
How palettes are organized
We maintain 20+ palette groups, each built around an archetype:
- Bold: high-contrast, saturated accents — tech, SaaS, fintech
- Soft: muted, desaturated — wellness, coaching, creative services
- Luxury: near-black backgrounds with metallic or jewel accents — premium services, high-end retail
- Earthy: warm neutrals with terracotta or sage accents — food, sustainability, craft
- Dark: dark-mode-first palettes — developers, agencies, gaming
- Neutral: safe, professional — legal, finance, healthcare
Within each group, there are multiple palettes with different color temperatures, saturation levels, and accent hues. The system selects a group based on industry and archetype, then picks a specific palette within the group.
WCAG contrast: the constraint that improves design
WCAG AA requires that normal text has a contrast ratio of at least 4.5:1 against its background. Large text needs 3:1. Interactive elements need 3:1 against adjacent colors.
Every palette in our system is validated against these ratios before it's included. Specifically:
inkmust achieve ≥4.5:1 contrast againstbg1,bg2, and any surface color where text appearsaccentmust achieve ≥3.0:1 againstbg1andbg2(for use as button backgrounds)- The validation uses real luminance math —
L = 0.2126R + 0.7152G + 0.0722Bafter gamma correction — not approximations
The effect is that every generated site is readable by default. But there's a secondary benefit: high-contrast designs convert better. A button that's clearly visible gets more clicks than one that blends into the background. The accessibility requirement turns out to be a conversion requirement.
Color temperature contrast between sections
One detail that's easy to overlook: bg1 and bg2 must have contrasting color temperatures. If both backgrounds are warm, alternating sections feel monotonous — the page looks like one continuous blob rather than distinct content areas.
The rule in our system: if bg1 has a warm hue (orange/yellow direction, or a warm neutral like cream), bg2 must be cool (blue/grey direction). If bg1 is a cool white, bg2 might be a warm off-white.
This is why our sections feel distinct even without heavy dividers or drop shadows — the background temperature shift alone creates a clear visual break.
Industry-specific color logic
Some color choices are strongly industry-coded. Visitors have expectations built from years of exposure to websites in a given category.
Healthcare and wellness: blues and greens signal trust and calm. Saturated reds and oranges read as alarming in this context.
Legal and finance: dark navies, charcoal, conservative greys. Bright accents are acceptable but need to be restrained. Playful palettes undermine credibility.
Food and hospitality: warm tones — terracotta, amber, cream — activate appetite associations. Cool clinical palettes feel wrong.
Technology and SaaS: blues remain dominant, but there's more range. Electric blues, indigos, and even violet read as tech-forward. Pure black backgrounds work for developer tools.
Luxury and premium: the key is restraint. Limited color range, near-blacks or deep navies as primary colors, gold or platinum accents. High contrast, never saturated.
The archetype selection in the Design Mandate maps industry + business type to the appropriate palette group, so a wellness coach doesn't end up with the same palette as a law firm, even if both are described as "professional."
What clients can change
After generation, clients can edit their site in Gutenberg. The color picker in the editor shows only the four brand colors — nothing else. This means:
- They can change section backgrounds between
bg1,bg2, and surfaces - They can change button and link colors between
accentandink - They cannot introduce an arbitrary fifth color that breaks the palette
The constraint is intentional. The most common way clients break a professionally designed site is by picking colors from the full spectrum color wheel. Limiting the palette to four named colors makes that impossible without going into the code.