DOCSEARCHbyAlgolia
Submit Docs

chroma.js

repository·main·Indexed 27 days ago

https://github.com/gka/chroma.js

A zero-dependency JavaScript library for color conversions and the creation of sophisticated color scales. It provides a chainable API to manipulate colors, support for multiple color spaces (including Lab, Lch, and OKLCH), and tools for computing color contrast (WCAG and APCA), distance, and data class breaks.

Tokens
10.2K
Snippets
31
Records
119
Agent score
94%

What's inside chroma-js

  3. Import chroma.js

    main

    Depending on your environment, use the following import patterns:

    Standard ESM Import:

    import chroma from 'chroma-js';

    Tree-shaking (importing specific parts): To reduce bundle size, you can import directly from chroma-js/src/*.

    import deltaE from 'chroma-js/src/utils/deltaE.js';

    Observable Notebooks:

    import { chroma } from "@gka/chroma-js";

  4. Quick-start with chroma.js

    main

    Chroma.js allows you to read, manipulate, and output colors in a chainable API. It also supports generating color scales for data visualization.

    Simple color manipulation:

    chroma('pink').darken().saturate(2).hex()

    Generating a color scale: Use chroma.scale() to create a scale between colors, specify a color mode (e.g., 'lch'), and generate a specific number of colors.

    chroma.scale(['#fafa6e', '#2A4858'])
    .mode('lch')
    .colors(6)

  5. Import and use chroma.js

    main
    You can import the default chroma object or individual named exports from the library. The default export contains the core color functionality and a collection of utility methods, generators, and color scales.

  6. Import the lightweight chroma.js entrypoint

    main
    Use the index-light.js entrypoint for a smaller build of chroma.js. This version includes core color conversion (CSS, Hex, HSL, Lab, Oklab, RGB), basic operators (alpha, darken, mix, set, shade), specific interpolators (LRGB, Oklab), and the mix generator.

  7. Configure color scale domains and quantiles

    main
    You can set custom domains for scales using .domain(). This method supports passing values and specifying a scale type, such as 'quantiles' or 'log' (logarithmic).

  8. Manipulate colors with chroma.js

    main

    You can initiate colors using various formats (like hex strings) and apply transformations such as .darken() before exporting the result using methods like .hex().

    chroma('#D4F880').darken().hex();  // #a1c550

  9. Create and use color scales

    main

    Use chroma.scale() to create a color scale from an array of colors. You can then call the scale as a function with a value between 0 and 1 to retrieve an interpolated color.

    scale = chroma.scale(['white', 'red']);
scale(0.5).hex(); // #FF7F7F

  10. Configure color scale interpolation modes

    main

    To improve visual results, you can change the interpolation mode of a scale. For example, using .mode('lab') provides better interpolation than standard RGB.

    chroma.scale(['white', 'red']).mode('lab');

  11. Mix colors with color.mix

    main

    Mix the current color with a target color using color.mix(targetcolor, ratio=0.5, mode='lrgb'). The ratio is a value between 0 and 1.

    chroma('hotpink').mix('blue');
chroma('hotpink').mix('blue', 0.25);
chroma('hotpink').mix('blue', 0.75, 'lab');

  12. Export colors as Hex, CSS, or Array formats

    main

    Convert a chroma object into various string or array formats:

    • color.hex(mode='auto|rgb|rgba|argb'): Returns a hex string. Default is 'auto' (includes alpha if < 1). Use 'rgb' to exclude alpha.
    • color.css(colorSpace): Returns a CSS string (e.g., rgb(), hsl()). Supported spaces: rgb, hsl, lab, lch, oklab, oklch.
    • color.rgb(round=true): Returns [r, g, b] as 0-255 numbers. Set round=false for floats.
    • color.rgba(round=true): Returns [r, g, b, a] as 0-255 numbers.
    • color.hsl(), color.hsv(), color.hsi(), color.lab(), color.lch(), color.oklab(), color.oklch(): Return arrays of components in the specified color space.
    • color.gl(): Returns RGB components in the [0..1] range.
    chroma('orange').hex();
chroma('orange').alpha(0.5).hex('rgb');
chroma('teal').css('hsl');
chroma('orange').rgb(false);
chroma('orange').rgba();
chroma('skyblue').oklch();
chroma('33cc00').gl();