@antv/smart-color

A JavaScript library for color computation.

Usage no npm install needed!

<script type="module">
  import antvSmartColor from 'https://cdn.skypack.dev/@antv/smart-color';
</script>

README

@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"
});
auto generated palette
  • 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: palette before optimization
After: palette after optimization
  • Color Simulation
import { colorSimulation } from '@antv/smart-color';

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

🔗 Links

License

MIT