Palette Optimization

3 min read

Palette Optimization

Usage

# paletteOptimization(palette: Palette, configuration: OptimizerConfiguration={}) => Palette

Optimize palette to enhance color discriminability. Our optimization strategy is to increase the minimal difference among different pairs of colors.

As shown in the figure below, we visualize the differences between colors through a matrix. The blocks highlighted in red are below the threshold and the corresponding two colors are not easily distinguishable. We expect to make the difference between all colors greater than a threshold with the help of an optimization algorithm.

optimize palette
  • palette is the palette that needs to be optimized.
  • configuration configure the palette optimization.
PropertiesTypeDescriptionDefault
simulationTypeSimulationTypeThe types of simulations, the normal case, the eight different modes of color blindness, and the colors in grayscale mode."normal"
lockedboolean[]Each item in the array indicates whether the color of the same index in the color palette should be kept constant during optimization.any[]
colorDifferenceMeasureColorDifferenceMeasureMeasure used to assess color differences when optimizing. You can find more details in colorDifference.euclidean
thresholdnumberThe minimum difference expected to be achieved between the colors in the optimized palette. Since different color difference methods have different ranges of values, they have different default thresholds. However, this threshold is not always reached in each optimization, and it depends mainly on the number of colors in this palette and the difference at the beginning.30(euclidean)
20(CIEDE2000)
backgroundColorColorThe background color of the palette. The background color plays a role when the palette contains transparent or semi-transparent colors, because the semi-transparent colors will behave differently on different background colors.{ model: 'rgb', value: { r: 255, g: 255, b: 255 } }(white)
colorModelColorModelThe color model used in the optimization. Not effective in grayscale mode.hsv
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"
});
// {
//   name: 'color4',
//   semantic: null,
//   type: 'categorical',
//   colors: [
//     { model: 'lab', value: { l: 50, a: 1.884390226403243, b: -21.110092594683195 } },
//     { model: 'lab', value: { l: 67, a: 15.189939985936984, b: -58.16592090107158 } },
//     { model: 'lab', value: { l: 88, a: -46.47148306857496, b: 14.77171302964486 } },
//     { model: 'lab', value: { l: 107, a: 7.792165626943515, b: 79.05751395687457 } }
//   ]
// }
Before: palette before optimization
After: palette after optimization