Huetone

github.com ↗

Edit a colour system in perceptual coordinates and copy design tokens.

SI Score
80/100
Pricing
Open Source AI reading, not confirmed
Free plan
Not confirmed
Sign-up required
Not confirmed

Ask SI about Huetone

Answers use saved listing facts and recorded sources.
Homepage screenshot
Screenshot of the Huetone homepage

What it does

Huetone is an MIT-licensed colour-system editor with lightness, chroma and hue controls. It compares colour relationships, switches between CIELCH and OKLCH views and exports CSS variables or JSON tokens.

Paste a colour or edit its numeric L, C and H values. Arrow keys select another swatch; holding L, C or H with an arrow adjusts the corresponding channel. Rows and columns can be moved or duplicated with modifier-key shortcuts. Holding B previews the palette in greys.

Chart settings switch the colour model and show P3 or Rec. 2020 boundaries. The hexadecimal field turns red for a colour outside sRGB. Copy tokens produces JSON, while Copy CSS variables provides a stylesheet handoff. The editable JSON palette field also accepts a replacement palette.

Huetone’s help identifies APCA as a developing contrast method. Its results must remain distinct from a WCAG 2 contrast-ratio result. Local setup uses Yarn, and the repository contains the application’s help and export implementation.

Strengths

  • Perceptual channels and keyboard controls support systematic edits.
  • Exports include CSS variables and JSON design tokens.

Watch out for

  • An APCA result is not a WCAG 2 contrast-ratio pass.

Best for

  • Design-system work requiring deliberate colour relationships

Sources