@soybeanjs/colord

@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, and oklch is support directly without extra plugin
• 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)"
colord('hsl(210.003, 34.547%, 98.004%)').toOklchString(); // 'oklch(98.4% 0.003 247.858)'

Palette API

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

parseTailwindColor('slate.500'); // { l: 0.55, c: 0.04, h: 257, alpha: 1 }
parseTailwindColor('slate.500', 'hex'); // '#64748b'
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
• OKLCH objects and strings
• 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)

More API

see the more api in colord