Getting Started

Create, manipulate, and analyze colors in a few lines of code.

Create a Color

The simplest way to create a color is from a hex string:

import kleur from "@driangle/kleur";

const coral = kleur("#ff7f50");

You can also use the named creation functions on kleur:

const coral = kleur.hex("#ff7f50");

Other creation methods include kleur.rgb(), kleur.hsl(), kleur.css(), kleur.int(), and kleur(). See Parsing & Creation for the full list.

Interactive Demo

Parse and create colors

Switch between creation APIs and immediately inspect the resolved color outputs.

kleur("#ff7f50")

APIkleur(...)kleur.hex()kleur.css()kleur.rgb()kleur.hsl()kleur.int()Input

#ff7f50

Hex

#ff7f50

CSS

rgba(255,127,80,1)

RGB

r: 255 g: 127 b: 80

HSL

h: 16.114285714285714 s: 100 l: 65.68627450980392

Manipulate Colors

All operations are immutable — they return a new color and leave the original unchanged:

const lighter = coral.lighten(0.3);
const desaturated = coral.desaturate(0.5);
const complement = coral.complement();

// Chain operations
const muted = coral.desaturate(0.4).darken(0.1);

Interactive Demo

Explore immutable adjustments

Change one color operation at a time and compare the original with the returned new color.

kleur("#ff7f50").lighten(0.3)

Base Color

Operationlighten()darken()saturate()desaturate()rotate()warm()cool()invert()grayscale()complement()Amount: 0.3

Original#ff7f50

Result#ffa585

Output Formats

Convert colors to the format you need:

coral.toHex();        // "#ff7f50"
coral.toCss();        // "rgba(255,127,80,1)"
coral.toRgb();        // { r: 255, g: 127, b: 80 }
coral.toHsl();        // { h: 16, s: 100, l: 66 }
coral.toArray();      // [255, 127, 80, 1]
coral.toNormalized(); // [1, 0.498, 0.314, 1]

Generate Palettes

Create color harmonies from any base color. All harmony functions accept strings, numbers, or Color instances directly:

const [base, second, third] = kleur.triadic("#ff7f50");
const lightVariations = kleur.tints("#ff7f50", 5);
const darkVariations = kleur.shades("#ff7f50", 5);

Interactive Demo

Generate harmonies and tonal sets

Preview how each harmony function expands a base color into a related palette.

kleur("#ff6600").triadic()

Base Color

Palette Typetriadic()tetradic()analogous()splitComplement()tints()shades()tones()

#ff6600

#00ff66

#6600ff

Check Accessibility

Measure contrast and luminance for WCAG compliance. Pass colors directly as strings — no need to wrap them in kleur() first:

import kleur from "@driangle/kleur";

const ratio = kleur.contrast("#1a1a2e", "#ffffff"); // ~15.3
const readable = ratio >= 4.5;                      // WCAG AA: true

kleur.isLight("#ffffff"); // true
kleur.isLight("#1a1a2e"); // false

Interactive Demo

Check contrast and readability

Adjust foreground and background colors to see the WCAG ratio and pass/fail thresholds update live.

kleur.contrast(
  kleur("#1a1a2e"),
  kleur("#ffffff")
)

Foreground

Background

Preview Text

The quick brown fox jumps over the lazy dog.

Contrast17.06:1

WCAG AAPassPasses WCAG AA for normal text because the contrast ratio is at least 4.5:1.

WCAG AAAPassPasses WCAG AAA for normal text because the contrast ratio is at least 7:1.

Blend Colors

Mix and blend colors together:

import kleur from "@driangle/kleur";

const purple = kleur.mix("#ff0000", "#0000ff", 0.5);        // midpoint blend
const overlay = kleur.blend("#ff0000", "#0000ff", "screen"); // screen blend mode

Interactive Demo

Blend or mix two colors

Compare midpoint interpolation with common blend modes using the same pair of colors.

kleur.mix(
  kleur("#ff0000"),
  kleur("#0000ff"),
  0.5
)

Base

Overlay

Modemix()blend(..., "screen")blend(..., "multiply")blend(..., "overlay")blend(..., "difference")blend(..., "lighten")blend(..., "darken")Mix Amount: 0.5

Base

Overlay

Result

#800080

Next Steps

• API Reference — Color for all instance methods
• Parsing & Creation for all ways to create colors
• Color Harmonies for palette generation
• Analysis for accessibility checks