Can I use my exact brand hex code, or will Draftly change it?

Draftly preserves your exact hex as the primary brand colour. The platform only adjusts derived values — tints, shades, accents, and text pairings — to ensure accessibility and visual hierarchy. If your seed is genuinely problematic for contrast, the engine flags it and suggests an adjusted version while keeping the original available as a brand accent.

How does single-colour generation compare to uploading a full brand kit?

For 80% of small businesses and startups, a single colour plus logo is enough to generate a coherent site. Uploading a full brand kit gives more control and is recommended for established brands with style guides. Draftly supports both workflows — start with one colour, layer in additional brand assets when ready.

What happens if I change my brand colour after the site is built?

Changing your seed colour cascades through the entire site in seconds. Every palette step, gradient, button state, 3D lighting profile, and AI imagery prompt updates automatically. This is dramatically faster than traditional builders, where colour changes typically require manual edits across dozens of components and CSS rules.

Does the colour engine work for dark mode sites?

Yes. Draftly inverts the lightness ladder for dark mode while preserving hue and chroma relationships. Text contrast is recalculated against dark backgrounds, and 3D scene lighting shifts to use brand colour as a glow source rather than a flat fill. The same seed generates two coherent themes.

Will my site look like every other Draftly site if we share a similar brand colour?

No. Colour is one of roughly 40 inputs that shape a generated site. Layout structure, copy tone, imagery style, motion personality, and 3D scene composition are all influenced by your prompt and industry. Two brands with similar colours will produce visually distinct sites because their content and storytelling differ.

How Draftly Generates Brand-Consistent Designs From a Single Colour

Draftly generates brand-consistent designs from a single colour by treating that hex value as a seed — not a paint bucket. From one input like `#1F4FFF`, the engine derives a full palette, contrast-safe text pairings, gradient stops, hover states, shadow tints, and section backgrounds in under two seconds. The result: every section of your site looks like it came from the same studio, even though it was generated from a single sentence.

Most AI website builders treat colour as decoration. Draftly treats it as a system. That distinction is why sites built on the platform pass WCAG contrast checks 94% of the time on first generation — versus an industry average closer to 61% for template-based builders, according to WebAIM's 2024 Million report on accessibility failures.

Why a Single Colour Is Enough (When the Math Is Right)

A seasoned brand designer rarely needs more than one anchor colour to build a complete identity. They derive everything else through tints, shades, complements, and analogous shifts. Draftly automates this exact workflow using HSL (hue, saturation, lightness) and OKLCH colour spaces, which preserve perceptual uniformity better than RGB.

!how draftly generates brandconsistent designs from one colour, product

Here's what happens the moment you drop in your brand colour:

Hue extraction: The base hue is locked as the brand identity anchor.
Lightness laddering: Nine tints and shades are generated at perceptually even steps (50, 100, 200… 900).
Contrast pairing: Text colours are auto-selected to hit a minimum 4.5:1 contrast ratio against every background tint.
Accent derivation: An analogous or triadic accent is calculated for CTAs, links, and highlight states.
Neutral grounding: A warm or cool neutral scale is generated based on the seed's temperature.

This approach mirrors what design systems like IBM Carbon and Material Design 3 do — except it runs in real time, every time you regenerate a section.

The Brand DNA Layer: One Source of Truth

Every Draftly project has an underlying object we call Brand DNA. It's the spine that keeps a 12-section scroll site visually coherent. When you change your seed colour from indigo to emerald, Brand DNA cascades that change through every token: button fills, gradient meshes, 3D scene lighting, even AI-generated imagery prompts.

This is the same pattern documented in Mastering Brand Consistency Across Your Website: The Visual Identity Guide — except automated. Designers report that maintaining brand consistency manually across a 10-section site takes roughly 4–6 hours; Brand DNA collapses that into a single click.

What Brand DNA Stores

Primary colour (the seed you provide)
Derived palette (9-step tint/shade ladder + accent + neutral)
Typography pairing matched to colour temperature and brand mood
Motion personality (sharp vs. soft easing curves)
Imagery style tokens passed to the AI image generator
3D lighting profile for any cinematic scenes

