5.0.0 • Published 5 years ago

hex-rgb v5.0.0

Weekly downloads
106,957
License
MIT
Repository
github
Last release
5 years ago

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.

documents-service-apiiterm-tabcolortabcolorgraasp-insightspvmed-visual@ideas-lab/netgraph@getcircuit/tailwind@atua/tokens@infinitebrahmanuniverse/nolb-hex-@sdaragon/desy-html-starter@pixiebrix/extension@everything-registry/sub-chunk-1841tailwind-config-norskatailwindcss-plugin-elevationtailwindcss-elevationterm-schemesxeokit-viewer-react-libraryteeny-colorvscode-theme-to-studiovue-cli-plugin-rishiqingjohnytestiobroker.wledidenticon-clihyper-ibmcloud-themehex-rgb-clihex-to-xymastergo-toolsmaptalks.autogradual@weblif/rc-pdf@ttlabs/react-leaflet-extended@types/hex-rgb@tolicodes/picklejs@thekindestruss/colorpicker@tracoco/slate-icon-fontbgcolor@tracoco/slate-icon-fontcolor@yavuzmester/react-leaflet-extended@zaclimon/tailwindcss-elevationalfred-femineadamtestidskanimate-vpaid-bridgeats-test3ats-componentsapp-image-generatorarena-plugin-reports@govuk-react-bjss-pttg/loading-box@govuk-react/loading-box@harslanhafeez/c3-js@eaze/hero@edquity/edquity-react-componentsstring-to-colorspectacle-theme-ankerspectacle-theme-novassb-patchworksurrogate-mapttb-huemagicztopia-uiwavy-canvas@letscooee/web-sdk@letscooee/web-sdk-beta@marekus/reactidsk@entur/tokensmrspd-chartname-the-coloroil-paintsparse-css-colorosm-ui-reactpalette-loversreact-native-color-lensreact-native-edison-calanderreact-craftify-corereact-cremereact-avatar-generatorroblox-theme-converterrbxthemerc-dashboardreact-leaflet-extendedprotolab-corta-jsremovdreact-native-particles-webglreact-native-swift-basenodal-backgroundnode-red-huemagnearest-pantonenorska-cssnode-luxaforpicklejsphilips-wiz-bulbsphilterpolitico-stylerecolor-imgreact-onboardersindresorhus.jsshiki-renderer-pdfreact-skia-fibershorten-hex-colorreact-svg-patternsslate-editor-iconsreact-uikit-devjinreactidskglplotter
5.0.0

5 years ago

4.3.0

5 years ago

4.2.0

5 years ago

4.1.0

7 years ago

4.0.0

7 years ago

3.0.0

8 years ago

2.0.0

8 years ago

1.0.0

11 years ago