2,065 named color variables in JSON, SASS, and LESS formats.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


Named Color Vars

2,065 named color variables in JSON, SASS, and LESS color formats.

npm overview
latest version license browser script size typescript/js open issues
greenkeeper dependency status follow on twitter follow on github fork

developed by ‹src.works/›

Project Overview

2,065 named color variables (no duplicate names, no duplicate colors). Provided in JSON, SCSS and LESS formats. Color names courtesy of Resene Paints and the XKCD Color Survey (minus potentially-offensive color names & negative connotations). Additional color names include those supported by all major browsers in the CSS3 spec.

Installation Options

Install via NPM package

$ npm install named-color-vars --save;

Or install via Yarn Yarn package

$ yarn add named-color-vars;

Or install via unpkg.com CDN CDN

<script src="https://unpkg.com/named-color-vars@1.0.17" integrity="sha384-wu1yiJkXAQGYeWol5rKJ8e2BvqOCw0Cu6YHSUj3ZkusP1UEX0nUjnkorEFO0Dbuc" crossorigin="anonymous"></script>

Works in All Modern Browsers


If you need to support IE <= 11 (prior to Edge), older versions of Android, and much older versions of other browsers, you can insert this polyfill before all other script tags. The polyfill.io service fills ES6 features that a user's browser is lacking, based on both UA & feature detection.

<!-- Before ALL other script tags in your document. -->
<!-- Only needed if you want to support much older browsers. -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=es6&amp;flags=gated"></script>

Node.js Example

import {colors} from 'named-color-vars';
console.log(colors.springGreen); // #578363

Web Browser Example

<script src="https://unpkg.com/named-color-vars@1.0.17" integrity="sha384-wu1yiJkXAQGYeWol5rKJ8e2BvqOCw0Cu6YHSUj3ZkusP1UEX0nUjnkorEFO0Dbuc" crossorigin="anonymous"></script>

  var colors = namedColorVars.colors;
  console.log(colors.springGreen); // #578363

SCSS Example

You can download colors.scss here: https://unpkg.com/named-color-vars@1.0.17/src/colors.scss

@import 'colors.scss';

.my-style {
  color: $spring-green-color;

LESS Example

You can download colors.less here: https://unpkg.com/named-color-vars@1.0.17/src/colors.less

@import 'colors.less';

.my-style {
  color: @spring-green-color;

Built with TypeScript/JavaScript, Babel, NodeJS, NPM, and Sass

Commercial Use


This software is created, documented and maintained by Jason Caldwell (@jaswrks) and a small team of talented developers at ‹src.works/›. It's open source, but if you use it commercially, please pay what you can.

Development Channels

Always use the latest stable version in production. If you want upcoming changes ahead of time use the @dev or @rc tag, but please do so at your own risk. The @dev and @rc tags are potentially unstable at various times throughout a development cycle, and therefore should not be used in production.

Channel NPM Tag Description SemVer GitHub
Hackers @dev Latest Bleeding Edge
Release Tag master (PRs)
Lab Rats @rc Next Release Candidate
upcoming semi-stable release
Release Tag releases
Everyone @latest Latest Stable Version
highly recommended
Release Tag releases

NPM Consumption Examples

Channel NPM Tag NPM package.json
Hackers @dev "named-color-vars": "dev"
Lab Rats @rc "named-color-vars": "rc"
Everyone @latest "named-color-vars": "latest"
Latest Stable Version "named-color-vars": "^1.0.17"
Channel NPM Tag NPM Install
Hackers @dev npm install named-color-vars@dev
Lab Rats @rc npm install named-color-vars@rc
Everyone @latest npm install named-color-vars@latest
Latest Stable Version npm install named-color-vars

CDN Directory Indexes

Channel NPM Tag CDN Distribution Index
Hackers @dev https://unpkg.com/named-color-vars@dev/dist/
Lab Rats @rc https://unpkg.com/named-color-vars@rc/dist/
Everyone @latest https://unpkg.com/named-color-vars@latest/dist/
Latest Stable Version https://unpkg.com/named-color-vars@1.0.17/dist/

CDN Script URLs

Channel NPM Tag CDN Script URL
Hackers @dev https://unpkg.com/named-color-vars@dev
Lab Rats @rc https://unpkg.com/named-color-vars@rc
Everyone @latest https://unpkg.com/named-color-vars@latest
Latest Stable Version https://unpkg.com/named-color-vars@1.0.17

CDN In production, use the latest stable version with an SRI integrity hash.

<script src="https://unpkg.com/named-color-vars@1.0.17" integrity="sha384-wu1yiJkXAQGYeWol5rKJ8e2BvqOCw0Cu6YHSUj3ZkusP1UEX0nUjnkorEFO0Dbuc" crossorigin="anonymous"></script>

Tip: Don't use an SRI hash with a tag like @dev, @rc, or @latest. Tags reference a version dynamically; e.g., the @latest tag will point to an updated copy once the next version is released. So a tagged release URL may render an SRI invalid. If you need the SRI, use a specific @x.x.x version in the URL instead of a tag.

MIT License

For full details see: LICENSE.txt


For full details see: CHANGELOG.md

Semantic Versioning

New versions are released following semver.org guidelines.

Pull Requests Welcome

fork the master branch at GitHub and submit your changes for review.

Lab Rats Subscribe