The Pixflow colour generator is designed to do most of the hard work for you. When used correctly, it produces colour schemes that are consistent, accessible, and resilient to change.
This document explains how to work with the generator, not against it. It focuses on intent, decision-making, and safe adjustment—without diving into tools, controls, or technical implementation.
Start With Intent, Not Perfection
The generator works best when you begin with direction, not precision.
You do not need to know the final colours you want.
You need to understand things like:
- Should this brand feel calm or expressive?
- Should the interface feel light, grounded, or bold?
- Where should attention naturally go?
Once intent is clear, the generator can do its job: turning that intent into a complete, coherent colour environment.
Trying to fine-tune individual colours too early usually leads to friction and instability.
Recommended Workflow (Practical Guidance)
If you are unsure where to begin, follow this sequence.
1. Choose Your Main Accent Direction First
The accent is the strongest signal in the entire system.
If your brand already has a recognised primary colour, start here.
- Set the Main scheme accent to your brand colour.
- If that colour must remain recognisable, lock the accent.
- If you are still exploring, leave it unlocked initially and refine later.
This establishes a clear anchor for the entire system.
2. Let the Main Scheme Set the Environment
Next, focus on the Main scheme as a whole.
It defines:
- The overall mood of the site
- The primary reading environment
- How calm or expressive the interface feels
If the Main scheme feels right, everything else becomes easier.
Avoid compensating for an unsettled Main scheme by leaning on secondary schemes or local overrides. That usually hides the real issue rather than fixing it.
3. Adjust Broadly Before You Adjust Precisely
When refining a scheme, prefer directional adjustments over narrow tweaks.
Safe adjustments include:
- Shifting the overall lightness or darkness of the environment
- Making the interface feel calmer or more energetic
- Softening or strengthening contrast overall
Risky patterns include:
- Chasing exact hex values
- Tweaking one role repeatedly to “fix” another
- Forcing a specific colour outcome instead of adjusting direction
The generator responds best to broad intent. It becomes fragile when treated like a manual palette editor.
4. Use Locks Sparingly and Intentionally
Locks are how you express what must remain true.
Good reasons to preserve intent include:
- A brand accent that must remain recognisable
- A surface tone that defines the site’s character
- A deliberate contrast relationship you want to keep
Poor reasons include:
- Fixing a temporary discomfort
- Chasing a specific swatch
- Overriding the system instead of guiding it
As a rule of thumb:
If you find yourself locking many things, it usually means the underlying direction needs revisiting.
Trust Accessibility Safeguards
The generator continuously protects readability and contrast.
This means:
- Text may shift subtly to remain readable
- Emphasis may soften to avoid overpowering content
- Certain combinations are intentionally prevented
These outcomes are not errors. They are the system doing its job.
Trying to fight these safeguards almost always leads to fragile designs that break later when content or layout changes.
If something feels off, step back and reconsider intent rather than forcing a local correction.
Use Secondary Schemes for Context, Not Decoration
Secondary schemes exist to support contextual environments, not to add personality.
They are most effective when used for:
- Distinct sections of a page
- Visual grouping
- Structural separation
They are not meant to:
- Introduce new brand personalities
- Add extra accents
- Compensate for issues in the Main scheme
If a section seems to “need” a secondary scheme to look right, first check whether the Main scheme is doing its job.
Buttons Are Global Interaction Signals
Buttons represent actions, not decoration.
For this reason, Pixflow treats button colour as a global interaction signal, not a contextual one.
- Primary buttons always use the Main scheme accent, even inside secondary schemes.
- This keeps actions recognisable, predictable, and aligned with brand intent across the entire site.
- Secondary schemes shape environments; they do not redefine interaction.
For non-primary actions—especially on foreground surfaces—use neutral button treatments that rely on contrast and structure rather than colour emphasis.
This preserves hierarchy, prevents accent dilution, and keeps emphasis rare.
Avoid These Common Mistakes
Treating the Generator Like a Palette Picker
Leads to over-tuning and instability.
Creating Accents Everywhere
When everything is emphasised, nothing is.
Fixing Symptoms Instead of Direction
Repeatedly correcting individual roles usually signals unclear intent.
Designing for One Screen
Colour must work across layouts, components, and future content—not just the current view.
A Practical Mental Model
When using the generator, think in this order:
- Intent — What should this site feel like?
- Environment — Does the Main scheme support that feeling?
- Hierarchy — Is emphasis clear and restrained?
- Context — Where do secondary schemes genuinely help?
- Refinement — Only then consider preserving specific intent
Following this sequence keeps the system predictable and resilient.
What’s Next
Now that you understand how to work with the generator, the next step is knowing where colours should actually be used in real interfaces.
In the next document, Where Colours Should Be Used on a Website, we’ll map colour roles to real UI elements and layouts so you can apply schemes consistently across pages and components.