Рецепты

Сгенерировать доступную палитру для кнопок

import { colorShades, bestTextColor, wcagLevel } from 'color-value-tools'

function buttonPalette(base: string) {
  return colorShades(base, 9).map((shade) => ({
    bg: shade,
    text: bestTextColor(shade),
    wcag: wcagLevel(bestTextColor(shade), shade),
  }))
}

buttonPalette('#3498db')
// [{ bg: '#ffffff', text: '#000000', wcag: 'AAA' }, ...]

Адаптация цвета под тему

import { isDark, lighten, darken } from 'color-value-tools'

function adaptToTheme(color: string, isDarkTheme: boolean): string {
  return isDarkTheme ? lighten(color, 20) : darken(color, 10)
}

Смешать два фирменных цвета в перцептивной середине

import { midpointColor } from 'color-value-tools'

const mid = midpointColor('#e74c3c', '#3498db') // середина в Oklab
const midLch = midpointColor('#e74c3c', '#3498db', { space: 'oklch' })

Построить триадную схему и проверить контраст

import { triadic, contrastRatio } from 'color-value-tools'

const [base, second, third] = triadic('#6c3483')
console.log(contrastRatio(base, '#ffffff')) // например 8.4
console.log(contrastRatio(second, '#ffffff'))

Конвертировать строку цвета сразу во все форматы

import { normalizeColor, rgbToOklch, rgbToCmyk, toColorP3String } from 'color-value-tools'

const n = normalizeColor('hsl(204, 70%, 53%)')
const oklch = rgbToOklch({ r: n.r!, g: n.g!, b: n.b! })
const cmyk = rgbToCmyk({ r: n.r!, g: n.g!, b: n.b! })
const p3 = toColorP3String(n.hex!)
console.log(n.hex, oklch, cmyk, p3)

Найти ближайший именованный CSS-цвет

import { toNearestNamedColor } from 'color-value-tools'

toNearestNamedColor('#1a8ccc') // 'steelblue'
toNearestNamedColor('#e74c3c') // 'tomato'

Случайная палитра в диапазоне оттенков

import { randomColor, colorShades } from 'color-value-tools'

const accent = randomColor({ hRange: [200, 260], sRange: [60, 80], lRange: [40, 60] })
const palette = colorShades(accent, 5)

Симулировать дальтонизм для палитры

import { triadic, simulateColorBlindness } from 'color-value-tools'

const palette = triadic('#e74c3c')
const deuteranopia = palette.map((c) => simulateColorBlindness(c, 'deuteranopia'))
// Сравните палитру и результат симуляции, чтобы проверить различимость

Ленивый градиент — обработка 10 000 цветов по одному

import { generateGradientColors } from 'color-value-tools'

for (const color of generateGradientColors('#1a1a2e', '#f5a623', 10_000, { mode: 'oklch' })) {
  ctx.fillStyle = color
  ctx.fillRect(x++, 0, 1, height)
}