EvaGradient & Skachatok
Skachatok
Hey, I’ve been experimenting with AI‑powered color palette generators to speed up workflow—any tools you swear by that let you blend colors the way you do, like a visual symphony?
EvaGradient
Hey! If you want a tool that feels like a visual symphony, try Colormind for neural‑generated palettes, Adobe Color for harmonious choices, and Coolors for quick tweaks. Happy Hues shows real‑world examples that can inspire you, and Paletton lets you dial in precise blends. If you’re into plugins, the Palette Creator in Photoshop can automate the process, and you can always layer those colors in a vector editor like Illustrator for that final symphonic touch. Happy experimenting!
Skachatok
Nice list, but I’m still hunting for something that auto‑generates palettes straight from a photo or a mood board. A tool that reads a screenshot and spits out complementary colors would cut half the time. Also, I love scripts that sync these palettes into design systems automatically—no manual copy‑paste. If you’ve got a plug‑in that does that, share it. Otherwise, we can stick to Colormind and Coolors, but I’ll need an API for bulk usage.
EvaGradient
Sounds like you’re looking for that “snapshot‑to‑palette” magic. A quick win is the Adobe Capture mobile app—snap a photo, it extracts a color set and you can push that straight into your Adobe CC library via the Creative Cloud sync. If you’re already in Figma, the Color Exporter plugin pulls colors from any image and writes them into your design system file automatically. For true API‑heavy flow, check out the Colormind API or the Coolors API; both let you upload an image and get a JSON palette back, which you can feed into your own script that writes to a Style Dictionary or a custom design‑system database. If you’re comfortable with Node, a tiny wrapper around the Adobe XD API can push those colors into shared libraries in bulk. Hope that cuts the copy‑paste loop!
Skachatok
Great, that’s exactly the workflow I need. Adobe Capture is solid for quick grabs, and the Figma Color Exporter plugin cuts a ton of time. I’ll start pulling palettes via the Coolors API, feed them into Style Dictionary, and sync everything back to my design system. If you spot any faster sync tricks or script snippets, drop them in—speed is king.
EvaGradient
Here’s a quick Node script that pulls a palette from Coolors, feeds it into Style Dictionary, and then pushes it to your design system file. Adjust the URLs and paths to match your setup.
```js
const fetch = require('node-fetch')
const fs = require('fs')
const StyleDictionary = require('style-dictionary')
// 1️⃣ Get a palette from Coolors (replace <YOUR_KEY> with your API key)
async function getPalette(id) {
const res = await fetch(`https://coolors.co/api/palette/${id}?key=<YOUR_KEY>`)
const data = await res.json()
// data.colors is an array of hex strings
return data.colors.map((hex, i) => ({ name: `color${i+1}`, value: hex }))
}
// 2️⃣ Write the palette to a JSON file for Style Dictionary
async function writePaletteFile(colors) {
const json = { colors: {} }
colors.forEach(c => { json.colors[c.name] = { value: c.value } })
fs.writeFileSync('palette.json', JSON.stringify(json, null, 2))
}
// 3️⃣ Build Style Dictionary
function buildStyleDictionary() {
StyleDictionary.extend({
source: ['palette.json'],
platforms: {
css: {
transformGroup: 'css',
buildPath: 'build/css/',
files: [{ destination: 'variables.css', format: 'css/variables' }]
}
}
}).buildAllPlatforms()
}
// 4️⃣ Run everything
async function run() {
const paletteId = '123456' // use your Coolors palette ID
const colors = await getPalette(paletteId)
await writePaletteFile(colors)
buildStyleDictionary()
console.log('Palette synced to CSS variables!')
}
run()
```
A few tips for speed:
- Cache the API response if you pull the same palette often.
- Use environment variables for keys instead of hard‑coding them.
- If your design system lives in a Git repo, you can commit the generated CSS file and push it automatically after the build.
That should cut the manual copy‑paste time and keep everything in sync. Happy blazing!
Skachatok
Nice script! Just a couple of quick tweaks to make it bullet‑proof:
1. Wrap the fetch in try/catch so you can see API failures instead of crashing.
2. Pull the API key from process.env and add a fallback error if it’s missing – no more hard‑coding.
3. Use `fs.promises.writeFile` for async writes; that keeps the flow non‑blocking.
4. If your repo auto‑deploys, add a step to run `git add`, `commit` with a timestamped message and `push`.
And if you pull many palettes per day, cache the JSON in a local `.cache/` folder keyed by ID. That cuts down on API calls and speeds up CI runs. Happy automating!
EvaGradient
Got it—here’s the polished version in plain JS: wrap fetch in try/catch, pull the key from process.env, async writeFile, git steps, and a tiny cache for repeated IDs.
```js
const fetch = require('node-fetch')
const fs = require('fs').promises
const path = require('path')
const StyleDictionary = require('style-dictionary')
// get API key safely
const apiKey = process.env.COOLORS_KEY
if (!apiKey) {
console.error('❌ COOLORS_KEY missing in environment variables')
process.exit(1)
}
// helper to fetch palette with error handling
async function getPalette(id) {
try {
const res = await fetch(`https://coolors.co/api/palette/${id}?key=${apiKey}`)
if (!res.ok) throw new Error(\`API returned \${res.status}\`)
const data = await res.json()
return data.colors.map((hex, i) => ({ name: \`color\${i+1}\`, value: hex }))
} catch (err) {
console.error('⚠️ Failed to fetch palette:', err.message)
throw err
}
}
// cache for repeat runs
const cacheDir = path.resolve('.cache')
await fs.mkdir(cacheDir, { recursive: true })
async function getCachedPalette(id) {
const filePath = path.join(cacheDir, \`\${id}.json\`)
try {
const cached = await fs.readFile(filePath, 'utf8')
return JSON.parse(cached)
} catch (_) { /* ignore missing cache */ }
const palette = await getPalette(id)
await fs.writeFile(filePath, JSON.stringify(palette))
return palette
}
// write to Style Dictionary source file
async function writePaletteFile(colors) {
const json = { colors: {} }
colors.forEach(c => { json.colors[c.name] = { value: c.value } })
await fs.writeFile('palette.json', JSON.stringify(json, null, 2))
}
// build CSS variables
function buildStyleDictionary() {
StyleDictionary.extend({
source: ['palette.json'],
platforms: {
css: {
transformGroup: 'css',
buildPath: 'build/css/',
files: [{ destination: 'variables.css', format: 'css/variables' }]
}
}
}).buildAllPlatforms()
}
// git helper
async function commitAndPush() {
const exec = require('child_process').execSync
const msg = \`🔄 Update palette \${new Date().toISOString()}\`
exec('git add .')
exec(\`git commit -m "\${msg}"\`, { stdio: 'inherit' })
exec('git push', { stdio: 'inherit' })
}
// main flow
async function run(id) {
const colors = await getCachedPalette(id)
await writePaletteFile(colors)
buildStyleDictionary()
console.log('✅ Palette synced!')
// if you want auto‑deploy:
// await commitAndPush()
}
run(process.argv[2] || '123456') // supply palette ID as argument
```
That should give you a solid, repeatable pipeline—no hard‑coded keys, graceful errors, and optional git deploy. Happy automating!