Hue & YOU
Color palettes built on perceptual harmony, not guesswork.
Palettes that pass the standard, not just look good
Most color tools rely on trial and error or non-perceptual models, making it hard to build palettes that are both visually balanced and accessible. Hue & YOU combines OKLCH color science, structured harmony strategies, and built-in WCAG checks to make that easier.
The Problem
Accessible palettes are difficult to build consistently with trial-and-error tools.
The Need
Teams need palettes that support harmony, role structure, and WCAG-aware contrast.
Our Approach
Use OKLCH, harmony logic, and accessibility validation to support better decisions.
From one color to an entire palette
Pick a base color. Choose a harmony type. Hue & YOU calculates offsets in the OKLCH color space and produces a structured palette with assigned roles.
Everything starts with a single color. Pick any hue, and the system converts it into the OKLCH color space for perceptually accurate calculations.
The harmony type determines how additional colors are distributed around the color wheel. Each strategy produces a different character.
Harmony strategies translate into specific degree offsets from the base hue. The system computes each resulting hue, then assigns lightness and chroma values to create visual hierarchy.
The final palette assigns each color a role: Primary, Secondary, Accent, Background, and Text. These roles map to common interface patterns.
Five ways to relate color
Why OKLCH?
OKLCH is a perceptually uniform color space. Unlike HSL, equal numeric steps produce equal visual steps. Harmonies calculated in OKLCH actually look harmonious.
Each color is defined by three values:
- L - Lightness
- 0 (black) to 1 (white). Perceptually linear.
- C - Chroma
- Color intensity. Higher values are more vivid.
- H - Hue
- The angle on the color wheel, 0-360 degrees.
Example Output
A generated palette with assigned roles. Each swatch shows its hex value, WCAG contrast rating, and contrast ratio against background and text colors. Click any swatch to copy its hex value.
The buttons below the palette are disabled on this page. On the Generate page, Export downloads the palette as a JSON file, Preview shows the colors applied to a sample UI page, and Edit opens the palette in the editor for fine-tuning.
Generated Variants
Multiple palette variations from the same inputs. Variants differ by lightness, chroma, or hue spacing to help you explore different interpretations.
Palettes marked with this icon are variations. The primary color has been slightly adjusted from your original input to increase palette diversity. This gives you more options to compare without having to pick a new base color each time.
Contrast that meets the standard
Every swatch is checked against WCAG 2.1 contrast requirements. Colors are compared against both background and text, and the best ratio is displayed.
Continue Exploring Hue & YOU
Move from understanding the system to using it. Generate palettes, refine them in the editor, and manage saved work in your library.
The Generator
Pick a base color and harmony type to generate a full palette with assigned roles, contrast ratings, and multiple variants.
Open GeneratorThe Editor
Refine individual swatches, rename palettes, and preview colors applied to a sample interface to evaluate real-world usability.
Open EditorThe Library
Saved palettes persist in your browser. Browse, load, and manage your collection across sessions.
Open Library