adobe / adobe/leonardo

How to replicate the website's functionality for a single input color

Open
#254 0 comments 0 reactions 0 assignees View on GitHub
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:

Image

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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.