CSS Named Colors utilities

A set of utilities to work with named colors defined in the latest CSS Color Module.

Table of Contents

• Features
• Installation
• API - Core
  • isNamedColor
  • getNamedColors
  • getNamedColorsIdentifiers
  • getNamedColorsHexs
• API Types
  • NamedColor
• Notes
• License

Features

• ☂️ Fully-typed (written in Typescript)
• 🌳 Tree-Shakeable

Installation

Using npm:

$ npm install named-css-colors

Using yarn:

$ yarn add named-css-colors

Using pnpm:

$ pnpm add named-css-colors

API - Core

isNamedColor()

Checks whether the given argument is a named CSS color.

• Type:

  function isNamedColor(color: string): boolean

• Example:

  import { isNamedColor } from 'named-css-colors'
  
  isNamedColor('greycat') // => false
  isNamedColor('black') // => true

getNamedColors()

Returns a read only object of named CSS colors.

• Type:

  function getNamedColors(): NamedColors
  
  type NamedColors = {
    readonly [key in NamedColor]: string
  }

• Example:

  import { getNamedColors } from 'named-css-colors'
  
  getNamedColors()
  // => { aliceblue: '#F0F8FF', antiquewhite: '#FAEBD7', ..., yellowgreen: '#9ACD32' }
  
  Object.isFrozen(getNamedColors())
  // => true

getNamedColorsIdentifiers()

Returns a read only array of named CSS colors identifier values.

• Type:

  function getNamedColorsIdentifiers(): NamedColorsIdentifiers
  
  interface NamedColorsIdentifiers extends ReadonlyArray<string> {
    readonly [index: number]: NamedColor
  }

• Example:

  import { getNamedColorsIdentifiers } from 'named-css-colors'
  
  getNamedColorsIdentifiers()
  // => [ 'aliceblue', 'antiquewhite', ..., 'yellowgreen' ]
  
  Object.isFrozen(getNamedColorsIdentifiers())
  // => true

getNamedColorsHexs()

Returns a read only array of named CSS colors hex values.

• Type:

  function getNamedColorsHexs(): NamedColorsHexs
  
  interface NamedColorsHexs extends ReadonlyArray<string> {
    readonly [index: number]: string
  }

• Example:

  import { getNamedColorsHexs } from 'named-css-colors'
  
  getNamedColorsHexs()
  // => [ '#F0F8FF', '#FAEBD7', ..., '#9ACD32' ]
  
  Object.isFrozen(getNamedColorsHexs())
  // => true

API - Types

NamedColor

A union type alias of each named color string identifier.

• Type:

  type NamedColor =
    | 'aliceblue'
    | 'antiquewhite'
    ...
    | 'yellowgreen'

• Example:

  import type { NamedColor } from 'named-css-colors'
  
  const color: NamedColor = 'black'

Notes

This is a Pure ESM package.

License

MIT License © 2024 Andrei Hudovich

Check out my other projects

Submit your website to directories
SaaS boilerplates
Analytics for Bluesky