or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.md
tile.json

tessl/npm-colors.css

Better default colors for the web with CSS utility classes and JavaScript color palette for faster prototyping and nicer looking sites.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/colors.css@3.0.x

To install, run

npx @tessl/cli install tessl/npm-colors.css@3.0.0

index.mddocs/

colors.css

colors.css provides better default colors for the web through a comprehensive collection of CSS utility classes and JavaScript color palette. It offers a curated set of 17 well-designed colors with utility classes for background colors, text colors, border colors, and SVG styling, enabling faster prototyping and consistent color schemes across web applications.

Package Information

  • Package Name: colors.css
  • Package Type: npm
  • Language: CSS with JavaScript utilities
  • Installation: npm install colors.css

Core Imports

CSS Import

<link rel="stylesheet" href="node_modules/colors.css/css/colors.css">

CSS Module import:

@import "colors.css/css/colors.css";

PostCSS with tachyons-cli:

@import "colors.css";

JavaScript Import

const colors = require('colors.css');

ES6 import (when bundled):

import colors from 'colors.css';

Browser (global):

<script src="node_modules/colors.css/js/colors.js"></script>
<script>
  console.log(window.colors.blue); // '#0074d9'
</script>

Basic Usage

CSS Classes

<!-- Background colors -->
<div class="bg-blue">Blue background</div>
<div class="bg-red">Red background</div>

<!-- Text colors -->
<p class="navy">Navy text</p>
<p class="green">Green text</p>

<!-- Border colors (requires additional border utilities) -->
<div class="border-1 border-solid border--purple">Purple border</div>

<!-- SVG styling -->
<svg class="fill-yellow stroke-black">
  <circle cx="50" cy="50" r="40"/>
</svg>

JavaScript Color Access

const colors = require('colors.css');

// Use colors in JavaScript
document.body.style.backgroundColor = colors.navy;
console.log(`Primary: ${colors.blue}, Secondary: ${colors.teal}`);

// Available colors
const primaryColors = [colors.blue, colors.green, colors.red];

CSS Custom Properties

/* CSS variables are automatically available */
.custom-element {
  background: var(--blue);
  color: var(--white);
  border-color: var(--navy);
}

Color Palette

The library includes 17 carefully selected colors organized into logical groups:

