Color Computation

2 min read

Color Computation

Blend colors, brighten or darken colors.

Usage

# colorBlend(colorTop: Color, colorBottom: Color, mode: BlendMode='normal') => Color

Computes the color when two colors are overlapped. Different overlapping order will result in different colors.

Valid blend modes are normal, darken, multiply, colorBurn, linearBurn, lighten, screen, colorDodge, linearDodge, overlay, softLight, hardLight, vividLight, linearLight, pinLight, difference, exclusion , hue, saturation, color, luminosity.

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

const red = {
  model: 'rgba',
  value: { r: 255, g: 0, b: 0, a: 0.4 },
};
const blue = {
  model: 'rgba',
  value: { r: 0, g: 0, b: 255, a: 0.8 },
};
const color1 = colorBlend(blue, red);
// { model: 'rgba', value: { r: 23, g: 0, b: 232, a: 0.88 } } 
const color2 = colorBlend(red, blue);
// { model: 'rgba', value: { r: 116, g: 0, b: 139, a: 0.88 } }


const colorTop = {
  model: 'rgb',
  value: { r: 91, g: 143, b: 249 }
};
const colorBottom = {
  model:"rgb",
  value:{r:97,g:221,b:170}
};
colorBlend(colorTop, colorBottom, "multiply");
// { "model": "rgb", "value": { "r": 34, "g": 123, "b": 166 }}

# colorBrighten(color: Color, value: number=1) => Color

Get brighter color.

# colorDarken(color: Color, value: number=1) => Color

Get darker color.

import { colorBrighten, colorDarken } from '@antv/smart-color';

const color = {
  model: 'rgb',
  value: { r: 24, g: 144, b: 255 },
};

colorBrighten(color);
// { model: 'rgb', value: { r: 64, g: 169, b: 255 } } 
colorBrighten(color, 3);
// { model: 'rgb', value: { r: 145, g: 213, b: 255 } }

colorDarken(color);
// { model: 'rgb', value: { r: 9, g: 109, b: 217 } } 
colorDarken(color, 3);
// { model: 'rgb', value: { r: 0, g: 58, b: 140 } }