DOCSEARCHbyAlgolia
Submit Docs

color2k

repository·main·Indexed 20 days ago

https://github.com/ricokahler/color2k

A lightweight color parsing and manipulation library (approx. 2.8kB) optimized for sRGB space and CSS-in-JS use cases. It provides tree-shakable functions for parsing colors to HSLA/RGBA, manipulating hue, saturation, and lightness, converting between formats (Hex, RGBA, HSLA), and analyzing accessibility via WCAG contrast ratios and luminance calculations.

Tokens
2.3K
Snippets
27
Records
29
Agent score
21%

What's inside color2k

  2. Use color2k via Skypack (CDN)

    main

    In environments that support ES modules directly (like Deno or modern browsers), you can import functions directly from Skypack.

    import { darken, transparentize } from 'https://cdn.skypack.dev/color2k?min';

  3. Use color2k in your project

    main

    Import the specific manipulation functions you need from color2k. The library is designed to be tree-shakable, so you only include the code for the functions you actually use.

    import { darken, transparentize } from 'color2k';

// Examples
darken('blue', 0.1);
transparentize('red', 0.5);

  4. Color manipulation and conversion functions in color2k

    main

    The color2k package provides a suite of functions for parsing, manipulating, and converting colors. The primary way to interact with colors is through functions that accept color strings (like rgba() or hsla() formats) and return manipulated color strings or specific values like luminance or contrast.

    Key functional groups include:

    • Parsing: Convert color strings to structured formats using parseToHsla or parseToRgba.
    • Manipulation: Adjust color properties using adjustHue, darken, desaturate, lighten, mix, opacify, saturate, or transparentize.
    • Conversion: Convert colors between formats using toHex, toRgba, or toHsla.
    • Accessibility & Analysis: Calculate color properties with getContrast, getLuminance, or check readability with hasBadContrast, readableColor, and readableColorIsBlack.
    • Creation: Generate new color strings using hsla and rgba.
    • Utilities: getScale for generating color scales and guard for safety checks.

  5. Saturate a color with saturate()

    main

    Saturates a color by adding to the saturation channel in HSL space. This is equivalent to desaturate(color, -amount). The amount is a decimal between 0 and 1.

    saturate('hsl(0, 50%, 50%)', 0.1); // 'hsla(0, 60%, 50%, 1)'

  6. Create a color interpolation scale with getScale()

    main

    Returns a scale function that interpolates through a list of colors. The returned function accepts a decimal between 0 and 1 and returns the color at that percentage in the scale.

    To limit the domain and range (e.g., to use values like 0-100 instead of 0-1), wrap the returned function.

    const scale = getScale('red', 'yellow', 'green');
console.log(scale(0)); // rgba(255, 0, 0, 1)
console.log(scale(0.5)); // rgba(255, 255, 0, 1)
console.log(scale(1)); // rgba(0, 128, 0, 1)

// Custom domain/range example
const _scale = getScale('red', 'yellow', 'green');
const scale = x => _scale(x / 100);
console.log(scale(50)); // rgba(255, 255, 0, 1)

  9. Lighten a color with lighten()

    main

    Lightens a color by adding to the lightness channel in HSL space. This is equivalent to darken(color, -amount). The amount is a decimal between 0 and 1.

    lighten('black', 0.1); // 'hsla(0, 0%, 10%, 1)'