Color Documentation

Color Palette Documentation

The authoritative color reference for your extracted design systems. Document every swatch with precision — hex codes, RGB values, semantic roles, and usage context — to build a complete and reproducible color specification from any wireframe source.

Primary
Secondary
Accent
Neutral
Error
Success

Hex & RGB

Dual-format color values for cross-platform accuracy

Semantic Roles

Classify each swatch by its function in the design system

Usage Context

Record exactly where each color appears in the wireframe

Add Color Swatch

Document an individual color swatch from your wireframe extraction. Provide the hex code, assign a semantic role, and describe where this color is used within the design to build a complete and traceable color specification.

Field Reference

  • Extraction ID — Links this swatch to a specific extraction record
  • Label — A descriptive name such as "Primary Blue" or "Surface Gray"
  • Hex Code — Six-digit hex value, e.g. #4F46E5
  • RGB Value — Optional RGB notation, e.g. rgb(79, 70, 229)
  • Role — Semantic classification within the design system
  • Usage Context — Where this color appears in the wireframe

Reference to the parent extraction record

A human-readable name for this color

Include the # prefix, e.g. #4F46E5

Optional RGB notation for cross-platform use

Semantic classification within the design system

Describe where and how this color is applied in the wireframe

Fields marked * are required

Documented Swatches

All color swatches recorded across your extractions. Each entry displays a live color preview, hex code, semantic role, and usage context for complete design system reference.

View Extractions

Loading color swatches...