Color Evaluation

4 min read

Color Evaluation

Evaluate color discriminability and aesthetics.

Usage

# colorDifference(color1: Color, color2: Color, configuration: ColorDifferenceConfiguration={}) => number

Computes the discriminability between color1 and color2. It supports the assessment of color differences by different measures, such as Euclidean difference, CIEDE2000, contrast ratio.

  • configuration configure the calculation of color difference.
PropertiesTypeDescriptionDefault
measureColorDifferenceMeasureThe measure used to evaluate color differences."euclidean"
backgroundColorColorWhen the color is transparent or semi-transparent , the background color plays a role, as semi-transparent colors will behave differently on different background colors.{ model: 'rgb', value: { r: 255, g: 255, b: 255 } }(white)
colorModelColorModelOnly valid when measure is "euclidean", used to specify the color model used in computing the distance."lab"
  • Computes the Euclidean distance between two colors in a given color model (default is Lab). The range of Euclidean distance is depend on color model.
import { colorDifference } from '@antv/smart-color';

const color1 = {
  model: "rgb",
  value: { r: 91, g: 143, b: 249 },
}; 
const color2 = {
  model: "rgb",
  value: { r: 101, g: 120, b: 155 },
};

colorDifference(color1, color2); //40.71
colorDifference(color1, color2, {measure: 'euclidean', colorModel: 'rgb'}); //97.29
  • Computes the difference between two colors by CIEDE2000. The range of CIEDE2000 is [0, 100].
import { colorDifference } from '@antv/smart-color';

const color1 = {
  model: "rgb",
  value: { r: 91, g: 143, b: 249 },
}; 
const color2 = {
  model: "rgb",
  value: { r: 101, g: 120, b: 155 },
};

colorDifference(color1, color2, {measure: 'CIEDE2000'}); //14.12
  • Computes the difference between two colors by Contrast ratio. The range of Contrast ratio is [1, 21].
import { colorDifference } from '@antv/smart-color';

const color1 = {
  model: "rgb",
  value: { r: 91, g: 143, b: 249 },
}; 
const color2 = {
  model: "rgb",
  value: { r: 101, g: 120, b: 155 },
};

colorDifference(color1, color2, {measure: 'contrastRatio'});  //1.43
# colorAesthetic(color1: Color, color2: Color, configuration: ColorAestheticConfiguration={}) => number

Computes the aesthetic between color1 and color2. It supports the assessment of color aesthetics by different measures, such as pairPreference, harmony.

  • configuration configure the calculation of color aesthetic.
PropertiesTypeDescriptionDefault
measureColorAestheticMeasureThe measure used to evaluate color aesthetics."pairPreference"
backgroundColorColorWhen the color is transparent or semi-transparent , the background color plays a role, as semi-transparent colors will behave differently on different background colors.{ model: 'rgb', value: { r: 255, g: 255, b: 255 } }(white)
  • Computes the aesthetic between two colors by Pair Preference. The Pair Preference scoring function reflects people’s preference for color combinations that contain cool colors that differ in lightness and are similar in hue.
pair preference
import { colorAesthetic } from '@antv/smart-color';

const color1 = {
  model: "rgb",
  value: { r: 91, g: 143, b: 249 },
}; 
const color2 = {
  model: "rgb",
  value: { r: 101, g: 120, b: 155 },
};

colorAesthetic(color1, color2);  //52.40
  • Computes the aesthetic between two colors by color harmony. Harmony scores are consisting of three independent color harmony factors: chromatic effect, lightness effect, and hue effect.
import { colorAesthetic } from '@antv/smart-color';

const color1 = {
  model: "rgb",
  value: { r: 91, g: 143, b: 249 },
}; 
const color2 = {
  model: "rgb",
  value: { r: 101, g: 120, b: 155 },
};

colorAesthetic(color1, color2, { "measure": "harmony" });  //-0.13