normalize-colors

Normalize any CSS color value to a hex string (#RRGGBB). Supports hex, named colors, and all major CSS color functions and spaces.

Install

npm install normalize-colors
# or
npm i normalize-colors

Usage

const normalizeColor = require("normalize-colors");
// or
import normalizeColor from "normalize-colors";

normalizeColor("red");                    // "#FF0000"
normalizeColor("rgb(255, 0, 0)");        // "#FF0000"
normalizeColor("hsl(0 100% 50%)");        // "#FF0000"
normalizeColor("color(display-p3 1 0 0)"); // "#FF0000"

Returns #RRGGBB for valid colors, or #000000 for invalid/missing input. Alpha is ignored; output is always opaque hex.

Supported color formats

Hex

| Format | Example | |--------|--------| | 6-digit hex | #FF0000, #ff0000 | | 3-digit hex | #F00 → #FF0000 |

Named colors

All CSS named colors (e.g. red, aliceblue, rebeccapurple) and transparent (normalized to 0x00000000).

RGB / RGBA

| Syntax | Example | |--------|--------| | rgb(r g b) | rgb(255 0 0) | | rgb(r, g, b) | rgb(255, 0, 0) | | rgba(r, g, b, a) | rgba(255, 0, 0, 0.5) |

Values: 0–255 for r,g,b; alpha is ignored for output.

HSL / HSLA

| Syntax | Example | |--------|--------| | hsl(h s% l%) | hsl(120 100% 50%) | | hsl(h, s%, l%) | hsl(120, 100%, 50%) | | hsla(h, s%, l%, a) | hsla(120, 100%, 50%, 0.5) |

• H: hue in degrees (0–360).
• S: saturation, number or percentage (0–100).
• L: lightness, number or percentage (0–100).
  Alpha is ignored.

HWB

| Syntax | Example | |--------|--------| | hwb(h w% b%) | hwb(120 50% 0%) | | hwb(h, w%, b%) | hwb(120, 50%, 0%) |

• H: hue in degrees (0–360).
• W: whiteness, number or percentage (0–100).
• B: blackness, number or percentage (0–100).

LAB (CIE L*a*b*)

| Syntax | Example | |--------|--------| | lab(L a b) | lab(50 10 -5) | | lab(L% a b) | lab(50% 0 0) |

• L: lightness (0–100 or 0%–100%).
• a, b: opponent axes (unbounded in theory).

LCH (CIE LCH)

| Syntax | Example | |--------|--------| | lch(L C H) | lch(50% 20 180) | | lch(L, C, H) | lch(50, 20, 180) |

• L: lightness (0–100 or percentage).
• C: chroma (≥ 0).
• H: hue in degrees (0–360).

OKLAB

| Syntax | Example | |--------|--------| | oklab(L a b) | oklab(0.6 0.1 -0.05) | | oklab(L% a b) | oklab(60% 0.1 -0.05) |

• L: lightness (0–1 or 0%–100%).
• a, b: opponent axes.

OKLCH

| Syntax | Example | |--------|--------| | oklch(L C H) | oklch(0.6 0.2 180) | | oklch(L%, C, H) | oklch(60% 0.2 180) |

• L: lightness (0–1 or percentage).
• C: chroma (≥ 0).
• H: hue in degrees (0–360).

CSS color() function

All spaces defined in CSS Color Module Level 4 for color() are supported. Components are numbers in the range 0–1 or percentages; optional alpha after / is ignored.

| Space | Description | Example | |-------|-------------|--------| | srgb | sRGB (gamma-encoded) | color(srgb 0.5 0 0) | | srgb-linear | Linear sRGB | color(srgb-linear 0.215 0 0) | | display-p3 | Display P3 (D65) | color(display-p3 0.24 0.52 0.48) | | a98-rgb | Adobe RGB (1998) | color(a98-rgb 0.44 0.5 0.37) | | prophoto-rgb | ProPhoto RGB (D50) | color(prophoto-rgb 0.28 0.4 0.42) | | rec2020 | ITU-R BT.2020 | color(rec2020 0.42 0.48 0.36) | | xyz | CIE XYZ (D65) | color(xyz 0.2 0.15 0.6) | | xyz-d50 | CIE XYZ (D50) | color(xyz-d50 0.2 0.14 0.45) | | xyz-d65 | CIE XYZ (D65) | color(xyz-d65 0.22 0.15 0.59) |

Syntax: color(<space> <c1> <c2> <c3> [ / <alpha> ])
Components can be space- or comma-separated. Values can be numbers (0–1), percentages (0%–100%), or none (treated as 0).

Summary

• Hex: 3/6-digit.
• Named: All CSS color names + transparent.
• Functions: rgb, rgba, hsl, hsla, hwb, lab, lch, oklab, oklch, and color(<space> ...) with all predefined RGB and XYZ spaces above.

All of these are normalized to a single opaque hex string for consistent use in code or further processing.