https://github.com/aarongarciah/css-spec-colors

🎨 A list of all CSS color keywords and their corresponding values in hex, RGB and HSL. Color list scrapped from W3C spec.
https://github.com/aarongarciah/css-spec-colors

colors css hex hsl keywords rgb svg

Last synced: 9 months ago
JSON representation

🎨 A list of all CSS color keywords and their corresponding values in hex, RGB and HSL. Color list scrapped from W3C spec.

• Host: GitHub
• URL: https://github.com/aarongarciah/css-spec-colors
• Owner: aarongarciah
• License: mit
• Created: 2020-03-23T11:30:01.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2024-02-26T21:05:35.000Z (over 2 years ago)
• Last Synced: 2025-09-13T10:32:18.931Z (10 months ago)
• Topics: colors, css, hex, hsl, keywords, rgb, svg
• Language: JavaScript
• Homepage: https://css-spec-colors.netlify.app
• Size: 144 KB
• Stars: 7
• Watchers: 1
• Forks: 0
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE
  • Codeowners: .github/CODEOWNERS

Awesome Lists containing this project

README

          
# 🎨 css-spec-colors

[![npm](https://badgen.net/npm/v/css-spec-colors)](https://www.npmjs.com/package/css-spec-colors)

[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)

[![Known Vulnerabilities](https://snyk.io/test/github/aarongarciah/css-spec-colors/badge.svg?targetFile=package.json)](https://snyk.io/test/github/aarongarciah/css-spec-colors?targetFile=package.json)

[![Netlify Status](https://api.netlify.com/api/v1/badges/7c4bb19f-5cc8-4e39-8d0b-ec931ba4dcd6/deploy-status)](https://app.netlify.com/sites/css-spec-colors/deploys)

A JSON with all CSS color keywords and their corresponding values in hex, RGB and HSL.

The color list is generating by scrapping the W3C spec (https://www.w3.org/TR/css-color-4/#named-colors).

## Install

Using npm:

```bash

$ npm install css-spec-colors

```

Or yarn:

```bash

$ yarn add css-spec-colors

```

You can also download the JSON file directly from [unpkg](https://unpkg.com/css-spec-colors) or [Netlify](https://css-spec-colors.netlify.app/colors.json) without installing any dependency.

## Usage

> Colors are sorted alphabetically

```javascript

import colors from 'css-spec-colors'; // or const colors = require('css-spec-colors');

// All colors

console.log(colors);

/*

{

  aliceblue: {

    name: 'aliceblue',

    hex: '#f0f8ff',

    rgb: 'rgb(240, 248, 255)',

    hsl: 'hsl(208, 100%, 97.1%)'

  },

  antiquewhite: {

    name: 'antiquewhite',

    hex: '#faebd7',

    rgb: 'rgb(250, 235, 215)',

    hsl: 'hsl(34, 77.8%, 91.2%)'

  }

  ...

}

*/

// Get a color by name

console.log(colors.aliceblue);

/*

{

  name: 'aliceblue',

  hex: '#f0f8ff',

  rgb: 'rgb(240, 248, 255)',

  hsl: 'hsl(208, 100%, 97.1%)'

}

*/

// Get the hex value of a color

console.log(colors.aliceblue.hex); // '#ff0000'

// Get the RGB value of a color

console.log(colors.aliceblue.rgb); // 'rgb(255, 0, 0)'

// Get the HSL value of a color

console.log(colors.aliceblue.hsl); // 'hsl(0, 100%, 50%)'

```

## License

MIT

---

Made with ♥️ by [Aarón García Hervás](https://aarongarciah.com)