@igor.dvlpr/common-color NPM

📃 Table of contents

🕵🏼 Usage

Install it by executing:

npm i -D "@igor.dvlpr/common-color"

🤹🏼 API

This package only exposes the types below:

🤖 Constants

`SpecialColor`

Technically, keywords - not colors per se, they provide ways of using special colors: currentcolor, transparent, initial, inherit and unset.

Each of them has a special meaning for the browser:

currentcolor: the current color of the element
transparent: a fully transparent color
initial: the default value defined by the browser
inherit: inherits the color from the parent element
unset: resets the property to its natural value, either inherited or initial

`SystemColor`

This type represents a set of system-defined color keywords that correspond to system UI elements, which can adapt based on the user's operating system and theme settings.

Includes keywords like: AccentColor, AccentColorText, ActiveText, ButtonBorder, ButtonFace, etc.

!TIP Learn more about SystemColor on MDN.

`NamedStandardColor`

Common and standardized color identifiers. Includes values like: black, silver, gray, white, maroon, red, etc.

`NamedExtendedColor`

Includes all of the colors defined by NamedStandardColor and 131 colors more, values like: aliceblue, antiquewhite, aqua, aquamarine, azure, beige, bisque, etc.

📜 Template literals

!CAUTION The following types are derived from a template literal type, the types do NOT validate the actual color.

`HexColor`

A template literal type that adheres to the format #${string}, effectively representing a Hex color.

`RgbColor`

A template literal type that adheres to the format rgb(${string}), effectively representing an RGB color.

`RgbaColor`

A template literal type that adheres to the format rgba(${string}), effectively representing an RGBA color.

`HslColor`

A template literal type that adheres to the format hsl(${string}), effectively representing an HSL color.

`HwbColor`

A template literal type that adheres to the format hwb(${string}), effectively representing an HWB color.

`LabColor`

A template literal type that adheres to the format lab(${string}), effectively representing a LAB color.

`LchColor`

A template literal type that adheres to the format lch(${string}), effectively representing a LCH color.

`OklabColor`

A template literal type that adheres to the format oklab(${string}), effectively representing an Oklab color.

`OklchColor`

A template literal type that adheres to the format oklch(${string}), effectively representing an Oklch color.

`LightDarkColor`

A template literal type that adheres to the format light-dark(${string}), effectively representing a light-dark color.

`ColorMix`

A template literal type that adheres to the format color-mix(${string}), effectively representing a color-mix.

`DeviceCmyk`

A template literal type that adheres to the format device-cmyk(${string}), effectively representing a device-cmyk color.

`ColorContrast`

A template literal type that adheres to the format color-contrast(${string}), effectively representing a color-contrast color.

Gradients

!TIP Gradients are supported from v1.1.0.

`LinearGradient`

A template literal type that adheres to the format linear-gradient(${string}), effectively representing a linear gradient.

`RadialGradient`

A template literal type that adheres to the format radial-gradient(${string}), effectively representing a radial gradient.

`ConicGradient`

A template literal type that adheres to the format conic-gradient(${string}), effectively representing a conic gradient.

`RepeatingLinearGradient`

A template literal type that adheres to the format repeating-linear-gradient(${string}), effectively representing a repeating linear gradient.

`RepeatingRadialGradient`

A template literal type that adheres to the format repeating-radial-gradient(${string}), effectively representing a repeating radial gradient.

`RepeatingConicGradient`

A template literal type that adheres to the format repeating-conic-gradient(${string}), effectively representing a repeating conic gradient.

🦄 Special

`Color`

A broad color type that includes all of the previously mentioned color types:

`ColorWithKeywords`

An even broader color type that includes the Color type (and all of the previously mentioned color types) with the addition of colors from the SpecialColor type.

`ColorExtended`

The most broad color type that includes the ColorWithKeywords type (and all of the previously mentioned color types) with the addition of colors from the SystemColor type.

CSS levels

In addition to using any color type, since v1.2.0 it is possible to narrow the color types to a certain CSS color module level An external link .

CssLevel3Color

Includes the following CSS color module level 3 types:

CssLevel4Color

Includes previously mentioned CSS color module level 3 types and the following CSS color module level 4 types:

CssLevel5Color

Includes previously mentioned CSS color module level 4 types and the following CSS color module level 5 types:

CssLevel6Color

Includes previously mentioned CSS color module level 5 types and the following CSS color module level 6 types:

ColorContrast

✨ Examples

ui.ts

import type { Color } from '@igor.dvlpr/common-color'

const uiColor: Color = '#0099ff' // ok, now do something with the Hex color
const uiScrollbar: Color = 'rfb(0, 128, 255)' // will trigger an ERROR
                  // (typo, rFb instead of rGb)