Help
Frequently asked questions
Everything about what HelloColor does, how its deterministic OKLCH engine works, and what a finished color system gets you.
The basics
What HelloColor is and who it is for.
- What is HelloColor?
- HelloColor turns a single brand color into a complete, accessible design system. You pickone color and a design philosophy (a “preset”), and the app instantly generates every semantic token an interface needs — backgrounds, surfaces, borders, primary/secondary/accent colors, status colors, and readable text pairings — in both light and dark mode.
- Who is it for?
- Designers, developers, and founders who want a coherent, WCAG-accessible palette without hand-tuning dozens of hex values. If you have a brand color and need a full UI theme, HelloColor does the color math for you.
- Is there any AI or randomness involved?
- No. HelloColor is fully deterministic. The same base color plus the same preset and settings always produce the exact same palette. There is no model, no API call, and no random seed — just color theory expressed as math.
How it works
The engine under the hood.
- Why OKLCH instead of HSL or hex?
- HelloColor works in OKLCH, a perceptually uniform color space. That means a change in “lightness” looks like an equal change to the human eye regardless of hue — something HSL gets badly wrong. This is what lets the engine build tonal scales and adjust contrast predictably across every color.
- What does a preset actually do?
- Each preset is a fixed set of parameters — hue shifts, chroma scaling, harmony strategy, surface steps, status hues, radius, and more. Presets fall into three families: Style (e.g. Startup, Swiss, Luxury), Movement (design-historical looks like Bauhaus, Nordic, Art Deco, Memphis, Japandi, Mid-Century), and Harmony (pure color-wheel relationships like Complementary, Triadic, Tetradic, and Square).
- What are the Contrast, Vibrancy, and Brightness sliders?
- They are modifiers layered on top of the preset. Contrast widens or narrows the lightness range, Vibrancy scales chroma (color intensity), and Brightness shifts the overall lightness. Every change flows through the same deterministic pipeline, so you always see exactly why a color turned out the way it did.
- How does it keep text readable?
- The engine measures the WCAG contrast ratio for every foreground/background pairing and, when you enable AA or AAA accessibility, automatically corrects foreground lightness until the pairing passes. The token grid shows each color’s contrast rating so nothing ships inaccessible by accident.
- Can I see the reasoning behind each color?
- Yes. The Algorithm Inspector shows the full pipeline (base hex → OKLCH → preset → modifiers → accessibility → tokens), and every token in the grid has a plain-language explanation of the exact transform that produced it.
The Preset Builder
Designing your own philosophies.
- What is the Preset Builder?
- A dedicated view where you can craft your own preset from friendly controls (harmony, color behaviour, accessibility) with an advanced section for fine dials like hue spread, status hues, border strength, and tonal curves. A live preview updates as you edit.
- Do my custom presets persist?
- Yes. Saved presets are stored locally in your browser and appear in a Custom family inside the Generator, right alongside the built-ins. You can also export them as versioned JSON and import them back later or share them.
Using the output
What you get and how to ship it.
- What does it accomplish for my project?
- You end up with a mathematically balanced, accessibility-checked color system that maps directly onto real UI roles. Instead of guessing at shades, you get a coherent theme that already works in light and dark mode and holds up across buttons, cards, borders, and status states.
- How do I export a palette?
- The Export panel gives you copy-ready CSS custom properties for the full token set. You can share an exact palette too — the generator encodes your base color, preset, and settings into the URL, so a link reproduces the same system for anyone who opens it.