Methodology

How Hue Codex calculates, ranks, and exports color.

Read the formulas, assumptions, edge cases, validation checks, and limits behind the tools, from WCAG contrast and OKLCH conversion to image extraction and export formats.

WCAG CSS Color 4 CSS Color 5 draft Design Tokens draft Browser-dependent Approximation

Start with contrast Read conversion math Browse tools

10methodology pages

27public tools mapped

v1.10Methodology version

2026-07-06Last updated

WCAGcontrast math

CSScolor syntax

Trust boundary

What is standards-based vs Hue Codex heuristic?

Hue Codex separates external formulas from product guidance. WCAG contrast math and stable CSS color conversion are standards-based; palette ranking, role hints, color-difference bands, and CVD risk labels are Hue Codex heuristics for review.

WCAG CSS Color 4 CSS Color 5 draft Design Tokens draft Browser-dependent Approximation

Standards-based

Standard

Used when an external standard defines the formula, threshold, syntax, or data behavior. Examples include WCAG relative luminance, WCAG contrast thresholds, stable CSS Color 4 conversion behavior, and CSS named color definitions.

Hue Codex heuristic

Used when Hue Codex adds product judgment on top of the math. Examples include palette ranking, role hints, best single candidate recommendations, color-difference bands, image swatch scoring, and color-vision risk labels.

Examples of formula-backed checks versus Hue Codex guidance.
User question	Standards-based part	Hue Codex heuristic part
Does this text pair pass?	WCAG luminance and contrast thresholds decide pass/fail from the raw ratio.	Suggested replacement colors rank candidates by search distance and usefulness.
Which palette colors should become roles?	WCAG metadata can flag readable foreground/background pairs.	Primary, accent, surface, semantic role hints, and palette ranking are Hue Codex guidance.
Are two colors different enough?	Delta E 76 and OKLab distance use documented color-space math.	Labels such as close variant, distinct palette color, or hue-only risk are review bands.

Global caveats

Known limitations across all tools.

These limits apply across Hue Codex even when a specific tool has more detailed validation notes on its methodology page.

Generated palettes are starting points

Hue Codex heuristic

Palette rankings, role hints, harmony choices, and semantic suggestions help begin a color system, but they still need brand, product, content, and component review.

Contrast is not full accessibility

WCAG Hue Codex heuristic

WCAG contrast ratios are important standards-based checks, but accessible design also depends on typography, layout, state cues, labels, motion, interaction, and assistive technology behavior.

Image extraction is approximate

Approximation Browser-dependent

Extracted palettes depend on sampling, compression, transparency, canvas pixels, browser color management, and the image content selected for analysis.

Print values are not press proofs

Approximation CSS Color 5 draft

CMYK and print-oriented values are communication aids, not press-ready conversions. Final print work needs ICC profiles, stock, ink limits, proofing, and vendor guidance.

Methodology library

Shared trust pages for the toolset.

Each page supports multiple tools so the formulas, standards, assumptions, validation examples, and caveats stay consistent across Hue Codex.

WCAG W3C Web Content Accessibility Guidelines contrast formulas and thresholds used for accessibility checks.

CSS Color 4 CSS Color Module Level 4 Candidate Recommendation Draft context, plus broadly implemented color syntax and conversion behavior.

CSS Color 5 draft CSS Color Module Level 5 draft features such as color-mix(), light-dark(), contrast-color(), and device-cmyk().

Design Tokens draft Design Tokens Format Module preview draft context; not treated as authoritative or final implementation guidance.

Standard Stable standard or standards-backed behavior used as authority, such as WCAG 2.2 and broadly implemented CSS Color 4 behavior.

Draft standard Draft, candidate, or preview specification material, such as CSS Color 5 features or the Design Tokens draft; not treated as final authority.

Hue Codex heuristic Hue Codex ranking, role hints, bands, labels, or workflow guidance rather than an external standard.

Approximation Model or estimate with known limits, including CMYK, color-vision simulation, image palette extraction, or CSS duotone output.

