@nawael/color-converter.js v1.3.1

color-converter.js

Some utilities to convert any CSS color from RGB, HEX and HSL to RGB, HEX and HSL.

!NOTE This package is for didactic purpose but feel free to use it in your project!

Installation

With pnpm

pnpm install @nawael/color-converter.js --save

With npm

npm install @nawael/color-converter.js --save

With yarn

yarn add @nawael/color-converter.js --save

Integration

For CommonJS

const { rgbToHex, ...} = require('@nawael/color-converter.js')

For ESM

import { rgbToHex, ... } from '@nawael/color-converter.js'

Usage examples

// ==== Convert RGB color to HEX ====

// with string parameter...
rgbToHex('rgb(50, 40, 30)') // returns #32281e
// ...or with object parameter
rgbToHex({ r: 50, g: 40, b: 30 }) // returns #32281e too! :+1:

// with alpha channel...
rgbToHex('rgba(50, 40, 30, 0.5)') // returns #32281e80 too! It's magic!
// ...or
rgbToHex({ r: 50, g: 40, b: 30, a: 0.5 }) // returns #32281e80

// ==== Convert RGB color to HSL ====

// with string parameter...
rgbToHsl('rgb(50, 40, 30)') // returns hsl(30,25%,16%)
// ...or with object parameter
rgbToHsl({ r: 50, g: 40, b: 30 }) // returns hsl(219,79%,66%)

// with alpha channel...
rgbToHsl('rgba(50, 40, 30, 0.5)') // returns hsl(219,79%,66%)
// ...or
rgbToHsl({ r: 50, g: 40, b: 30, a: 0.5 }) // returns hsl(219,79%,66%)

// ==== Convert HEX color to RGB ====

// and so on...

// ==== Convert HSL color to RGB ====

// with string parameter...
hslToRgb('hsl(0, 10, 33)') // returns rgb(93,76,76)

// ...or with object parameter
hslToRgb({ h: 0, s: 10, l: 33 }) // returns rgb(93,76,76)

// ==== Convert HSL color to RGB percentage ====

// with string parameter...
hslToRgb('hsl(0,10%,33%)', true) // returns rgb(36.5%,29.8%,29.8%)

// ...or with object parameter
hslToRgb({ h: 0, s: 10, l: 33 }, true) // returns rgb(36.5%,29.8%,29.8%)

// ==== Convert HSL color to HEX ====

// with string parameter...
hslToHex('hsl(0, 10, 33)') // returns #32281e

// ...or with object parameter
hslToHex({ h: 0, s: 10, l: 33 }) // returns #32281e

// ==== Convert Named color to HSL ====

colorToHsl('CornflowerBlue') // returns hsl(219,79%,66%)

// ==== Convert Named color to RGB ====

colorToRgb('CornflowerBlue') // returns rgb(100,149,237)

// ==== Convert Named color to HEX ====

colorToHex('CornflowerBlue') // returns #6495ed

Available APIs

Availables APIs parameter

Apis parameters can be a string like:

Or an object like:

!NOTE All exotic color CSS parameter are supported

• rgba(50% 20% 10% 0.5)
• rgba(50% 20% 10% 50%)
• rgba(50%,20%,10%/50%)
• rgba(50%, 20%, 10%, 100/2)
• hsl(120, 25%)

!TIP Conversion to HEX, RGB and HSL are compatible with TailwindCSS

Hex is 6/8 characters, RGB and HSL has no spaces

<section className={`text-[${colorToHsl('BurlyWood')}]`}>...</section>

!IMPORTANT All invalides color CSS parameter will return white color per default

• #ffffff
• rgb(255,255,255)
• hsl(0,0%,100%)