Skip to content
FreeKitX

Color System Builder (Scales & Semantic Roles) - FreeKitX

Bookmark this tool

Save this page in your browser

On a phone, choose Add Bookmark from your browser’s Share or menu.

Build primitive 50–950 scales and light/dark semantic roles from brand colors entirely in your browser. Zero upload.

Color System Builder

Enter source colors, generate primitive scales, edit light/dark semantic mappings, and review realistic UI previews.

Source colors

Local handoff

Restore the versioned local draft, exchange a project JSON file, or share a size-bounded URL fragment that stays on this device.

Import colors

Paste plain colors, CSS custom properties, or DTCG 2025.10 JSON. Parsing never executes CSS, fetches resources, or changes the current project until you confirm replace or merge.

0

Related tools

Direct answer

A Color System Builder turns immutable source brand colors into primitive 50–950 scales plus editable light and dark semantic role mappings that stay local to the browser.

How to use this tool

1

Enter Source Colors

Paste HEX, oklch(), or color(display-p3 …) values and assign each source to Primary, Neutral, or another family with a 400/500/600 anchor.

2

Create the Project

Generate required Primary and Neutral scales, status scales, and default light/dark semantic mappings without mutating locked anchors.

3

Edit & Preview

Adjust scale steps or semantic mappings and review buttons, cards, forms, and status previews in light or dark mode.

Immutable Anchors and Semantic Layers

Source colors remain exact anchors at the chosen scale step. Primitive scales hold 50–950 steps per family. Semantic roles (background, surface, text, primary, on-primary, border, focus, and status roles) reference primitives separately for light and dark themes so implementation meaning stays separated from raw swatches.

  • Unresolved var(), relative color syntax, and color-mix() inputs are rejected with actionable errors.
  • Primary and Neutral scales are required; Secondary and Accent are optional; Success, Warning, and Destructive are always present.
  • All parsing and generation run client-side with local auto-save—no accounts or uploads.

Practical examples

Brand Blue Primary System

Input: Source: #2563eb as Primary @ 500

Output: Primary 50–950 scale + light/dark roles (primary, on-primary, focus) ready for Checker

Creates a complete handoff document from one brand blue without inventing a duplicate converter page.

Limitations

  • Does not invent values for unresolved CSS variables or color-mix(); paste concrete Color 4 values instead.
  • Aesthetic scale advice is heuristic guidance, not a conformance certification.

Frequently asked questions

Can I continue to Checker without exporting?

Yes. The shared Tool Island keeps one Color System document, so you can switch stages without navigation or re-import.

Does Builder upload my brand colors?

No. Colors, scales, and project files stay in browser memory and local storage. Nothing is sent to a processing server.

How does keyboard navigation work across stages?

Use the stage tabs to move between Builder, Checker, and Token Generator. Focus remains visible, and the page canonical URL does not change when you switch stages.

Authoritative References & Standards