smart-color's Introduction

@antv/smart-color

A JavaScript library for color computation.

✨ Features

Palette Generation: Generate categorical or discrete scale palette based on color scheme.
Palette Optimization: Optimize palette to enhance color discriminability.
Palette Extraction: Get palettes from strings and images.
Color Simulation: Simulate color blindness and color in grayscale.
Color Evaluation: Evaluate color discriminability and aesthetics.
Color Computation: Blend colors, brighten or darken colors.
Color Conversion: Convert color into different formats.

📦 Installation

$ npm install @antv/smart-color

🔨 Getting Started

Palette Generation

import { paletteGeneration } from '@antv/smart-color';

paletteGeneration("monochromatic", {
  color: {
    model: "rgb",
    value: { r: 91, g: 143, b: 249 },
  },
  count: 7,
  tendency: "shade"
});

Palette Optimization

import { PaletteOptimization } from '@antv/smart-color';

const palette = {
  name: "color4",
  semantic: null,
  type: "categorical",
  colors: [
    { model: "rgb", value: { r: 101, g: 120, b: 155 }, },
    { model: "rgb", value: { r: 91, g: 143, b: 249 }, },
    { model: "rgb", value: { r: 97, g: 221, b: 170 }, },
    { model: "rgb", value: { r: 246, g: 189, b: 22 }, }
  ],
}
paletteOptimization(palette, {
  locked: [true],
  simulationType: "grayscale"
});

Before:

After:

Color Simulation

import { colorSimulation } from '@antv/smart-color';

const color = {
  model: "rgb",
  value: { r: 91, g: 143, b: 249 },
}
colorSimulation(color, "achromatomaly");

🔗 Links

API Reference

License

MIT

smart-color's People

Contributors

Stargazers

Watchers

smart-color's Issues

feat: add nameToColor

有没有计划添加一个将 css 支持的 color string 转换成 color object 的计划？期望的使用方式如下：

import { nameToColor } from '@antv/smart-color';

const red = nameToColor('red'); // { mode: 'rgb', values: {r: 255, g: 0, b: 0}}
const steelblue = nameToColor('steelblue'); // 我现在也不知道这个颜色各个通道的值 😭