Color-ESM Documentation & Interactive Examples

🎨 Constructor Examples

Create Color instances using various input formats:

String Inputs

Hex & Numeric Inputs

Array & Object Inputs

📊 Color Model Methods

Get and set color values in different color spaces:

Base Color:

rgb()

Get/set RGB values

color.rgb() → {r, g, b}
color.rgb(255, 100, 50)

hsl()

Get/set HSL values

color.hsl() → {h, s, l}
color.hsl(180, 50, 50)

hex()

Get/set hex string

color.hex() → "#ff6b6b"
color.hex("#4287f5")

hexa()

Get/set hex with alpha

color.hexa() → "#ff6b6bff"
color.hexa("#4287f580")

red(), green(), blue()

Get/set individual channels

color.red() → 255
color.red(100)

alpha()

Get/set alpha value

color.alpha() → 1
color.alpha(0.5)

📈 Channel Getters

Read individual color channel values:

Test Color:

hue(), saturationl(), lightness()

HSL channel getters

color.hue() → 0-360
color.saturationl() → 0-100
color.lightness() → 0-100

saturationv(), value()

HSV channel getters

color.saturationv()
color.value()

chroma(), gray(), white()

HWB and other getters

color.chroma()
color.gray()
color.white()

cyan(), magenta(), yellow(), black()

CMYK channel getters

color.cyan()
color.magenta()
color.yellow()
color.black()

x(), y(), z()

XYZ color space

color.x()
color.y()
color.z()

l(), a(), b()

LAB color space

color.l()
color.a()
color.b()

⛓️ Chainable Modifiers

Transform colors with chainable methods:

Base Color:

Lightness & Darkness

Lighten/Darken: 0.2

Saturation

Saturate/Desaturate: 0.3

Hue Rotation

Rotate Hue: 90°

lighten(amount)

Lighten color by amount (0-1)

color.lighten(0.5)

darken(amount)

Darken color by amount (0-1)

color.darken(0.3)

saturate(ratio)

Increase saturation

color.saturate(0.5)

desaturate(ratio)

Decrease saturation

color.desaturate(0.5)

grayscale()

Convert to grayscale

color.grayscale()

rotate(degrees)

Rotate hue by degrees

color.rotate(180)

invert() / negate()

Invert the color

color.invert()

whiten(amount)

Add whiteness (HWB)

color.whiten(0.3)

blacken(amount)

Add blackness (HWB)

color.blacken(0.3)

fade(ratio)

Decrease alpha

color.fade(0.5)

opaquer(ratio)

Increase alpha

color.opaquer(0.5)

reddish(), greenish(), bluish()

Shift color channels

color.reddish(20)
color.greenish(10)
color.bluish(30)

🎨 Color Mixing

Mix two colors together:

Color 1:

Color 2:

Weight (0-1): 0.5

mix(color, weight)

Mix with another color at given weight (0-1)

const mixed = color1.mix(color2, 0.5)

♿ Accessibility (WCAG)

Calculate contrast ratios and accessibility levels:

Foreground:

Background:

luminosity() / lightness()

Get relative luminance (0-1)

color.luminosity()

contrast(color)

Contrast ratio with another color

color1.contrast(color2)

level(color)

WCAG level: "AAA", "AA", or ""

color1.level(color2)

isDark() / isLight()

Check if color is dark/light

color.isDark()
color.isLight()

📝 Output Methods

Various ways to output color data:

Color:

toString()

String representation

color.toString()
color.toString("rgb")
color.toString("hsl")

hex() / hexa()

Hex string output

color.hex()
color.hexa()

rgb() / hsl()

Object output

color.rgb() → {r, g, b}
color.hsl() → {h, s, l}

toObject()

Plain object

color.toObject()
color.toObject("rgb")

toArray()

Array of values

color.toArray()
color.toArray("rgba")

toJson()

JSON string

color.toJson()

toValue()

Numeric value (16-bit)

color.toValue() → 0x4287f5

alpha()

Get alpha value

color.alpha()

🔗 Chaining Example

Chain multiple methods together:

const color = new Color("#4287f5")
    .lighten(0.2)
    .saturate(0.3)
    .rotate(30)
    .fade(0.2);

console.log(color.hex());  // Output: #5fa8ffcc
                

Build Your Own Chain

Start Color:

Chain: new Color("#4287f5")

📋 Supported Color Models

Complete list of supported color string formats:

Test Color: