colors
Modern utilities for color conversion, contrast checking, perceptual interpolation, and palette generation.
48 results
Getting Started
Official guide to installing and using @readytools/colors.
parseColor
The `parseColor` function parses common web color strings into structured JavaScript objects. It supports HEX, HEX alpha, RGB(A), HSL(A), OKLab, and OKLCH formats, including modern CSS space/slash alpha syntax.
normalizeHex
The `normalizeHex` function standardizes a HEX color string into a full 6-digit lowercase format. It ensures consistent formatting and validation before further processing.
isValidHex
The `isValidHex` function checks whether a given string is a valid 3-digit or 6-digit HEX color. It is a simple validation utility that ensures the input follows the HEX color format specification.
hexToRgb
The `hexToRgb` function converts a HEX color string into an RGB object. It supports both 3-digit and 6-digit HEX formats and outputs the red, green, and blue components as integers between 0 and 255.
rgbToHex
The `rgbToHex` function converts RGB component values into a lowercase HEX color string. Each channel is rounded, clamped to the 0-255 range, and converted into a two-digit hexadecimal value.
hexAToRgba
The `hexAToRgba` function converts 4-digit or 8-digit HEX alpha colors into RGBA channel values.
rgbaToHexA
The `rgbaToHexA` function converts RGBA values into an 8-digit HEX color string (`#rrggbbaa`). It encodes the alpha channel as the last two hexadecimal digits.
hexToCmyk
The `hexToCmyk` function converts a HEX color string into CMYK components. It is especially useful for print workflows, where CMYK is the standard color model.
rgbToHsl
The `rgbToHsl` function converts RGB color values into the HSL (Hue, Saturation, Lightness) color model. It outputs hue in degrees (0–360) and saturation/lightness as percentages (0–100).
hslToRgb
The `hslToRgb` function converts HSL color values into the RGB color model. It outputs red, green, and blue components as integers from 0 to 255.
rgbToXyz
The `rgbToXyz` function converts RGB values into the CIE XYZ color space using the D65 reference white. This is an intermediate step for converting to perceptual color spaces like Lab.
xyzToLab
The `xyzToLab` function converts CIE XYZ tristimulus values into the CIE Lab color space. Lab is designed to be perceptually uniform, making it ideal for comparing colors based on human vision.
rgbToLab
The `rgbToLab` function converts RGB color values into the CIE Lab color space. This color model is designed to approximate human vision, making it useful for perceptual color comparisons.
labToRgb
The `labToRgb` function converts CIE Lab color values back into the RGB color model. It performs Lab → XYZ → RGB transformations and outputs red, green, and blue values as integers between 0 and 255.
rgbToOklab
The `rgbToOklab` function converts RGB channel values to OKLab, a perceptual color space designed for smoother color operations.
oklabToRgb
The `oklabToRgb` function converts OKLab values back to RGB channel values.
hexToOklab
The `hexToOklab` function converts a HEX color directly to OKLab.
oklabToHex
The `oklabToHex` function converts OKLab values to a HEX color string.
rgbToOklch
The `rgbToOklch` function converts RGB channel values to OKLCH, the cylindrical form of OKLab.
oklchToRgb
The `oklchToRgb` function converts OKLCH values back to RGB channel values.
hexToOklch
The `hexToOklch` function converts a HEX color directly to OKLCH.
oklchToHex
The `oklchToHex` function converts OKLCH values to a HEX color string.
lighten
The `lighten` function increases the lightness of a HEX color by a specified percentage. It internally converts HEX → RGB → HSL, adjusts the lightness, and converts back to HEX.
darken
The `darken` function decreases the lightness of a HEX color by a specified percentage. It is a wrapper around `lighten`, passing a negative adjustment to reduce brightness.
saturate
The `saturate` function increases the saturation of a HEX color by a specified percentage. Internally, it converts HEX → RGB → HSL, adjusts the saturation, and converts back to HEX.
desaturate
The `desaturate` function decreases the saturation of a HEX color by a specified percentage. It is a wrapper around `saturate`, applying a negative adjustment to reduce color intensity.
adjustHue
The `adjustHue` function rotates the hue of a HEX color by a specified number of degrees. It preserves saturation and lightness while shifting the color’s position on the color wheel.
invert
The `invert` function returns the inverse (complement) of a HEX color by subtracting each RGB component from 255. This produces the color opposite on the RGB spectrum.
mix
The `mix` function blends two HEX colors together based on a weight factor. It interpolates the RGB values of both colors and outputs the result as a HEX string.
interpolate
The `interpolate` function blends two HEX colors at a specific position and supports RGB, HSL, Lab, OKLab, and OKLCH interpolation.
randomColor
The `randomColor` function generates random colors with optional constraints for hue, saturation, lightness, alpha, and output format.
luminance
The `luminance` function calculates the relative luminance of a HEX color according to the WCAG definition. This value represents the perceived brightness of the color, normalized between 0 (black) and 1 (white).
contrastRatio
The `contrastRatio` function calculates the WCAG contrast ratio between two colors, expressed as a number rounded to two decimals. The related `isAccessible` helper evaluates whether the contrast passes WCAG AA or AAA standards.
ensureContrast
The `ensureContrast` function adjusts the lightness of a foreground color to ensure it meets a target WCAG contrast ratio against a background color. If the ratio is already sufficient, the original color is returned.
getContrastColor
The `getContrastColor` function automatically chooses black (`#000000`) or white (`#ffffff`) based on which provides the best contrast against a given background color. It is useful for ensuring text remains legible regardless of background.
deltaE76
The `deltaE76` function computes the perceptual difference between two colors using the CIE76 ΔE formula. It compares the colors in the Lab color space and returns a numeric value where lower values indicate greater similarity.
deltaE2000
The `deltaE2000` function calculates CIEDE2000 color difference between two HEX colors. It is more perceptually accurate than simple Euclidean Lab distance.
generateShades
The `generateShades` function produces a sequence of darker variants of a given HEX color. It progressively reduces the lightness in the HSL color model to generate shades, optionally including the base color.
generateTints
The `generateTints` function produces a sequence of lighter variants of a given HEX color. It progressively increases the lightness in the HSL color model to generate tints, optionally including the base color.
generateTones
The `generateTones` function produces a sequence of lower-saturation variants (tones) of a given HEX color. It progressively reduces the saturation in the HSL color model while keeping hue and lightness constant, optionally including the base color.
generateHueVariants
The `generateHueVariants` function generates evenly spaced hue variants of a given HEX color across the entire color wheel. It uses hue rotation to create distinct variants, optionally including the base color as the first element.
generateShadeScale
The `generateShadeScale` function creates a perceptually-even lightness scale derived from a base color using the CIE Lab color space. It can generate darker, lighter, or bidirectional scales with optional easing functions.
scale
The `scale` function generates a sequence of colors between two HEX values. It uses `interpolate` internally and can blend in RGB, HSL, Lab, OKLab, or OKLCH space.
palettes
The `palettes` module provides functions to generate common color harmony palettes based on hue relationships. These include complementary, analogous, triadic, and tetradic schemes, each returning an array of HEX colors.
generateTailwindPalette
The `generateTailwindPalette` function creates Tailwind-like `50..950` color stops from a single base HEX color using OKLCH-based lightness and chroma shaping.
generateTailwindConfig
The `generateTailwindConfig` function creates a Tailwind config fragment that can be spread into a Tailwind config file.
toCSS
The `toCSS` function converts a HEX color into a valid CSS declaration string for a given property. It supports `hex`, `rgb`, `hsl`, `oklab`, and `oklch` output formats.