5.0.0 • Published 4 years ago

hex-rgb v5.0.0

Weekly downloads
106,957
License
MIT
Repository
github
Last release
4 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-rishiqing@canner/slate-icon-fontbgcolor@canner/slate-icon-fontcolor@react-creme/datajohnytestiobroker.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@atlasbot/colour@govuk-react-bjss-pttg/loading-box@govuk-react/loading-box@air/plasmic@adam_sitar/adamtest@harslanhafeez/c3-js@eaze/hero@create-figma-plugin/utilities@allmaps/stdlib@algemetric/chroma-components@cortezaproject/corteza-js@edquity/edquity-react-componentsstring-to-colorspectacle-theme-ankerspectacle-theme-novassb-patchworksurrogate-mapttb-huemagic@bmsterling/slate-icon-fontbgcolor@bmsterling/slate-icon-fontcolorztopia-uiwavy-canvas@gestya/common-components@letscooee/web-sdk@letscooee/web-sdk-beta@motork/postcss-custom-properties-transform@marekus/reactidsk@entur/tokens@minimalstuff/ui@moclei/react-neumorphic-slider@killerwink/lottie-react-native-color@react-native-swift/core@react-native-swift/notifications@react-native-advanced/core@react-native-advanced/notifications@react-vertex/color-hooks@react-vertex/hex-webgl@qorebase/floating-button-component@ryandejaegher/tailwind-multi-theme@prvidrgo/manage-js@scalara/ui-core@region-kz/design-system@passmarked/browser@peykio/tw-multi-theme-plugin@placetopay/spartan@reportingdev/widgets-sparrow@roast-cms/theme-sugarmrspd-chartname-the-coloroil-paintsparse-css-colorosm-ui-reactpalette-lovers
5.0.0

4 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