Convert to HSL
The brand hex is converted to hue, saturation and lightness so semantic colours can be derived that harmonise with it.
Free MVP design tool
Color Logic
Generate a semantic color system for primary actions, success, warning, error, information, backgrounds and disabled states.
- Calculated instantly from your inputs
- No signup or data submission
- A focused next step for MVP planning
Your entries remain in this browser session and are not sent to MVPHub.
Your inputs
Describe your brand colour
Give Color Logic your primary brand colour and product tone. It computes a full semantic system using real HSL colour math.
Your calculated result
Your result
0/100
Planning score
Recommended next actions
How it works
Derive semantic hues
Success, warning, error and information colours are placed at fixed hue positions (green, amber, red, blue) with saturation matched to your brand tone.
Step tints and shades
Background, border and disabled-state colours are generated by stepping lightness from the base hues, and checked against your accessibility target.
Frequently asked questions
Why not just pick semantic colours by eye?
Colours picked independently often clash in saturation or lightness. Deriving them from your brand's HSL profile keeps the whole system visually related.
Does green always mean success?
Convention strongly favours green/amber/red for success/warning/error since users recognise the pattern; Color Logic keeps those hues but matches saturation to your brand.
What does the accessibility target change?
AAA raises the minimum lightness contrast required between text and background colours, which may shift how dark or light the generated shades are.
Can I use this for an existing product?
Yes — it works as a gap-check too. Compare the generated system against your current semantic colours to spot inconsistencies.
How we compare
| Capability | MVPHub | Figma | color palette generators |
|---|---|---|---|
| Semantic system derived from one brand colour | ✓ | × | — |
| Accessibility-target aware generation | ✓ | × | — |
| No account or plugin required | ✓ | × | ✓ |
Generic colour palette generators produce pleasing ramps but rarely reason about semantic roles (success/warning/error) or an accessibility target the way Color Logic does.