Skip to content

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

@hyperknot

Description

@hyperknot

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}',`)
})

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions