Important: This documentation is about an older version. It's relevant only to the release noted, many of the features and functions have been updated or replaced. Please view the current version.

Documentationbreadcrumb arrow Grafana documentationbreadcrumb arrow API Referencebreadcrumb arrow @grafana/databreadcrumb arrow colorManipulator
Enterprise Open source

colorManipulator namespace

This API is provided as a preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.

colorManipulator namespace

Import

typescript 
import { colorManipulator } from '@grafana/data';

Functions

FunctionDescription
alpha(color, value)(BETA) Set the absolute transparency of a color. Any existing alpha values are overwritten.
darken(color, coefficient)(BETA) Darkens a color.
decomposeColor(color)(BETA) Returns an object with the type and values of a color.Note: Does not support rgb % values.
emphasize(color, coefficient)(BETA) Darken or lighten a color, depending on its luminance. Light colors are darkened, dark colors are lightened.
getContrastRatio(foreground, background, canvas)(BETA) Calculates the contrast ratio between two colors.Formula: https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
getLuminance(color, background)(BETA) The relative brightness of any point in a color space, normalized to 0 for darkest black and 1 for lightest white.Formula: https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
hexToRgb(color)(BETA) Converts a color from CSS hex format to CSS rgb format.
hslToRgb(color)(BETA) Converts a color from hsl format to rgb format.
lighten(color, coefficient)(BETA) Lightens a color.
recomposeColor(color)(BETA) Converts a color object with type and values to a string.
rgbToHex(color)(BETA) Converts a color from CSS rgb format to CSS hex format.