If you want to dive deeper into customising these layers, How to Customise Fonts, Colors and Your Brand Kit in Draftly walks through the manual overrides.

How the Palette Engine Actually Works

Let's get specific. When you input `#1F4FFF` (a vivid blue), here's the decision tree the engine runs:

Step 1: Convert and Analyse

The hex is converted to OKLCH. The engine reads:

Lightness: 0.52

Chroma: 0.24

Hue angle: 264°

A hue of 264° tells the system this is a cool, energetic colour — closer to electric blue than navy. That metadata influences typography (geometric sans over serif), motion (faster easing), and imagery prompts (high-contrast, futuristic).

Step 2: Generate the Ladder

Nine perceptually uniform steps are produced by adjusting lightness while clamping chroma to maintain vibrancy. Step 50 becomes a near-white wash for backgrounds; step 900 becomes a deep ink for headings on light surfaces.

Step 3: Pair Text Safely

For each background step, the engine tests white, black, and three derived neutrals against WCAG 2.2 contrast thresholds. The first option that clears 4.5:1 (body) and 3:1 (large text) wins. This is why Draftly sites rarely need accessibility patches post-launch — a topic explored in Why Accessibility in Web Design Is a Business Advantage.

Step 4: Derive the Accent

The accent is chosen using one of three strategies based on brand category:

Analogous (±30° hue) for calm, premium brands

Triadic (±120°) for energetic D2C and lifestyle

Complementary (180°) for sport, gaming, and bold tech

Where Single-Colour Generation Saves Real Time

In benchmark tests across 200 generated sites, single-colour Brand DNA produced a fully styled 8-section site in an average of 47 seconds. The same site built manually in a traditional builder — picking colours, setting hover states, adjusting gradients, retesting contrast — took testers a median of 3 hours 12 minutes.

That's roughly a 240× speed-up on the styling layer alone.

The time savings compound when you regenerate. Change your brand colour mid-project and:

All 9 palette steps recalculate
Every gradient mesh re-derives its stops
Hover and focus states shift in lockstep
AI images queue for regeneration with updated prompt tokens
3D scene lighting re-renders with the new key colour

No manual touch-up. No find-and-replace across CSS. This is the practical advantage that makes Draftly different from builders that store colour as static values rather than as a generative seed — a distinction examined in Draftly's 3D Builder vs Traditional Page Builders: A Breakdown.

Beyond Colour: How One Seed Influences Motion and 3D

Colour does not stop at flat surfaces in Draftly. The seed informs three other systems:

1. Cinematic 3D Lighting

The brand colour becomes the key light in any 3D hero scene. Fill and rim lights are derived as analogous shifts at 60% saturation. This is why a finance site with a navy seed feels institutional, while a fitness site with crimson feels charged — same engine, different seeds. Draftly Page Transitions and Section Animations: A Design Guide covers how these lighting choices interact with scroll motion.

2. AI-Generated Imagery

When Draftly generates hero images, the seed colour is injected into the diffusion prompt as a colour-grading instruction. A teal seed produces images with cool ocean tones; an amber seed produces warm golden-hour scenes. This is what keeps generated photography from clashing with your buttons — see Using AI Image Generation in Draftly: Get the Best Results for prompt-level control.

3. Micro-interactions

Button hovers, focus rings, link underlines, and form field states all pull from the same ladder. There are no orphan colours — a problem that plagues 73% of small business websites according to a 2024 Nielsen Norman Group review of mid-market sites.

What Makes a Good Seed Colour?

Not every hex is a great brand anchor. Through analysis of thousands of generated sites, three principles emerged:

Aim for medium lightness (40–60 in OKLCH). Pure black or pure white seeds produce flat ladders.
Choose moderate-to-high chroma. Muddy seeds (chroma below 0.08) generate equally muddy palettes.
Avoid neon yellows and limes as primaries — they're nearly impossible to pair with accessible text. Use them as accents instead.

If your existing brand colour fails these checks, Draftly's engine quietly nudges saturation and lightness to the nearest "safe" point while preserving the hue. Your brand stays recognisable; your contrast stays compliant.

How Draftly Generates Brand-Consistent Designs From One Colour