@lacspace/color

Parse, convert, manipulate and check colours — hex/rgb/hsl, lighten/darken/mix, and WCAG contrast.

The small colour toolkit every app rebuilds — convert between formats, tweak lightness/saturation, mix, and (crucially) check WCAG contrast so your UI is actually readable. Tiny and dependency-free.

• 🎨 Parse #hex / #rgba / rgb() / rgba() / hsl() / hsla() → RGBA
• 🔁 toHex / toRgb / toHsl conversions
• ✨ lighten / darken / saturate / desaturate / rotate / mix / alpha / grayscale
• ♿ contrast, isReadable (AA/AAA), readableTextColor, luminance, isDark

Install

npm install @lacspace/color      # or pnpm add / yarn add / bun add

Convert & manipulate

import { toHsl, lighten, mix, alpha } from "@lacspace/color";

toHsl("#ff0000");            // "hsl(0, 100%, 50%)"
lighten("#2563eb", 15);      // a lighter blue
mix("#000000", "#ffffff");   // "#808080"
alpha("#2563eb", 0.2);       // "rgba(37, 99, 235, 0.2)"

Accessible by default

import { contrast, isReadable, readableTextColor } from "@lacspace/color";

contrast("#000", "#fff");                  // 21
isReadable("#767676", "#ffffff", "AA");    // true  (meets 4.5:1)
readableTextColor("#2563eb");              // "#ffffff"  ← pick text colour for a background

API

| Group | Functions | | --- | --- | | Parse / format | parse, toHex, toRgb, toHsl, toHslObject, hslToRgb | | Manipulate | lighten, darken, saturate, desaturate, rotate, mix, alpha, grayscale | | Accessibility | luminance, contrast, isReadable, readableTextColor, isDark |

Every function accepts a colour string or an RGBA object.

Licensing

This package is free under the Lacspace Free Licence — MIT-equivalent freedoms. Use it in personal and commercial projects at no cost; just keep the notice.

Not every Lacspace package is free. We also offer Commercial, Client-specific and Private packages under separate terms — see the Lacspace Licence Centre.

Part of the Lacspace ecosystem — zero-dependency, isomorphic TypeScript packages.

All packages ↗ · npm org ↗ · Licence Centre ↗ · GitHub ↗