Browser-dependent Output depends on browser APIs, rendering, color management, canvas pixels, clipboard, download, or CSS support.

Methodology How Hue Codex calculates WCAG contrast The Hue Codex methodology for WCAG contrast ratios, relative luminance, AA and AAA thresholds, non-text contrast, focus rings, link checks, and contrast limits.

Standard Hue Codex heuristic Browser-dependent

Methodology Color conversion, color spaces, and rounding How Hue Codex parses, normalizes, converts, rounds, clamps, and displays HEX, RGB, HSL, HWB, Lab, LCH, OKLab, OKLCH, XYZ, and related CSS color values.

Standard Draft standard Browser-dependent

Methodology How Hue Codex generates palettes and scales How Hue Codex creates harmonies, role-based palettes, tint and shade scales, lightness ladders, warm and cool variants, and accessibility metadata.

Hue Codex heuristic Standard Draft standard Approximation

Methodology Color mixing, opacity, and gradient interpolation How Hue Codex blends colors, composites opacity, generates gradient CSS, samples gradients, and extracts gradient palettes.

Draft standard Standard Hue Codex heuristic Approximation Browser-dependent

Methodology Gamut checks, wide-gamut CSS, and print caveats How Hue Codex treats sRGB source colors, wide-gamut display spaces, CSS color syntax, approximate CMYK, clipping, fallback values, and print limitations.

Standard Draft standard Approximation Browser-dependent

Methodology Color difference: Delta E and OKLab distance How Hue Codex calculates Delta E 76, OKLab distance, color-difference bands, pair ranking, and color-difference limitations.

Standard Hue Codex heuristic Approximation

Methodology Color-vision simulation model and limits How Hue Codex simulates common color-vision differences, evaluates pair risks, ranks hue-only collapse, and explains simulation limits.

Approximation Hue Codex heuristic Standard

Methodology Image sampling, palette extraction, and duotone processing How Hue Codex samples pixels, extracts image palettes, handles transparent pixels, ranks image swatches, processes duotones, exports PNG files, and protects local image privacy.

Browser-dependent Approximation Hue Codex heuristic

Methodology Export formats, tokens, CSS variables, and fallbacks How Hue Codex formats CSS variables, JSON, token-style JSON, Sass, Tailwind-style values, Markdown reports, SVG/PNG exports, and browser fallbacks.

Standard Draft standard Hue Codex heuristic Approximation Browser-dependent

Methodology Reference data sources and editorial policy How Hue Codex handles CSS named colors, glossary entries, editorial definitions, source notes, caveats, and review dates.

Standard Hue Codex heuristic Approximation

Coverage matrix

Which methodology pages explain each tool output.

This matrix follows the public Tools page order and uses the same methodology mapping shown on individual tool pages.

27 public tools mapped against 10 methodology pages.
Tool	Contrast	Conversion	Palette	Mixing	Gamut	Difference	CVD	Image	Export	Reference
Color Picker Core tools
Color Converter Core tools
Contrast Checker Core tools
Palette Generator Core tools
CSS Color Generator CSS tools
CSS Gradient Generator CSS tools
Color Harmonies Palette tools
Tint, Shade, and Tone Generator Palette tools
Accessible Text Color Palette tools
CSS Named Colors Reference Reference tools
Color Glossary Reference tools
Color Model Comparison Reference tools
Gamut Checker Reference tools
Color Difference Calculator Reference tools
Color Mixer Adjustment tools
Opacity Calculator Adjustment tools
Color Temperature Adjuster Adjustment tools
Saturation and Chroma Adjuster Adjustment tools
Lightness Ladder Generator Adjustment tools
Gradient Palette Extractor Adjustment tools
Color Blindness Simulator Accessibility tools
Accessible Pair Finder Accessibility tools
Focus Ring Contrast Tool Accessibility tools
Link Color Checker Accessibility tools
Image Eyedropper Image tools
Image Palette Extractor Image tools
Duotone Generator Image tools