-
Notifications
You must be signed in to change notification settings - Fork 117
Open
Description
I'm trying my best to generate a nice looking adaptive palette for a single color. My aim would be to generate nice looking palettes, like in Spectrum or Radix colors.
I think I figured out most of it, however the lightness scale is still very much off. Lots of dark colors generated and almost no light ones. Does this look good, and I just need to tweak my brightness picking code? Or also, I've seen that there is the distributeLightness === 'polynomial code, which is unreachable unless I edit the library's code. Does it possibly solve my issue?
For reference Radix has relatively a lot of lighter colors which are quite necessary in UI design:
Here is my best try so far:
import { BackgroundColor } from '@adobe/leonardo-contrast-colors'
const inputHex = process.argv[2]
if (!inputHex) {
console.error('Usage: node palette-generator.js #FF5733')
process.exit(1)
}
// Generate the full lightness scale using BackgroundColor
const backgroundScale = new BackgroundColor({
name: 'myColor',
colorKeys: [inputHex],
colorspace: 'CAM02p',
smooth: true,
output: 'HEX',
})
const fullScale = backgroundScale.backgroundColorScale
// Calculate target lightness steps from 15% to 99.5%
const steps = 15
const minLightness = 15
const maxLightness = 99.5
const palette = Array.from({ length: steps }, (_, i) => {
const targetLightness = minLightness + (maxLightness - minLightness) * (i / (steps - 1))
// Map lightness percentage to array index (0-100% maps to indices 0-100)
const index = Math.round(targetLightness)
const color = fullScale[index] || fullScale[fullScale.length - 1]
return {
weight: steps - i,
color: color,
lightness: targetLightness,
}
})
palette.reverse()
palette.forEach(({ weight, color }) => {
console.log(` myColor${weight}: '${color}',`)
})
Metadata
Metadata
Assignees
Labels
No labels