Taste the smell of nature: smart-color

[arranzeyuwang]

smart-color is the combination of automated color-related components in AVA. It provides excellent color generation, optimization, and other computation options. You can click its repo for detail.

Its pipeline can be shown as follows.

✨ 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: Overlap 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

Back to the Big Picture.