Cool Colors:

  • navy (#001F3F), blue (#0074D9), aqua (#7FDBFF), teal (#39CCCC)
  • olive (#3D9970), green (#2ECC40), lime (#01FF70)

Warm Colors:

  • yellow (#FFDC00), orange (#FF851B), red (#FF4136)
  • fuchsia (#F012BE), purple (#B10DC9), maroon (#85144B)

Grayscale:

  • white (#FFFFFF), silver (#DDDDDD), gray (#AAAAAA), black (#111111)

Capabilities

CSS Custom Properties

CSS variables defined at the root level for all colors, enabling custom styling and theme customization.

:root {
  --navy: #001F3F;
  --blue: #0074D9;
  --aqua: #7FDBFF;
  --teal: #39CCCC;
  --olive: #3D9970;
  --green: #2ECC40;
  --lime: #01FF70;
  --yellow: #FFDC00;
  --orange: #FF851B;
  --red: #FF4136;
  --fuchsia: #F012BE;
  --purple: #B10DC9;
  --maroon: #85144B;
  --white: #FFFFFF;
  --silver: #DDDDDD;
  --gray: #AAAAAA;
  --black: #111111;
}

Background Color Classes

Utility classes that apply background-color to elements. Each class sets the background to one of the 17 colors.

.bg-navy { background-color: #001F3F; }
.bg-blue { background-color: #0074D9; }
.bg-aqua { background-color: #7FDBFF; }
.bg-teal { background-color: #39CCCC; }
.bg-olive { background-color: #3D9970; }
.bg-green { background-color: #2ECC40; }
.bg-lime { background-color: #01FF70; }
.bg-yellow { background-color: #FFDC00; }
.bg-orange { background-color: #FF851B; }
.bg-red { background-color: #FF4136; }
.bg-fuchsia { background-color: #F012BE; }
.bg-purple { background-color: #B10DC9; }
.bg-maroon { background-color: #85144B; }
.bg-white { background-color: #FFFFFF; }
.bg-gray { background-color: #AAAAAA; }
.bg-silver { background-color: #DDDDDD; }
.bg-black { background-color: #111111; }

Text Color Classes

Utility classes that apply color to text elements. Each class sets the text color to one of the 17 colors.

.navy { color: #001F3F; }
.blue { color: #0074D9; }
.aqua { color: #7FDBFF; }
.teal { color: #39CCCC; }
.olive { color: #3D9970; }
.green { color: #2ECC40; }
.lime { color: #01FF70; }
.yellow { color: #FFDC00; }
.orange { color: #FF851B; }
.red { color: #FF4136; }
.fuchsia { color: #F012BE; }
.purple { color: #B10DC9; }
.maroon { color: #85144B; }
.white { color: #FFFFFF; }
.silver { color: #DDDDDD; }
.gray { color: #AAAAAA; }
.black { color: #111111; }

Border Color Classes

Utility classes that apply border-color to elements. These classes only set the border color and should be used with additional border utilities that define border-width and border-style.

.border--navy { border-color: #001F3F; }
.border--blue { border-color: #0074D9; }
.border--aqua { border-color: #7FDBFF; }
.border--teal { border-color: #39CCCC; }
.border--olive { border-color: #3D9970; }
.border--green { border-color: #2ECC40; }
.border--lime { border-color: #01FF70; }
.border--yellow { border-color: #FFDC00; }
.border--orange { border-color: #FF851B; }
.border--red { border-color: #FF4136; }
.border--fuchsia { border-color: #F012BE; }
.border--purple { border-color: #B10DC9; }
.border--maroon { border-color: #85144B; }
.border--white { border-color: #FFFFFF; }
.border--gray { border-color: #AAAAAA; }
.border--silver { border-color: #DDDDDD; }
.border--black { border-color: #111111; }

Usage Example:

/* Combine with border utilities */
.bordered-element {
  border-width: 1px;
  border-style: solid;
}
<div class="bordered-element border--blue">Blue bordered box</div>

SVG Fill Classes

Utility classes that set the fill property for SVG elements. Each class applies one of the 17 colors as the fill color.

.fill-navy { fill: #001F3F; }
.fill-blue { fill: #0074D9; }
.fill-aqua { fill: #7FDBFF; }
.fill-teal { fill: #39CCCC; }
.fill-olive { fill: #3D9970; }
.fill-green { fill: #2ECC40; }
.fill-lime { fill: #01FF70; }
.fill-yellow { fill: #FFDC00; }
.fill-orange { fill: #FF851B; }
.fill-red { fill: #FF4136; }
.fill-fuchsia { fill: #F012BE; }
.fill-purple { fill: #B10DC9; }
.fill-maroon { fill: #85144B; }
.fill-white { fill: #FFFFFF; }
.fill-gray { fill: #AAAAAA; }
.fill-silver { fill: #DDDDDD; }
.fill-black { fill: #111111; }

SVG Stroke Classes

Utility classes that set the stroke property for SVG elements. Each class applies one of the 17 colors as the stroke color.

.stroke-navy { stroke: #001F3F; }
.stroke-blue { stroke: #0074D9; }
.stroke-aqua { stroke: #7FDBFF; }
.stroke-teal { stroke: #39CCCC; }
.stroke-olive { stroke: #3D9970; }
.stroke-green { stroke: #2ECC40; }
.stroke-lime { stroke: #01FF70; }
.stroke-yellow { stroke: #FFDC00; }
.stroke-orange { stroke: #FF851B; }
.stroke-red { stroke: #FF4136; }
.stroke-fuchsia { stroke: #F012BE; }
.stroke-purple { stroke: #B10DC9; }
.stroke-maroon { stroke: #85144B; }
.stroke-white { stroke: #FFFFFF; }
.stroke-gray { stroke: #AAAAAA; }
.stroke-silver { stroke: #DDDDDD; }
.stroke-black { stroke: #111111; }

SVG Usage Example:

<svg width="100" height="100">
  <circle cx="50" cy="50" r="20" class="fill-blue stroke-navy" stroke-width="2"/>
  <rect x="10" y="10" width="30" height="30" class="fill-green stroke-red" stroke-width="1"/>
</svg>

JavaScript Color Object

JavaScript object containing the color palette for programmatic access in both Node.js and browser environments.

/**
 * Color palette object with hex color values
 * Available as CommonJS export in Node.js and window.colors in browsers
 */
const colors = {
  aqua: '#7fdbff',
  blue: '#0074d9',
  lime: '#01ff70',
  navy: '#001f3f',
  teal: '#39cccc',
  olive: '#3d9970',
  green: '#2ecc40',
  red: '#ff4136',
  maroon: '#85144b',
  orange: '#ff851b',
  purple: '#b10dc9',
  yellow: '#ffdc00',
  fuchsia: '#f012be',
  gray: '#aaaaaa',
  white: '#ffffff',
  black: '#111111',
  silver: '#dddddd'
};

Access Methods:

// Node.js / CommonJS
const colors = require('colors.css');
console.log(colors.blue); // '#0074d9'

// Browser (after including script)
console.log(window.colors.red); // '#ff4136'

Build System Integration

PostCSS with Tachyons

npm install -g tachyons-cli
tachyons-cli path/to/your-styles.css > dist/compiled.css

Source Files

The package includes modular source files in the src/ directory:

  • src/colors.css - Main entry point with imports
  • src/_variables.css - CSS custom property definitions
  • src/_skins.css - All utility class definitions

Development

npm start  # Builds css/colors.css and css/colors.min.css

Usage Patterns

Theme Customization

/* Override default colors by redefining CSS variables */
:root {
  --blue: #0066cc;  /* Custom blue */
  --red: #cc0000;   /* Custom red */
}

/* All classes using these variables will update automatically */

Responsive Design

/* Combine with responsive utilities */
@media (max-width: 768px) {
  .mobile-header {
    @apply bg-navy white;
  }
}

Component Integration

<!-- React/JSX -->
<button className="bg-blue white">Primary Button</button>
<div className="border--green bg-lime">Success Message</div>

<!-- Vue -->
<div :class="['bg-' + themeColor, 'white']">Dynamic Theming</div>