rgba-color-to-css-hex

Converts an RGB or RGBA color to a CSS hex color code

Description

Converts a color given as red, green and blue values to a CSS hex color code.

See...

• Install/Usage
• Types
• Syntax
• Examples
• See Also

Install

npm install --save @chriscodesthings/rgba-color-to-css-hex

Usage

import rgbaColorToCSSHex from '@chriscodesthings/rgba-color-to-css-hex';

console.log(rgbaColorToCSSHex([100, 149, 237, 0.5])); // cornflowerblue with 50% transparency
// => #6495ed7f

Types

These types are made available:

export type rgbColor = [number, number, number];
export type rgbaColor = [number, number, number, number];

TypeScript

To use the types in your TypeScript project:

import type { rgbColor, rgbaColor } from '@chriscodesthings/rgba-color-to-css-hex';

const myColor: rgbColor | rgbaColor = [100, 149, 237, 1];

JavaScript

You can also use types in JavaScript with JSDoc with @typedef imports:

/**
 * @typedef {import('@chriscodesthings/rgba-color-to-css-hex').rgbColor} rgbColor
 * @typedef {import('@chriscodesthings/rgba-color-to-css-hex').rgbaColor} rgbaColor
 */

/** @type {rgbColor | rgbaColor} */
const myColor = [100, 149, 237, 1];

Syntax

rgbaColorToCSSHex([r, g, b, (a)]);

Parameters

• r, g, b: red, green and blue values in the range 0-255
• a (optional): alpha value in the range 0-1

Return Value

Returns a string containing a CSS hex color code converted from the RGBA values.

Examples

// from user input
function setBackground(r, g, b) {
    document.body.style.background = rgbaColorToCSSHex([r, g, b]);
} 

See Also...

• color-looks-like-rgba: Determine if a set of values could be an RGB or RGBA color
• random-rgb-color: Generates a random color in RGB format
• color-object: Simple, lightweight class to store and manipulate a color, and convert between formats