Color Converters

Comprehensive tools for converting between HEX, RGB, HSL, and their alpha-channel variants.

Overview

The color converter utilities provide tools for converting between various color formats including HEX, RGB, HSL, and their alpha-channel variants (HEX8, RGBA, HSLA).

HSL and RGB Conversion

convertHslToRgb

Converts HSL values to an RGB format string.

function convertHslToRgb(h: number, s: number, l: number): RGB

playground.ts

convertRgbToHsl

Converts RGB values to an HSL format string.

function convertRgbToHsl(r: number, g: number, b: number): HSL

playground.ts

HSL and HEX Conversion

convertHslToHex

Converts HSL values to a Hex6 format string.

function convertHslToHex(h: number, s: number, l: number): Hex6

playground.ts

convertHexToHsl

Converts a Hex string to an HSL format string.

function convertHexToHsl(hex: Hex6 | Hex): HSL

playground.ts

RGB and HEX Conversion

convertRgbToHex

Converts RGB values to a Hex6 format string.

function convertRgbToHex(r: number, g: number, b: number): Hex6

playground.ts

convertHexToRgb

Converts a Hex string to an RGB format string.

function convertHexToRgb(hex: Hex6 | Hex): RGB

playground.ts

Alpha-Channel Conversions

convertRgbToRgba

function convertRgbToRgba(r: number, g: number, b: number, a?: number): RGBA

convertRgbaToHex8

function convertRgbaToHex8(r: number, g: number, b: number, a?: number): Hex8

convertHex8ToRgba

function convertHex8ToRgba(hex8: Hex8): RGBA

convertHslaToRgba

function convertHslaToRgba(h: number, s: number, l: number, a?: number): RGBA

convertRgbaToHsla

function convertRgbaToHsla(r: number, g: number, b: number, a?: number): HSLA

convertHslaToHex8

function convertHslaToHex8(h: number, s: number, l: number, a?: number): Hex8

convertHex8ToHsla

function convertHex8ToHsla(hex8: Hex8): HSLA

Helper Utilities

percentToHex

Converts a percentage value ($0 \dots 100$) to a 2-digit hex string.

function percentToHex(percent: Percent): string

applyOpacityToHex

Applies an opacity value to a hex color string, returning a Hex8 format.

function applyOpacityToHex(color: Hex, opacity: Percent | string): Hex8

playground.ts

Type Definitions

type Hex = `#${string}`;
type Hex6 = Branded<`#${string}`, 'Hex6'>;
type Hex8 = Branded<`#${string}`, 'Hex8'>;
type RGB = `rgb(${number}, ${number}, ${number})`;
type RGBA = `rgba(${number}, ${number}, ${number}, ${number})`;
type HSL = `hsl(${number}, ${number}%, ${number}%)`;
type HSLA = `hsla(${number}, ${number}%, ${number}%, ${number})`;

On this page