hex-rgb

What is hex-rgb?

The hex-rgb npm package is used to convert hexadecimal color values to RGB (Red, Green, Blue) format. This can be useful in various scenarios such as web development, graphic design, and any other field where color manipulation is required.

What are hex-rgb's main functionalities?

Convert HEX to RGB

This feature allows you to convert a hexadecimal color code to its RGB representation. The output is an object containing the red, green, blue, and alpha (opacity) values.

const hexRgb = require('hex-rgb');
const rgb = hexRgb('#ff0000');
console.log(rgb); // { red: 255, green: 0, blue: 0, alpha: 1 }

Convert HEX to RGB with Alpha

This feature allows you to convert a hexadecimal color code that includes an alpha (opacity) value to its RGBA representation. The output is an object containing the red, green, blue, and alpha values.

const hexRgb = require('hex-rgb');
const rgba = hexRgb('#ff000080');
console.log(rgba); // { red: 255, green: 0, blue: 0, alpha: 0.5 }

Convert Short HEX to RGB

This feature allows you to convert a short hexadecimal color code (3 characters) to its RGB representation. The output is an object containing the red, green, blue, and alpha values.

const hexRgb = require('hex-rgb');
const rgb = hexRgb('#f00');
console.log(rgb); // { red: 255, green: 0, blue: 0, alpha: 1 }

Other packages similar to hex-rgb

color

The 'color' package provides a wide range of color manipulation functionalities, including conversion between different color formats (HEX, RGB, HSL, etc.), color mixing, and more. It is more feature-rich compared to hex-rgb.

tinycolor2

The 'tinycolor2' package is another versatile color manipulation library that supports conversion between various color formats, color mixing, and color modification (lightening, darkening, etc.). It offers more functionalities than hex-rgb.

chroma-js

The 'chroma-js' package is a powerful library for color conversions and color scales. It supports a wide range of color formats and provides advanced features like color interpolation and color scales, making it more comprehensive than hex-rgb.

README

hex-rgb

Convert HEX color to RGBA

Install

$ npm install hex-rgb

Usage

import hexRgb from 'hex-rgb';

hexRgb('4183c4');
//=> {red: 65, green: 131, blue: 196, alpha: 1}

hexRgb('#4183c4');
//=> {red: 65, green: 131, blue: 196, alpha: 1}

hexRgb('#fff');
//=> {red: 255, green: 255, blue: 255, alpha: 1}

hexRgb('#22222299');
//=> {red: 34, green: 34, blue: 34, alpha: 0.6}

hexRgb('#0006');
//=> {red: 0, green: 0, blue: 0, alpha: 0.4}

hexRgb('#cd2222cc');
//=> {red: 205, green: 34, blue: 34, alpha: 0.8}

hexRgb('#cd2222cc', {format: 'array'});
//=> [205, 34, 34, 0.8]

hexRgb('#cd2222cc', {format: 'css'});
//=> 'rgb(205 34 34 / 80%)'

hexRgb('#000', {format: 'css'});
//=> 'rgb(0 0 0)'

hexRgb('#22222299', {alpha: 1});
//=> {red: 34, green: 34, blue: 34, alpha: 1}

hexRgb('#fff', {alpha: 0.5});
//=> {red: 255, green: 255, blue: 255, alpha: 0.5}

API

hexRgb(hex, options?)

hex

Type: string

The color in HEX format. Leading # is optional.

options

Type: object

format

Type: string
Values: 'object' | 'array' | 'css'
Defaults: 'object'

The RGB output format.

Note that when using the css format, the value of the alpha channel is rounded to two decimal places.

alpha

Type: number

Set the alpha of the color.

This overrides any existing alpha component in the Hex color string. For example, the 99 in #22222299.

The number must be in the range 0 to 1.

Related

See rgb-hex for the inverse.