@readytools/colors

Modern color utilities for UI engineers: conversions, accessibility, OKLCH ramps, Tailwind palettes, and CSS-ready output in one zero-dependency ESM package.

Full documentation: https://www.readytools.co/docs/colors/

🟧 #ff6600 🟪 #8b5cf6 🟦 #06b6d4 🟩 #22c55e

npm install @readytools/colors

import {
  getContrastColor,
  generateTailwindPalette,
  scale,
  toCSS
} from "@readytools/colors";

Why This Library?

• Zero dependencies, ESM-only, tree-shake friendly.
• Built for real frontend workflows: tokens, themes, palettes, CSS output.
• Modern color spaces: Lab, OKLab, OKLCH, CIEDE2000.
• Accessibility helpers: WCAG contrast, readable text color, contrast fixing.
• Tailwind-ready palette and config generators.

Quick Examples

Tailwind Palette

import { generateTailwindPalette } from "@readytools/colors";

const brand = generateTailwindPalette("#ff6600");

console.log(brand[50]);  // "#ffe6cf"
console.log(brand[500]); // "#ff6600"
console.log(brand[950]); // "#220000"

Tailwind Config

import { generateTailwindConfig } from "@readytools/colors";

export default {
  content: ["./src/**/*.{js,ts,jsx,tsx}"],
  ...generateTailwindConfig("#ff6600", { name: "brand" })
};

Accessible Text

import { getContrastColor, ensureContrast } from "@readytools/colors";

const bg = "#ff6600";
const text = getContrastColor(bg);
const aaaText = ensureContrast("#888888", "#ffffff", 7);

Perceptual Color Ramp

import { scale } from "@readytools/colors";

const ramp = scale("#ff6600", "#0066ff", 7, { space: "oklch" });

Modern CSS Output

import { toCSS } from "@readytools/colors";

toCSS("#ff6600", "color", "oklch");
// "color: oklch(69.58% 0.2043 43.49);"

Parse Modern CSS Colors

import { parseColor } from "@readytools/colors";

parseColor("oklch(69.58% 0.2043 43.49 / 80%)");
// { format: "oklch", value: { L: 0.6958, C: 0.2043, h: 43.49, alpha: 0.8 } }

API Map

Conversions: hexToRgb, rgbToHex, rgbToHsl, hslToRgb, hexToCmyk, rgbToXyz, xyzToLab, rgbToLab, labToRgb, rgbToOklab, oklabToRgb, hexToOklab, oklabToHex, rgbToOklch, oklchToRgb, hexToOklch, oklchToHex

Accessibility: luminance, contrastRatio, isAccessible, getContrastColor, ensureContrast

Adjustments: lighten, darken, saturate, desaturate, adjustHue, invert, mix

Generation: random, randomColor, interpolate, scale, generateShades, generateTints, generateTones, generateHueVariants, generateShadeScale, generateTailwindPalette, generateTailwindConfig

Parsing and output: isValidHex, normalizeHex, parseColor, hexAToRgba, rgbaToHexA, toCSS

Palettes and difference: complementary, analogous, triadic, tetradic, deltaE76, deltaE2000

TypeScript

Types are bundled.

import { hexToOklch, generateTailwindPalette, type Oklch } from "@readytools/colors";

const color: Oklch = hexToOklch("#ff6600");
const palette = generateTailwindPalette("#ff6600");

Notes

• Node/browser compatible wherever ESM is supported.
• CommonJS require() is not supported directly.
• Full API documentation: https://www.readytools.co/docs/colors/

License

MIT © ReadyTools