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@divriots/create-figma-plugin-utilities@create-figma-plugin/utilities@dalax/inhalt@cortezaproject/corteza-js@density/ui-report-time-segment-breakdown@canner/slate-icon-fontbgcolor@canner/slate-icon-fontcolor@react-creme/datajohnytestiobroker.wled@edquity/edquity-react-componentsstring-to-colorspectacle-theme-ankerspectacle-theme-novassb-patchworksurrogate-mapttb-huemagic@air/plasmic@antribute/ui@atlasbot/colour@algemetric/chroma-components@bmsterling/slate-icon-fontbgcolor@bmsterling/slate-icon-fontcolor@adam_sitar/adamtest@deboxsoft/svelte-core@diegovictor/github-profile-summaryztopia-uiwavy-canvas@fimblr/ui-core@eaze/hero@harslanhafeez/c3-js@gatsbyjs/gatsby-theme-website@euax-ui/utils@gestya/common-components@govuk-react-bjss-pttg/loading-box@govuk-react/loading-box@letscooee/web-sdk@letscooee/web-sdk-beta@motork/postcss-custom-properties-transform@marekus/reactidsk@markusantonwolf/tailwind-css-plugin-custom-color-palette@markusantonwolf/tailwind-css-plugin-multi-columns@envoy/ember-ui-kit@entur/tokens@erickmerchant/favicon@material-tailwind/react@minimalstuff/ui@moclei/react-neumorphic-slider@intellihr/ui-components@jmfirth/design-test-harness@julienr2/toolbox@julienr2/utils@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@onboarding/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-loversreact-native-color-lensreact-native-edison-calanderreact-craftify-corereact-creme
5.0.0

4 years ago

4.3.0

4 years ago

4.2.0

5 years ago

4.1.0

6 years ago

4.0.0

6 years ago

3.0.0

7 years ago

2.0.0

8 years ago

1.0.0

11 years ago