@hyperfrontend/ui-utils/color

color

Color-format conversion and variation helpers for hex / RGB workflows.

hexToRgb parses a hex string into an Rgb shape; rgbToHex and rgbStringToHex go the other way. rgbToString formats an Rgb for use in CSS color properties. getColorVariation produces a lightened or darkened shade of an input color: useful for hover/active states, theme generation, or any case where you want a derived color without committing to a full palette.

API Reference§

ƒ Functions

§function

getColorVariation(baseColor: string, intensity: number): string

Generates a lighter or darker variation of a base color. Positive intensity lightens the color, negative intensity darkens it.

Parameters

Name	Type	Description
§baseColor	`string`	The base color in hex format (with or without # prefix)
§intensity	`number`	The intensity of the variation (-1 to 1, where negative darkens and positive lightens)

Returns

string

A hexadecimal color string representing the variation

Example

Generating color variations

// Generate a lighter shade for hover states
const primaryColor = '#3b82f6'
const hoverColor = getColorVariation(primaryColor, 200)
// => 'rgba(46, 102, 192, 0.78)'

// Generate a darker shade for active states
const activeColor = getColorVariation(primaryColor, 100)
// => 'rgba(23, 51, 96, 0.39)'

View source →

§function

hexToRgb(hex: string, opacity?: number): Rgb

Converts a hexadecimal color string to an RGB object. Supports both 3-digit and 6-digit hex formats with optional alpha channel.

Parameters

Name	Type	Description
§hex	`string`	The hexadecimal color string (with or without # prefix)
§opacity?	`number`	Optional opacity value (0-1) to override alpha channel

Returns

Rgb

An RGB object with r, g, b, and optional a properties, or null if conversion fails

Examples

6-digit hex

hexToRgb('#ff5733')
// => { r: 255, g: 87, b: 51 }

3-digit shorthand

hexToRgb('#f00')
// => { r: 255, g: 0, b: 0 }

With opacity override

hexToRgb('#3498db', 0.5)
// => { r: 52, g: 152, b: 219, a: 0.5 }

View source →

§function

rgbStringToHex(rgbString: string): string

Converts a CSS RGB string to a hexadecimal color string. Supports both rgb() and rgba() formats.

Parameters

Name	Type	Description
§rgbString	`string`	The RGB string (e.g., "rgb(255, 0, 0)" or "rgba(255, 0, 0, 0.5)")

Returns

string

A hexadecimal color string with # prefix

Examples

RGB string

rgbStringToHex('rgb(255, 87, 51)')
// => '#ff5733'

RGBA string with alpha

rgbStringToHex('rgba(52, 152, 219, 0.5)')
// => '#3498db80'

View source →

§function

rgbToHex(r: number, g: number, b: number, a?: number): string

Converts RGB(A) color values to a hexadecimal color string.

Parameters

Name	Type	Description
§r	`number`	The red component (0-255)
§g	`number`	The green component (0-255)
§b	`number`	The blue component (0-255)
§a?	`number`	Optional alpha component (0-1)

Returns

string

A hexadecimal color string with # prefix

Examples

Basic RGB

rgbToHex(255, 87, 51)
// => '#ff5733'

With alpha channel

rgbToHex(52, 152, 219, 0.5)
// => '#3498db80'

View source →

§function

rgbToString(rgb: Rgb): string

Converts an RGB object to a CSS color string (rgba format).

Parameters

Name	Type	Description
§rgb	`Rgb`	Object containing RGB values

Returns

string

A CSS rgba color string

Examples

Without alpha

rgbToString({ r: 255, g: 87, b: 51 })
// => 'rgb(255,87,51)'

With alpha

rgbToString({ r: 52, g: 152, b: 219, a: 0.5 })
// => 'rgba(52,152,219,0.5)'

View source →

◈ Interfaces

§interface

Rgb

RGB color representation with optional alpha channel.

Properties

§r:numberRed channel (0-255)

§g:numberGreen channel (0-255)

§b:numberBlue channel (0-255)

§a?:numberAlpha channel (0-1)

View source →