Export formats, tokens, CSS variables, and fallbacks

Role names are converted to lowercase token-friendly slugs by replacing non-alphanumeric separators with hyphens. HEX values are normalized before export.

Palette and tool exports favor human-readable labels plus structured data so a designer, developer, or reviewer can understand why a value exists.

Modern CSS exports can include fallback declarations before newer syntax. Gradient exports include fallback CSS when the selected interpolation syntax may not be broadly supported.

Duotone CSS is labeled as an approximation because the source-size PNG is generated from actual canvas pixels, while CSS filters and blend modes depend on browser rendering and context.

• Readable exports may round values more aggressively than detailed or token exports.
• Browser support for modern CSS color functions should be checked before relying on those declarations alone.
• CSS Color 5 features such as color-mix(), light-dark(), and device-cmyk() are draft-standard context; exports should keep fallbacks or review notes when those features are used.
• Design-token JSON is intended as a practical handoff format, not a promise that every consuming tool will import it without mapping.
• Downloaded files are generated in the browser and use the current tool state at the time of export.

Export naming is deterministic. Fixed role palettes use unique role names; generated sequences add stable numeric suffixes or padded sample tokens so repeated labels do not overwrite each other.

slugify(value, fallback):
  slug = String(value)
    .trim()
    .toLowerCase()
    .replace(/[^a-z0-9]+/g, "-")
    .replace(/^-+|-+$/g, "")
  return slug or fallback

fixed_role_export_key(role):
  # Palettes use a fixed unique role set:
  # primary, secondary, accent, surface, text, border, success, warning, danger.
  return slugify(role, "color")

image_palette_export_key(label, index):
  # Dynamic image roles can repeat, so append the 1-based index.
  return slugify(label, "swatch-" + (index + 1)) + "-" + (index + 1)

gradient_palette_export_key(index):
  return "sample-" + pad_left(index + 1, 2, "0")

cvd_export_key(index):
  return "color-" + pad_left(index + 1, 2, "0")

round(value, places):
  multiplier = 10 ^ places
  return Math.round((Number(value) + Number.EPSILON) * multiplier) / multiplier

stage1_precision(mode):
  quick/rounded: basic 2, lab 4, ok 6, xyz 6
  css:           basic 2, lab 3, ok 5, xyz 5
  precise:       basic 4, lab 6, ok 8, xyz 8
  token/tokens:  basic 3, lab 5, ok 7, xyz 7

stage2_model_precision(mode):
  quick:   hue 0, percent 0, lab 1, ok 3, xyz 4, cmyk 0
  css:     hue 2, percent 2, lab 3, ok 5, xyz 5, cmyk 2
  precise: hue 3, percent 3, lab 5, ok 6, xyz 6, cmyk 3
  token:   hue 3, percent 3, lab 3, ok 5, xyz 6, cmyk 2

format rule:
  normalize HEX first
  calculate with raw values
  round only at display/export boundaries

Export pages are not primarily mathematical, but these deterministic vectors make naming, normalization, and token-shape behavior testable.

Tools using this methodology

These Hue Codex tools link to this methodology because they depend on the formulas, assumptions, limits, or data policy described here.