How to replicate the website's functionality for a single input color
- Dominant language
- JavaScript
- Stars
- 2.1k
- Forks
- 130
- PR merge metrics
- No merged PRs in 30d
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}',`)
})
```
Contributor guide
Research direction
No repository file or test is named. Start by running the provided Node.js example with a single input color, then inspect the BackgroundColor implementation and the distributeLightness option. Done should be a confirmed explanation or a reproducible, scoped change request for the lightness-scale behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, node.js
- Domain
- design
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100