notes.dt.in.th

When generating colors of various hues, using the LCH color space generally produces a nicer result than using the HSL color space.

LCH

0
15
30
45
60
75
90
105
120
135
150
165
180
195
210
225
240
255
270
285
300
315
330
345

HSL

0
15
30
45
60
75
90
105
120
135
150
165
180
195
210
225
240
255
270
285
300
315
330
345

Using colord to convert LCH to RGB

// colord.ts
import { Plugin, colord, extend } from 'colord'
import lchPlugin from 'colord/plugins/lch'

extend([(lchPlugin as unknown) as Plugin])
export { colord }
colord({ h: hue, c: 72, l: 80 }).toRgbString()