Skip to content
SlashClone
DiscoverUse in ClaudeSubmit a link
Sign in
Made by@slashclone

Palette export

@slashclone/palette-export

Turn your design tokens into a downloadable color palette: a swatch sheet (SVG), JSON, CSS variables, and a GIMP palette that Krita and Inkscape also open. Handy for briefing designers or image models with your exact colors. Reads one colors file and writes only to an out folder.

SkillContentv0.1.0 (latest)Tested
Use in Claude Save Like Clone Comment
Activity
New: be the first to try it
  1. 1---
  2. 2name: palette-export
  3. 3description: Export a project's colors as a shareable palette (SVG swatch sheet, JSON, CSS variables, GIMP palette). Use when someone asks for a download of their color palette, wants to brief a designer or an image model with exact brand colors, or needs their tokens in a design tool.
  4. 4---
  5. 5
  6. 6# Palette export
  7. 7
  8. 8Goal: the project's real colors, in files people can open anywhere, without retyping a single hex.
  9. 9
  10. 10## Steps
  11. 11
  12. 121. **Find the source of truth.** Look for the design tokens (a `tokens.ts`, `theme.ts`, Tailwind config, or CSS variables). Use the values the product actually ships, never colors guessed from screenshots.
  13. 132. **Write `data/colors.json`.** Group the colors the way the team talks about them (neutrals, brand, accents, status), with a short note on what each group is for. Format: see `examples/colors.json`. A flat `{ "name": "#RRGGBB" }` map works too.
  14. 143. **Run it:**
  15. 15 `node scripts/export-palette.mjs --in data/colors.json --name "Brand" --out out`
  16. 16 It writes `out/palette.json`, `palette.css`, `palette.gpl`, and `palette.svg`.
  17. 174. **Need a PNG?** Convert the SVG with whatever the machine has (on macOS, `qlmanage -t -s 2400 out/palette.svg`; elsewhere `rsvg-convert` or a browser screenshot). Say which tool you used.
  18. 185. **Hand it over.** Point to the files and name the few colors that set the look, with a note on proportions if the brand has one (for example, how much of a frame the accent should cover).
  19. 19
  20. 20## Rules
  21. 21
  22. 22- Every hex comes from the project's own tokens. If two sources disagree, say so and ask which wins.
  23. 23- Keep text and non-text colors labeled: a brand green that is only for marks must not be handed over as a text color.
  24. 24- Do not commit the exports unless the person asks; they are generated files.
Sign in to comment on a line