npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

pretty-easy-hex-to-rgb

v1.2.2

Published

Converts a hex color value to it's coresponding rgb value and returns it in an array like format of red, green, blue color values

Downloads

33

Readme

pretty-easy-hex-to-rgb

 

NPM Version Build Status - Travis CI Build Status - Appveyor Tests Dependancies

What is pretty-easy-hex-to-rgb?

pretty-easy-hex-to-rgb is a simple NodeJS module for converting a HEX color value to it's corresponding rgb value.

 

Install

This is a NodeJS module available through the npm registry. Installation is done using the npm install command:

$ npm install pretty-easy-hex-to-rgb

 

Usage

After installing the module (localy in your project directory), in order to use it in your file you first need to require it.

let hexToRGB = require('pretty-easy-hex-to-rgb');

 

or if you use TypeScript

import * as hexToRGB from 'pretty-easy-hex-to-rgb';

 

The module returns a function for you to call and supply it with a HEX color value that you'd like to be transformed into the corresponding rgb value. The function returns an Array of numbers, in the order of red color value, green color value and blue color value or an instance of Error class if the invalid HEX color representation was passed.  

Important :
  • hashes are optional (both '#f00' and 'f00' will produce the same output),
  • you can use both lowercase and UPPERCASE letters ('F00' and 'f00' will produce the same output),
  • you can use both 3 and 6 character notation for the HEX value ('FF0000' and 'F00' will produce the same output).

 

Examples

Convert HEX color to RGB color

hexToRGB('f00');          //  [255, 0, 0]
hexToRGB('#0F0');         //  [0, 255, 0]
hexToRGB('#0000fF');      //  [0, 0, 255]
hexToRGB('#ffc0cb');      //  [255, 192, 203]
hexToRGB('#008080');      //  [0, 128, 128]
hexToRGB('#FFE4E1');      //  [255, 228, 225]

/*
*   Note that you can, but you're not forced to include a 
*   hash symbol [#] in front of the HEX color value;
*   it works either way.
*   Also, the letters are NOT case sensitive;
*   value #f00 would produce the same output as F00
*/

 

Consider the following

Since 1.2.0 the module will return an instance of an Error class, if argument passed is not a valid HEX color value, instead of throwing an error and terminating the Node process thus making it more dynamic and usable in production where you depend on the user input.

Having this in mind, I advise you to consider including a utility library to check the output data type, such as pretty-easy-data-types.

/*
*   Only import the checks you will be using,
*   instead of including the whole library
*/
const { 
    isArray,        //  check for instance of Array class
    isError         //  check for instance of Error class
} = require('pretty-easy-data-types');
const hexToRGB  = require('pretty-easy-hex-to-rgb');


//  You can pass any value/data type to a function
//  without causing your process to break
const rgbColorValue = hexToRGB('#f00');

/*
*   After converting the HEX color to its' corresponding RGB(a) value
*   you should perform the check on the value returned and see
*   if the conversion was successful.
*
*   If the value returned is of type Array the conversion was successful
*   and in this example we're going to make a css color value out of it
*   else it is an instance of an Error class
*   and we're just going to log it to the console
*/
const rgbOutput = isArray(rgbColorValue) ?
    `rgb(${rgbColorValue.join('')})` :
    rgbColorValue;
if(isError(rgbOutput)) console.log(`Invalid HEX color value passed: ${rgbOutput.message}`);

 

Want to contribute?

Great! Anyone can help make this project better - check out the github repository!

Found a bug?

Please open a an issue.

License

Copyright (c) 2017 Ognjen Jevremović

Licensed under the MIT License.