Methodology
Palette tools turn one or more colors into candidate systems. Hue Codex keeps those systems deterministic, role-aware, and easy to audit, while making clear that generated palettes are starting points.
Hue Codex palette generation combines HSL hue relationships, style-specific role rules, optional OKLCH scale generation, locked-color preservation, and WCAG contrast metadata. It does not guarantee a complete design system without human review.
These badges identify which parts of this methodology are standards-backed, draft-track, Hue Codex-specific, approximate, or dependent on browser behavior.
This separates standards-based formulas from Hue Codex implementation decisions, product heuristics, and known limitations for this methodology.
Formula, threshold, syntax, or data behavior taken from a cited standard or standards-backed source.
How Hue Codex chooses to parse, normalize, round, export, or sequence calculations.
Product rankings, bands, labels, suggestions, or role hints that are useful guidance but not external standards.
Caveats, edge cases, browser dependencies, approximations, or contexts the method does not prove.
Palette generation starts with a seed color or pasted color list. The seed is normalized to HEX, converted to HSL and OKLCH when needed, and used to build predictable relationships.
Role palettes use the seed as the primary color, then derive companion hues, semantic state colors, light surfaces, readable text, and borders. Style presets adjust saturation, lightness, hue anchors, and semantic shifts while preserving locked colors from the previous palette.
Harmony generation uses conventional hue offsets such as complementary, analogous, triadic, tetradic, split-complementary, and monochromatic relationships. Tone presets then adjust saturation and lightness to keep swatches usable rather than purely geometric.
Scale generation supports OKLCH perceptual ramps, HSL lightness ramps, and simple RGB mixes toward white, black, or gray. The chosen mode changes the result because these models do not describe lightness and chroma in the same way.
Generated colors are evaluated against surface and text roles with WCAG contrast helpers. Hue Codex also counts accessible pairings and suggests best text colors for swatches.
A palette can contain passing pairs and still fail a real interface if roles are assigned poorly, if text is too small, if state is communicated only through color, or if color-vision risks are ignored.
| Check | Expected behavior |
|---|---|
| Same seed and style | Same generated role colors unless locks changed |
| Locked role | Locked HEX value remains unchanged after regeneration |
| Contrast metadata | Best text and pair counts update after every palette change |
| Scale step count | Requested steps are clamped to a practical range for readable output |
Harmony math and role palettes are deterministic Hue Codex heuristics. WCAG contrast metadata is standards-based, but role assignment and style tuning are product choices.
scheme_offsets:
complementary = [0, 180]
analogous = [0, -30, 30]
triadic = [0, 120, 240]
tetradic = [0, 90, 180, 270]
split_complementary = [0, 150, 210]
tone_values(base_hsl, tone, index):
if tone == preserve:
return s = base.s, l = base.l
if tone == vivid:
return s = clamp(base.s + 16, 64, 94),
l = clamp(base.l + (index even ? -2 : 4), 42, 62)
if tone == muted:
return s = clamp(base.s * 0.52, 22, 56),
l = clamp(base.l + (index even ? 6 : 10), 46, 74)
# balanced
return s = clamp(base.s * 0.86, 40, 78),
l = clamp(base.l + (index even ? -4 : 6), 40, 68)
generate_harmony(seed, scheme, tone):
base = rgb_to_hsl(hex_to_rgb(normalize_hex(seed)))
for each offset at index:
h = normalize_degrees(base.h + offset)
if scheme == monochromatic:
s = clamp(base.s * saturationScale[index], 18, 92)
l = clamp(base.l + lightnessDelta[index], 10, 94)
else:
s, l = tone_values(base, tone, index)
hex = index == 0 ? seed : rgb_to_hex(hsl_to_rgb(h, s, l))
attach WCAG best-text and pair metadataharmonized_hue(seed_hue, anchor_hue, strength, max_shift):
shortest = ((seed_hue - anchor_hue + 540) % 360) - 180
shift = clamp(shortest * strength, -max_shift, max_shift)
return normalize_degrees(anchor_hue + shift)
build_role_palette(seed, style, locks, previous_palette):
base = rgb_to_hsl(hex_to_rgb(seed))
settings = palette_style_settings(base, style)
role_hue(role, fallback_offset):
if settings has absolute anchor for role:
return harmonized_hue(base.h, settings[role + "Hue"],
settings.roleShift or 0.2,
settings.roleMaxShift or 36)
return normalize_degrees(base.h + fallback_offset)
roles = [
primary: style == balanced ? seed : hsl(base.h, clamp(settings.s), clamp(settings.l, 4, 97)),
secondary: hsl(role_hue(secondary), settings.s * 0.86, settings.l - 7),
accent: hsl(role_hue(accent), min(94, settings.s + 10), settings.l + 5),
surface: hsl(role_hue(surface), settings.surfaceS or max(12, settings.s * 0.28), settings.surfaceL or 96),
text: hsl(role_hue(text), settings.textS or max(24, settings.s * 0.42), settings.textL or 12),
border: hsl(role_hue(surface), settings.borderS or max(10, settings.s * 0.24), settings.borderL or 78),
success: hsl(semantic_hue(145), semantic_s(48,34,88), semantic_l(36,28,52)),
warning: hsl(semantic_hue(44), semantic_s(68,44,94), semantic_l(62,48,74)),
danger: hsl(semantic_hue(350), semantic_s(64,42,92), semantic_l(56,42,68))
]
for each role at index:
if locks[index] and previous_palette has color at index:
keep previous hex
else:
convert HSL role to HEX with h normalized, s clamped 0..100, l clamped 4..97These vectors isolate deterministic palette math from product heuristics such as role labels or palette ranking.
| Input | Expected output | Notes |
|---|---|---|
| Seed #336699 to HSL | h=210, s=50%, l=40% | Normalized seed values used for hue rotations |
| #336699 complementary hue +180deg | #996633 | Same saturation and lightness, hue normalized to 30deg |
| #336699 analogous hue -30deg | #339999 | Same saturation and lightness, hue 180deg |
| #336699 analogous hue +30deg | #333399 | Same saturation and lightness, hue 240deg |
| #336699 mixed 50% toward #FFFFFF in sRGB | #99B3CC | RGB tint vector |
| #336699 mixed 50% toward #000000 in sRGB | #1A334D | RGB shade vector |
These references anchor the public standards and formats used by Hue Codex. Status badges distinguish stable standards, drafts, Hue Codex heuristics, approximations, and browser-dependent behavior.
These Hue Codex tools link to this methodology because they depend on the formulas, assumptions, limits, or data policy described here.