Parsing & Creation

Functions for creating Color instances from various input formats.

kleur

kleur(value: string | number | Color): Color
kleur(r: number, g: number, b: number, a?: number): Color

The default export is a universal factory that accepts any supported color format — hex strings, CSS function strings, named colors, packed integers, existing Color instances, or explicit RGBA values:

import kleur from "@driangle/kleur";

const a = kleur("#ff6600");
const b = kleur("coral");
const c = kleur(0xff6600);
const d = kleur(255, 102, 0);

Throws if the value cannot be resolved to a color.

For more control over parsing, use the specific creation functions below.

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

Namespace imports

The default kleur export doubles as a namespace — all creation functions, utilities, and static methods are accessible as properties:

import kleur from "@driangle/kleur";

kleur.rgb(255, 102, 0);
kleur.hex("#ff6600");
kleur.hsl(30, 100, 50);
kleur.css("rgb(255, 102, 0)");
kleur.random();

You can also destructure individual functions directly from the import:

const { rgb, hex, hsl, css, random } = kleur;

const color = rgb(255, 102, 0);

rgb

rgb(r: number, g: number, b: number, a?: number): Color

Create a color from RGBA values. Channels are clamped to 0-255, alpha to 0-1.

const red = kleur.rgb(255, 0, 0);
const semiTransparent = kleur.rgb(255, 0, 0, 0.5);

hex

hex(hex: string): Color

Parse a hex color string. Requires # prefix. Supports 3-digit (#rgb), 4-digit (#rgba), 6-digit (#rrggbb), and 8-digit (#rrggbbaa) forms.

const coral = kleur.hex("#ff7f50");
const short = kleur.hex("#f60");       // same as #ff6600
const alpha = kleur.hex("#ff000080");  // red at ~50% alpha
const shortA = kleur.hex("#f008");     // same as #ff000088

Throws if the string is not a valid hex color.

hsl

hsl(h: number, s: number, l: number, a?: number): Color

Create a color from HSL values with optional alpha.

Param	Range
h	0-360 (degrees)
s	0-100 (percent)
l	0-100 (percent)
a	0-1 (default 1)

const orange = kleur.hsl(30, 100, 50);

int

int(n: number): Color

Create a color from a 24-bit packed integer (0xRRGGBB).

const white = kleur.int(0xffffff);
const red = kleur.int(0xff0000);

css

css(css: string): Color

Parse a CSS color function string. Supports rgb(), rgba(), hsl(), and hsla() in both comma-separated and space-separated (CSS Color Level 4) syntax. Hue values can be negative.

// Comma-separated (legacy)
const a = kleur.css("rgb(255, 127, 80)");
const b = kleur.css("rgba(255, 127, 80, 0.5)");
const c = kleur.css("hsl(16, 100%, 66%)");

// Space-separated (CSS Color Level 4)
const d = kleur.css("rgb(255 127 80)");
const e = kleur.css("rgb(255 127 80 / 0.5)");
const f = kleur.css("hsl(-30 100% 50% / 0.8)");

Throws if the string cannot be parsed.

grayscale

grayscale(value: number, alpha?: number): Color

Create a grayscale color where r = g = b = value.

const gray = kleur.grayscale(128);       // mid-gray
const shadow = kleur.grayscale(0, 0.3);  // semi-transparent black

random

random(options?: RandomOptions): Color

Generate a random color with optional constraints.

RandomOptions

Property	Type	Description
hue	"warm" | "cool" | [min, max]	Constrain hue. "warm" = reds/yellows, "cool" = blues/greens. Tuple is a degree range (0-360).
saturation	[min, max]	Constrain saturation (0-100).
lightness	[min, max]	Constrain lightness (0-100).
alpha	number	Fixed alpha value (0-1). Default 1.
rng	() => number	Custom RNG function. Must return values in [0, 1), matching Math.random()'s contract. For deterministic/seeded output.

const any = kleur.random();
const warm = kleur.random({ hue: "warm" });
const pastel = kleur.random({ saturation: [20, 40], lightness: [70, 90] });
const blueish = kleur.random({ hue: [200, 260], saturation: [60, 100] });

// Deterministic output with a seeded RNG
const seeded = kleur.random({ hue: "warm", rng: mySeededRng });