Info

chroma

Get the chroma (color intensity) of a color, calculated as (max - min) / 255 from RGB channels.

chroma(input: string): number

Returns a value from 0 (no color, grayscale) to 1 (fully saturated).

import { chroma } from 'colorizr';

chroma('#ff0044'); // 1
chroma('#808080'); // 0
chroma('#bf4060'); // 0.498

Playground

1

luminance

Get the WCAG relative luminance of a color. Returns a value from 0 (black) to 1 (white).

luminance(input: string): number

import { luminance } from 'colorizr';

luminance('#000000'); // 0
luminance('#ff0044'); // 0.2168
luminance('#ffffff'); // 1

Playground

0.2168

name

Get the CSS named color that matches the input, or return the hex value if no match.

name(input: string): string

import { name } from 'colorizr';

name('#ff0000'); // 'red'
name('#ff0044'); // '#ff0044' (no exact CSS name match)
name('#ffa500'); // 'orange'

Playground

red

opacity

Get the opacity value of a color.

opacity(input: string): number

import { opacity } from 'colorizr';

opacity('#ff0044');   // 1
opacity('#ff004480'); // 0.5
opacity('rgb(255 0 68 / 50%)'); // 0.5

Playground

0.5