@soybeanjs/colord

Colord is a tiny yet powerful tool for high-performance color manipulations and conversions. fork from colord

Features

• 📦 Small: Just 1.7 KB gzipped (3x+ lighter than color and tinycolor2)
• 🚀 Fast: 3x+ faster than color and tinycolor2
• 😍 Simple: Chainable API and familiar patterns
• 💪 Immutable: No need to worry about data mutations
• 🛡 Bulletproof: Written in strict TypeScript and has 100% test coverage
• 🗂 Typed: Ships with types included
• 🏗 Extendable: Built-in plugin system to add new functionality
• 📚 CSS-compliant: Strictly follows CSS Color Level specifications
• 👫 Works everywhere: Supports all browsers and Node.js
• 💨 Dependency-free

Differences from colord

• support oklab and oklch color models
• support palette API to generate and find the nearest palette color
• more correct color parsing
• simplify type definitions
• rewrite color string parsing
• rename alpha property a to alpha

Getting Started

pnpm i @soybeanjs/colord

import { colord } from '@soybeanjs/colord';

colord("#ff0000").grayscale().alpha(0.25).toRgbString(); // "rgba(128, 128, 128, 0.25)"
colord("rgb(192, 192, 192)").isLight(); // true
colord("hsl(0, 50%, 50%)").darken(0.25).toHex(); // "#602020"
colord({ r: 128, g: 128, b: 128, alpha: 0.25 }).toRgbString(); // "rgba(128, 128, 128, 0.25)"

Palette API

import { tailwindPalette, generatePalette, generateNearestPalette } from '@soybeanjs/colord/palette';

tailwindPalette.slate['500']; // 'oklch(55.4% 0.046 257.417)'
generatePalette('red'); // generate the palette of the color 'red'
generateNearestPalette('red'); // find the nearest color in the palette of the color 'red'

Supported Color Models

• Hexadecimal strings (including 3, 4 and 8 digit notations)
• RGB strings and objects
• HSL strings and objects
• HSV objects
• Color names (via plugin)
• HWB objects and strings (via plugin)
• CMYK objects and strings (via plugin)
• LCH objects and strings (via plugin)
• LAB objects (via plugin)
• XYZ objects (via plugin)
• OKLAB objects (via plugin)
• OKLCH objects (via plugin)

More API

see the more api in colord