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#!/usr/bin/env node
  2. 2// Exports a color palette as JSON, CSS variables, a GIMP palette (.gpl), and an SVG swatch
  3. 3// sheet. Node built-ins only.
  4. 4// Usage: node scripts/export-palette.mjs --in data/colors.json [--name Brand] [--prefix brand]
  5. 5// [--out out]
  6. 6// Input: { "groups": [{ "name", "note"?, "colors": { name: "#RRGGBB" } }] } or a flat
  7. 7// { name: "#RRGGBB" } map.
  8. 8import { mkdirSync, readFileSync, writeFileSync } from "node:fs";
  9. 9import { join } from "node:path";
  10. 10import { parseArgs } from "node:util";
  11. 11
  12. 12const { values } = parseArgs({
  13. 13 options: {
  14. 14 in: { type: "string" },
  15. 15 name: { type: "string", default: "Palette" },
  16. 16 prefix: { type: "string" },
  17. 17 out: { type: "string", default: "out" },
  18. 18 },
  19. 19});
  20. 20if (!values.in) {
  21. 21 console.error("Missing --in: a JSON file of colors.");
  22. 22 process.exit(2);
  23. 23}
  24. 24
  25. 25const raw = JSON.parse(readFileSync(values.in, "utf8"));
  26. 26const groups = Array.isArray(raw.groups)
  27. 27 ? raw.groups
  28. 28 : [{ name: values.name, note: "", colors: raw }];
  29. 29const HEX = /^#[0-9a-f]{6}$/i;
  30. 30for (const g of groups) {
  31. 31 for (const [key, hex] of Object.entries(g.colors ?? {})) {
  32. 32 if (typeof hex !== "string" || !HEX.test(hex)) {
  33. 33 console.error(`"${key}" in "${g.name}" is not a #RRGGBB color: ${String(hex)}`);
  34. 34 process.exit(1);
  35. 35 }
  36. 36 }
  37. 37}
  38. 38
  39. 39const slug = (s) =>
  40. 40 s
  41. 41 .replace(/([a-z0-9])([A-Z])/g, "$1-$2")
  42. 42 .replace(/[^a-z0-9]+/gi, "-")
  43. 43 .replace(/^-|-$/g, "")
  44. 44 .toLowerCase();
  45. 45const prefix = slug(values.prefix ?? values.name);
  46. 46const esc = (s) => s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
  47. 47const all = groups.flatMap((g) => Object.entries(g.colors));
  48. 48mkdirSync(values.out, { recursive: true });
  49. 49
  50. 50writeFileSync(
  51. 51 join(values.out, "palette.json"),
  52. 52 JSON.stringify(
  53. 53 {
  54. 54 name: values.name,
  55. 55 groups: groups.map((g) => ({ name: g.name, note: g.note ?? "", colors: g.colors })),
  56. 56 },
  57. 57 null,
  58. 58 2,
  59. 59 ) + "\n",
  60. 60);
  61. 61
  62. 62writeFileSync(
  63. 63 join(values.out, "palette.css"),
  64. 64 `/* ${values.name} */\n:root {\n${all.map(([k, c]) => ` --${prefix}-${slug(k)}: ${c};`).join("\n")}\n}\n`,
  65. 65);
  66. 66
  67. 67writeFileSync(
  68. 68 join(values.out, "palette.gpl"),
  69. 69 `GIMP Palette\nName: ${values.name}\nColumns: 8\n#\n${all
  70. 70 .map(([k, c]) => {
  71. 71 const n = parseInt(c.slice(1), 16);
  72. 72 const ch = (s) => String((n >> s) & 255).padStart(3);
  73. 73 return `${ch(16)} ${ch(8)} ${ch(0)}\t${k}`;
  74. 74 })
  75. 75 .join("\n")}\n`,
  76. 76);
  77. 77
  78. 78// Swatch sheet: one row per group, the hex on each chip in a color that reads on it.
  79. 79const luminance = (c) => {
  80. 80 const n = parseInt(c.slice(1), 16);
  81. 81 return (0.299 * ((n >> 16) & 255) + 0.587 * ((n >> 8) & 255) + 0.114 * (n & 255)) / 255;
  82. 82};
  83. 83const W = 1600;
  84. 84const cols = 8;
  85. 85const sw = 172;
  86. 86const sh = 112;
  87. 87const gap = 16;
  88. 88let y = 96;
  89. 89const parts = [];
  90. 90for (const g of groups) {
  91. 91 parts.push(
  92. 92 `<text x="48" y="${y}" font-size="24" font-weight="700" fill="#222">${esc(g.name)}</text>`,
  93. 93 );
  94. 94 if (g.note) {
  95. 95 parts.push(`<text x="48" y="${y + 26}" font-size="16" fill="#666">${esc(g.note)}</text>`);
  96. 96 }
  97. 97 y += 48;
  98. 98 Object.entries(g.colors).forEach(([k, c], i) => {
  99. 99 const x = 48 + (i % cols) * (sw + gap);
  100. 100 const yy = y + Math.floor(i / cols) * (sh + 48);
  101. 101 const ink = luminance(c) > 0.55 ? "#222" : "#FFF";
  102. 102 parts.push(
  103. 103 `<rect x="${x}" y="${yy}" width="${sw}" height="${sh}" rx="14" fill="${c}" stroke="#0002"/>` +
  104. 104 `<text x="${x + 12}" y="${yy + sh - 14}" font-size="16" font-family="ui-monospace, Menlo, monospace" fill="${ink}">${c.toUpperCase()}</text>` +
  105. 105 `<text x="${x}" y="${yy + sh + 22}" font-size="15" fill="#222">${esc(k)}</text>`,
  106. 106 );
  107. 107 });
  108. 108 y += Math.ceil(Object.keys(g.colors).length / cols) * (sh + 48) + 24;
  109. 109}
  110. 110writeFileSync(
  111. 111 join(values.out, "palette.svg"),
  112. 112 `<svg xmlns="http://www.w3.org/2000/svg" width="${W}" height="${y}" viewBox="0 0 ${W} ${y}" font-family="system-ui, sans-serif">` +
  113. 113 `<rect width="100%" height="100%" fill="#FAFAF7"/>` +
  114. 114 `<text x="48" y="56" font-size="34" font-weight="800" fill="#222">${esc(values.name)}</text>` +
  115. 115 parts.join("") +
  116. 116 `</svg>\n`,
  117. 117);
  118. 118
  119. 119console.log(
  120. 120 `${String(all.length)} colors in ${String(groups.length)} groups -> ${values.out}/palette.{json,css,gpl,svg}`,
  121. 121);
Sign in to comment on a line