Khroma is an npm package designed for color manipulation and generation. It provides a variety of utilities for working with colors, including generating color palettes, converting between color formats, and manipulating color properties.
Color Generation
Generates a monochromatic color palette based on a given color. The `palette` function can generate different types of color palettes such as monochromatic, analogous, complementary, etc.
const khroma = require('khroma');
const palette = khroma.palette('monochromatic', '#3498db');
console.log(palette);Color Conversion
Converts a hex color code to its RGB representation. The `hexToRgb` function is useful for converting color formats.
const khroma = require('khroma');
const rgb = khroma.hexToRgb('#3498db');
console.log(rgb);Color Manipulation
Lightens a given color by a specified amount. The `lighten` function is useful for adjusting the brightness of a color.
const khroma = require('khroma');
const lighterColor = khroma.lighten('#3498db', 0.2);
console.log(lighterColor);Chroma.js is a powerful library for color conversions and color scales. It offers a wide range of functionalities similar to Khroma, including color manipulation, color generation, and format conversion. Chroma.js is known for its performance and ease of use.
The color package is a comprehensive library for color manipulation and conversion. It supports a variety of color models and provides utilities for color transformations. Compared to Khroma, the color package offers more extensive support for different color models and transformations.
TinyColor is a small, fast library for color manipulation and conversion. It provides a simple API for common color operations such as blending, lightening, and darkening colors. TinyColor is lightweight and easy to integrate, making it a good alternative to Khroma for basic color manipulation tasks.
A collection of functions for manipulating CSS colors, inspired by SASS.
npm install --save khroma
import {red, isDark, darken, change} from 'khroma';
red ( '#ffffff' ); // => 255
isDark ( 'white' ); // => false
darken ( 'hsl(0, 5%, 100%)', 50 ); // => 'hsl(0, 5%, 50%)'
change ( 'rgb(255, 255, 255)', { a: 0.5 } ); // => 'rgba(255, 255, 255, 0.5)'
These are all the provided functions, for each of them below you can find a short description, its interface and examples.
These functions create a new color given the provided channels.
hexAlias for rgba.
rgbAlias for rgba.
rgbaCreates a new color given its rgba channels, the alpha channel is optional.
function rgba ( r: string, g: number, b: number, a: number = 1 ): string;
rgba ( 255, 204, 0 ); // => '#ffcc00'
rgba ( 255, 204, 0, 0.5 ); // => 'rgba(255, 204, 0, 0.5)'
hslAlias for hsla.
hslaCreates a new color given its hsla channels, the alpha channel is optional.
function hsla ( h: number, s: number, l: number, a: number = 1 ): string;
hsla ( 0, 50, 100 ); // => 'hsl(0, 50%, 100%)'
hsla ( 10, 50, 100, 0.5 ); // => 'hsla(10, 50%, 100%, 0.5)'
These functions convert supported colors to a specific format.
toKeywordConvert a color to the keyword format, when possible.
function toKeyword ( color: string ): string | undefined;
toKeyword ( '#ff0000' ); // => 'red'
toKeyword ( '#ffcc00' ); // => undefined
toHexConvert a color to the HEX format.
function toHex ( color: string ): string;
toHex ( 'red' ); // => '#ff0000'
toHex ( '#ff0000' ); // => '#ff0000'
toRgbaConvert a color to the RGBA format.
function toRgba ( color: string ): string;
toRgba ( 'red' ); // => 'rgb(255, 0, 0)'
toRgba ( '#ff0000' ); // => 'rgb(255, 0, 0)'
toRgba ( '#00000088' ); // => 'rgba(0, 0, 0, 0.5333333333)'
toHslaConvert a color to the HSLA format.
function toHsla ( color: string ): string;
toHsla ( 'red' ); // => 'hsl(0, 100%, 50%)'
toHsla ( '#ff0000' ); // => 'hsl(0, 100%, 50%)'
toHsla ( 'rgb(255, 0, 0)' ); // => 'hsl(0, 100%, 50%)'
These functions get a single channel from the provided color.
channelGets any single channel of the color.
function channel ( color: string, channel: 'r' | 'g' | 'b' | 'h' | 's' | 'l' | 'a' ): number;
channel ( '#ffcc00', 'r' ); // => 255
channel ( '#ffcc00', 'h' ); // => 48
channel ( '#ffcc00', 'a' ); // => 1
redGets the red channel of the color.
function red ( color: string ): number;
red ( '#ffcc00' ); // => 255
greenGets the green channel of the color.
function green ( color: string ): number;
green ( '#ffcc00' ); // => 204
blueGets the blue channel of the color.
function blue ( color: string ): number;
blue ( '#ffcc00' ); // => 0
hueGets the hue channel of the color.
function hue ( color: string ): number;
hue ( 'hsl(0, 50%, 100%)' ); // => 0
saturationGets the saturation channel of the color.
function saturation ( color: string ): number;
saturation ( 'hsl(0, 50%, 100%)' ); // => 50
lightnessGets the lightness channel of the color.
function lightness ( color: string ): number;
lightness ( 'hsl(0, 50%, 100%)' ); // => 100
alphaGets the alpha channel of the color.
function alpha ( color: string ): number;
alpha ( '#ffcc00' ); // => 1
alpha ( 'rgba(255, 205, 0, 0.5)' ); // => 0.5
opacityAlias for alpha.
These functions get some other information from the provided color.
contrastGets the contrast in luminance between two colors.
Contrast values go between 1 and 10. 1 means same color, >= 4 means decent contrast, >= 7 means great contrast, 10 means great contrast.
function contrast ( color1: string, color2: string ): number;
contrast ( '#000000', '#000000' ); // => 1
contrast ( '#000000', '#ffffff' ); // => 10
contrast ( '#888888', '#ffffff' ); // => 4.0617165366
luminanceGets the relative luminance of the color.
function luminance ( color: string ): number;
luminance ( 'black' ); // => 0
luminance ( 'white' ); // => 1
luminance ( '#ffcc00' ); // => 0.6444573127
isDarkChecks if the provided color is a dark color.
function isDark ( color: string ): number;
isDark ( 'black' ); // => true
isDark ( 'white' ); // => false
isDark ( '#ffcc00' ); // => false
isLightChecks if the provided color is a light color.
function isLight ( color: string ): number;
isLight ( 'black' ); // => false
isLight ( 'white' ); // => true
isLight ( '#ffcc00' ); // => true
isTransparentChecks if the provided color is a transparent color.
function isTransparent ( color: string ): boolean;
isTransparent ( 'transparent' ); // => true
isTransparent ( '#ffcc0000' ); // => true
isTransparent ( '#ffcc00' ); // => false
isValidChecks if the provided color is a valid color.
function isLight ( color: string ): boolean;
isValid ( 'black' ); // => true
isValid ( '#ffcc00' ); // => true
isValid ( '#wtf' ); // => false
These functions change a single channel of the provided color.
saturateIncreases the saturation channel of the color.
function saturate ( color: string, amount: number ): string;
saturate ( 'hsl(0, 50%, 50%)', 25 ); // => 'hsl(0, 75%, 50%)'
desaturateDecreases the saturation channel of the color.
function desaturate ( color: string, amount: number ): string;
desaturate ( 'hsl(0, 50%, 50%)', 25 ); // => 'hsl(0, 25%, 50%)'
lightenIncreases the lightness channel of the color.
function lighten ( color: string, amount: number ): string;
lighten ( 'hsl(0, 50%, 50%)', 25 ); // => 'hsl(0, 50%, 75%)'
darkenDecreases the lightness channel of the color.
function darken ( color: string, amount: number ): string;
darken ( 'hsl(0, 50%, 50%)', 25 ); // => 'hsl(0, 50%, 25%)'
opacifyIncreases the opacity channel of the color.
function opacify ( color: string, amount: number ): string;
opacify ( 'rgba(255, 204, 0, 0.5)', 0.25 ); // => 'rgba(255, 204, 0, 0.75)'
fadeInAlias for opacify.
transparentizeDecreases the opacity channel of the color.
function transparentize ( color: string, amount: number ): string;
transparentize ( 'rgba(255, 204, 0, 0.5)', 0.25 ); // => 'rgba(255, 204, 0, 0.25)'
fadeOutAlias for transparentize.
rgba (alt)Sets a new value for the opacity channel.
function rgba ( color: string, amount: number ): string;
rgba ( 'rgba(255, 204, 0, 0.5)', 0.1 ); // => 'rgba(255, 204, 0, 0.1)'
complementGets the complement of the color, rotating its hue channel by 180 degrees.
function complement ( color: string ): string;
complement ( '#ffcc00' ); // => 'hsl(228, 100%, 50%)'
grayscaleGets the grayscale version of the color, setting its saturation to 0.
function grayscale ( color: string ): string;
grayscale ( '#ffcc00' ); // => 'hsl(48, 0%, 50%)'
These functions can/will change more than a single channel at once of the provided color.
adjustIncreases or decreases the value of any channel of the color.
function adjust ( color: string, channels: Record<'r' | 'g' | 'b' | 'h' | 's' | 'l' | 'a', number> ): string;
adjust ( '#ffcc00', { r: -10, g: 200 } ); // => '#f5ff00'
adjust ( '#ffcc00', { a: -0.5 } ); // => 'rgba(255, 204, 0, 0.5)'
adjust ( '#ffcc00', { h: 50, l: -30 } ); // => 'hsl(98, 100%, 20%)'
changeSets a new value for any channel of the color.
function change ( color: string, channels: Record<'r' | 'g' | 'b' | 'h' | 's' | 'l' | 'a', number> ): string;
change ( '#ffcc00', { r: 10, g: 200 } ); // => '#0ac800'
change ( '#ffcc00', { a: 0.5 } ); // => 'rgba(255, 204, 0, 0.5)'
change ( '#ffcc00', { h: 50, l: 30 } ); // => 'hsl(50, 100%, 30%)'
invertGets the inverse of the color.
function invert ( color: string, weight: number = 100 ): string;
invert ( '#ffcc00' ); // => '#0033ff'
invert ( '#ffcc00', 50 ); // => '#808080'
mixMixes two colors together.
function mix ( color1: string, color2: string, weight: number = 50 ): string;
mix ( 'red', 'blue' ); // => '#800080'
mix ( 'red', 'blue', 15 ); // => '#2600d9'
scaleScales any channel of the color.
function scale ( color: string, channels: Record<'r' | 'g' | 'b' | 'h' | 's' | 'l' | 'a', number> ): string;
scale ( '#ffcc00', { r: -50, b: 10 } ); // => '#80cc1a'
MIT © Fabio Spampinato, Andrew Maney
FAQs
A collection of functions for manipulating CSS colors, inspired by SASS.
The npm package khroma receives a total of 752,728 weekly downloads. As such, khroma popularity was classified as popular.
We found that khroma demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.
Security News
Research
Socket researchers found a malicious Maven package impersonating the legitimate ‘XZ for Java’ library, introducing a backdoor for remote code execution.