Skip to content
Huecode
Generate a palette

Words or image in. Palette out.

Turn text or an image into an accessible Tailwind color palette, with a live preview and code export.

Generate a paletteView on GitHub
  1. 01
    DescribeType a theme
  2. 02
    Generate8 roles, 11 shades each
  3. 03
    Preview in lightTokens on a real layout
  4. 04
    Preview in darkSame palette, dark tokens
Try your own theme in the app
Written theme
Palette8 roles · 11 steps
--how-it-works

From a few words or an image to tokens you can paste into your project

  1. 01

    Describe or upload

    Write a theme like “sunset over the sea” or start from an image. Plain text generation works offline and gives the same palette for the same words. Shuffle produces variations. With an Anthropic API key, the text path can ask Claude for a palette instead.

    Written thememidnight jazz mysterious
    Upload the image that inspires you today
  2. 02

    Preview

    Each color role gets an 11-step shade scale, plus semantic tokens for light and dark themes. See them applied to App, Components and Marketing mockups.

    Primary#35285b
    Secondary#2c3757
  3. 03

    Export

    Copy or download Tailwind v4, Tailwind v3, CSS variables or TypeScript tokens.

    @theme { --color-primary-400: #5e4a9a; --color-primary-600: #302550; --color-secondary-400: #506194; --color-secondary-600: #28314c;}
--live-preview

See the palette on an interface before you ship it

Switch between light and dark, and between soft and sharp corners. In the app, the same tokens drive App, Components and Marketing mockups.

--accessibility

Readable text tokens, by default

Huecode picks text shades from the neutral scale that reach at least 7:1 for body text and 4.5:1 for secondary text against the background, in light and dark. The app doesn't show these ratios; they are calculated here from the palette above, using the same rules.

  • Aa--text
    Light12.59:1AAA
  • Aa--text-2
    Light5.86:1AA
  • Aa--accent-fg
    Light13.08:1AAA
  • Aa--accent-soft-fg
    Light13.65:1AAA
  • Aa--text
    Dark12.59:1AAA
  • Aa--text-2
    Dark11.63:1AAA
  • Aa--accent-fg
    Dark6.33:1AA
  • Aa--accent-soft-fg
    Dark13.58:1AAA
--open-source: mit;

Help shape this tool - open source.

Run Huecode locally or host your own copy. Everything except AI enhancement works without an API key; for AI, bring your own Anthropic key. Contributions start with an issue.

View on GitHubContributing guide
Requires Node 22
$ git clone https://github.com/larisabarabas/huecode.git$ cd huecode$ npm ci$ npm run dev# open http://localhost:5173

Describe your product in a few words or upload an image that inspires you. Get the palette and the code.

Generate a palette