Move color work into production

Choose the right export

Exports do not replace review. Confirm naming, roles, accessibility, browser support, and ownership before merging generated output into production.

CSS custom properties

CSS variables are the simplest way to move a color or small palette into a web project.

:root {
  --color-primary: #1B8E2D;
  --color-surface: #FFFFFF;
  --color-text: #111827;
}

.button {
  color: var(--color-surface);
  background: var(--color-primary);
}

Use semantic names

Palette Studio initially exports numbered palette positions because HexCheck cannot know your intended role. Rename those variables before production when the roles are known.

• Prefer --color-action-primary over --palette-1.
• Keep raw primitives separate from semantic aliases in larger systems.
• Include state tokens such as hover, active, disabled, focus, success, warning, and error.

Tailwind configuration

Palette Studio can format the five swatches as a Tailwind-compatible color object. Use the result as a starting point for a project theme.

colors: {
  palette: {
    1: '#8493AA',
    2: '#1B8E2D',
    3: '#F2C94C',
    4: '#EB5757',
    5: '#111827'
  }
}

Replace positional keys with meaningful scale or role names. If the colors are not a true tonal scale, do not label them 50 through 900 merely to resemble a framework convention.

JSON and design tokens

JSON is useful when the data needs to be consumed by scripts, build tools, native applications, or design-token pipelines.

{
  "color": {
    "brand": {
      "primary": { "value": "#1B8E2D", "type": "color" }
    },
    "text": {
      "primary": { "value": "#111827", "type": "color" }
    }
  }
}

HexCheck’s Figma-compatible JSON follows a design-token structure that can preserve token types. Your organization may use a different schema or the Design Tokens Community Group format; adapt names and nesting to the consuming system.

• Keep values machine-readable and role names stable.
• Avoid embedding presentation-specific labels in token IDs.
• Document aliases and fallback behavior.
• Validate JSON before committing it.

Figma palette and typography exports

Palette Studio can copy or download Figma-compatible color variables. Brand Kits can keep colors and typography settings together, including heading and body sizes and weights.

A generated file is not automatically installed into a Figma library. Import or transform it with the plugin, script, or token workflow your team uses.

SVG gradient export

Gradient Studio can download linear and radial gradients as an SVG rectangle with a gradient definition. SVG is useful for design applications, image workflows, and portable vector assets.

• Linear export converts the CSS angle into SVG gradient coordinates.
• Radial export creates an SVG radial gradient.
• Conic gradients currently use CSS export rather than SVG download.
• Advanced CSS interpolation spaces may not translate exactly into basic SVG gradient interpolation.

Contrast reports and scan output

Contrast

Copy the pair with its ratio when you need a review note. Use a share URL when another person should open the exact pair in Contrast Lab. Copy CSS when the pair should become implementation variables.

Website Scanner

Scanner’s suggested token export is a draft derived from frequency and probable role. Rename and verify every token, remove third-party or irrelevant colors, and test final pairings before treating it as a design system.

Validate before production

• Confirm every hex or functional value parses in the target platform.
• Run JSON through a parser or schema validator.
• Test advanced CSS color and gradient syntax in supported browsers.
• Check wide-gamut colors on sRGB and wide-gamut displays.
• Verify all foreground/background pairs and component states.
• Confirm fonts, sizes, and weights exist in the production type system.
• Remove unused values and accidental duplicates.
• Review third-party brand and collection licensing.
• Store the source HexCheck URL or workspace reference with the exported artifact.

Version the color system

Once an export is used in a product, treat changes as design-system changes rather than casual swatch edits.

• Commit token files to version control.
• Describe role changes and migration impact.
• Run automated contrast checks on critical token pairs.
• Keep theme variants aligned.
• Record the source palette, Brand Kit, gradient, or scan used for the release.
• Use deprecation periods when renaming widely used tokens.