Semantic color generator · OKLCH · deterministic contrast
Pick a key color, then let perceptual character, contrast, role allocation, and product context determine the surfaces, companion accent, text, focus, and status colors. The recipes below are useful starting postures—not a closed swatch list.
StyleSeed Palette Engine
Current focus
Canvas carries most of the interface. The key color identifies the product and primary action; the generated companion stays supporting.
Primary role
One action wins.
Generated reference ramps
OKLCH lightness steps; components consume semantic roles.
background
surface
chrome
primary
accent
focus
Why this combination works
60% canvas and surfaces · 30% chrome, text, and structure · at most 10% primary and companion emphasis combined.
Maintained starting postures
A recipe supplies job and hierarchy defaults. A project key color recompiles its actual ramps and semantic roles.
01 · quiet-mineral
Calm consumer products, health, benefits, and personal utilities
Let warm neutrals carry most of the canvas. Reserve green for the primary action and current-state reassurance; keep coral below ten percent.
Recommended with
Generated media
Anchor #F3F0E8 · #276B5E · #D56A45
Avoid neon blue · rainbow gradients · blue-purple AI glow
02 · deep-lime-studio
Creative work, focused productivity, and high-craft prototypes
Use lime for selection and one decisive action, never as body text. Layer chrome one step lighter than the canvas; let generated imagery remain low-luminance.
Recommended with
Generated media
Anchor #0B0D0F · #B8FF5A · #7AA7FF
Avoid pure-white bloom · multicolor neon · lime on light backgrounds
03 · cobalt-instrument
Developer platforms, data products, and operational workbenches
Use neutral layers for evidence and cobalt for action/selection. Violet belongs to secondary categorization, not a second primary action.
Recommended with
Generated media
Anchor #101828 · #175CD3 · #F1F5FA
Avoid cyan terminal glow · decorative gradients · low-contrast gray text
04 · warm-clay-commerce
Commerce, hospitality, booking, and human service brands
Let product imagery and warm paper carry identity. Clay marks purchase intent; violet is reserved for saved or personalized context.
Recommended with
Generated media
Anchor #FFF8F2 · #A64005 · #2B201B
Avoid orange sale walls · high-saturation red urgency · generic purple gradient
05 · civic-blue
Public services, regulated applications, and consequential workflows
Use blue for institution and primary action, green only for confirmed success, and amber focus with a visible outline. Pair every status with text.
Recommended with
Generated media
Anchor #003078 · #F3F5F7 · #00703C
Avoid pastel minimalism · glass navigation · color-only status
06 · editorial-ink
Research, journalism, reports, and authoritative reading
Use ink and paper for the reading field. Red marks editorial emphasis sparingly; blue owns links and focus.
Recommended with
Generated media
Anchor #F5F1E8 · #111111 · #8F2C21
Avoid fake newspaper texture · sepia photos · card-grid chrome
07 · signal-coral
Expressive launches, social products, and consumer discovery
Let coral own the hook and selected moment. Violet supports spatial or media context; never let both compete as primary actions.
Recommended with
Generated media
Anchor #FFF3EC · #C83D2C · #5B3EC8
Avoid pink-purple gradient wash · rainbow icon chips · coral body text
08 · nocturne-violet
Media, AI, experimental professional tools, and immersive utilities
Use violet for primary control and mint for creation/progress. Keep media dark enough to preserve chrome and avoid synthetic AI-glow overload.
Recommended with
Generated media
Anchor #0D0B16 · #A98BFF · #4BE0C3
Avoid electric blue haze · purple gradient headlines · white bloom behind text
Recommendation is executable