sindresorhus / hex-rgb

Convert HEX color to RGB

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.

hex-rgb's Issues

Commas in RGB format

I noticed there are no commas in the RGB format, which could be a nice feature. Is there a reason for that?

I specifically needed the commas and ended up doing this, which wasn't too elegant.

      const HEX = '#FF0000';
      const C = hexRgb(HEX);
      const RGB = `rgb(${C.red}, ${C.green}, ${C.blue})`;

You released a v2, not an v3.

First of all, I am not good at English.
So machine translation.

You released a v2, not an v3.
Installation with npm is v3 in package.json, but actually it looks like v2.

Document CLEARLY that this is not targeted at web environment

Support optional alpha value

related at #14

I want optional alpha value on hexRgb.Options.
Can i contribute this project?

Alpha should be a float

Curious why the returned alpha value is not divided by 255? Just by looking at the code the returned number is still relative to hex and not an alpha percentage / fraction as inputed by rgb-hex.

Compile time error in TS

Just installed it, and got this;

ERROR in ../node_modules/hex-rgb/index.d.ts:31:5 - error TS1005: ',' expected.

31  red: number,
       ~
../node_modules/hex-rgb/index.d.ts:32:7 - error TS1005: ',' expected.

32  green: number,
         ~
../node_modules/hex-rgb/index.d.ts:33:6 - error TS1005: ',' expected.

33  blue: number,
        ~
../node_modules/hex-rgb/index.d.ts:34:7 - error TS1005: ',' expected.

34  alpha: number
         ~

Not sure what this is, if it's a ts-lint thing, or version compatibility?

TS 4.2.4, ES6, lib es2017

Can this work with regular require?

Hi, is there a way to get this working like a regular module.exports and require?

Tried unsuccessfully with the following:

const hexrgb = require('hex-rgb');

const { hexrgb } = require('hex-rgb');

const hexrgb = require('hex-rgb').default;

Thanks

Output to text

Hi, I would like to add option for text output from hex. I made it. However I can't make the PR. Can you enable me?

Precompile to es5

Hey,

It will be nice to https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#npm-run-build-fails-to-minify :)

Could not import in Type Script

When I tried to import using

import hexRgb from 'hex-rgb';

and start my application I've got error

const hex_rgb_1 = require("hex-rgb");
                  ^
Error [ERR_REQUIRE_ESM]: require() of ES Module wallet\node_modules\hex-rgb\index.js from wallet.service.js not supported.
Instead change the require of index.js in wallet.service.js to a dynamic import() which is available in all CommonJS modules.

Not compatible with default webpack production build

If you have a module, index.js, that has hex-rgb as a dependency, and run the following:

webpack -p src/index.js --output-filename dist/index.js

(without any additional webpack config)

This will fail because the default webpack production settings uses Uglify2, which does not support ES6 template strings.

Could this module distribute a lib version that has been transpiled and is therefore compatible with uglify2/default webpack cli settings?

Optional alpha value

Feature request

It would be really nice to have the ability to pass in an alpha value. So I could pass in a 6-digit hex and an alpha value to get a known solid color that has a customizable alpha.