or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.md
tile.json

index.mddocs/

Colors.css

Colors.css is a comprehensive CSS utility library that provides better default colors for web development. It offers a curated palette of 17 carefully selected colors optimized for accessibility and visual appeal, available as CSS utility classes, preprocessor variables, and JavaScript objects across multiple formats.

Package Information

  • Package Name: colors.css
  • Package Type: npm
  • Language: CSS
  • Installation: npm install colors.css
  • CDN: Available via npm CDN or direct download
  • Size: 647B minified and gzipped, 888B uncompressed

Core Imports

CSS Import

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

or via CDN:

<link rel="stylesheet" href="https://unpkg.com/colors.css@2.3.0/css/colors.css">

JavaScript Import

// CommonJS (main entry point)
const colors = require('colors.css');

// ESM (importing CommonJS module)
import colors from 'colors.css';

Preprocessor Imports

// Sass
@import "~colors.css/sass/colors";

// Less
@import "~colors.css/less/colors";

// Stylus
@import "~colors.css/stylus/colors"

Basic Usage

/* Apply background colors */
.header { @apply bg-blue; }
.sidebar { @apply bg-gray; }

/* Apply text colors */
.title { @apply navy; }
.subtitle { @apply silver; }

/* Apply border colors (requires border-width and border-style) */
.card { 
  border-width: 1px; 
  border-style: solid; 
  @apply border--blue; 
}

/* Apply SVG colors */
svg.icon { @apply fill-green; }
svg.outline { @apply stroke-red; }

Color Palette

Colors.css provides 17 distinct colors organized into three categories:

Cool Colors

  • navy: #001F3F - Deep navy blue
  • blue: #0074D9 - Bright blue
  • aqua: #7FDBFF - Light cyan/aqua
  • teal: #39CCCC - Medium teal
  • olive: #3D9970 - Olive/dark green
  • green: #2ECC40 - Bright green
  • lime: #01FF70 - Bright lime green

Warm Colors

  • yellow: #FFDC00 - Golden yellow
  • orange: #FF851B - Orange
  • red: #FF4136 - Bright red
  • fuchsia: #F012BE - Bright pink/magenta
  • purple: #B10DC9 - Purple
  • maroon: #85144B - Dark red/maroon

Gray Scale

  • white: #fff - Pure white
  • silver: #ddd - Light gray
  • gray: #aaa - Medium gray
  • black: #111 - Near black

Capabilities

Background Color Classes

CSS utility classes for setting background 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: #fff; }
.bg-gray { background-color: #aaa; }
.bg-silver { background-color: #ddd; }
.bg-black { background-color: #111; }

Usage:

<div class="bg-blue">Blue background</div>
<section class="bg-gray">Gray section</section>
<header class="bg-navy">Navy header</header>

Text Color Classes

CSS utility classes for setting text 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: #fff; }
.silver { color: #ddd; }
.gray { color: #aaa; }
.black { color: #111; }

Usage:

<h1 class="navy">Navy title</h1>
<p class="gray">Gray text paragraph</p>
<span class="red">Red warning text</span>

Border Color Classes

CSS utility classes for setting border colors. These classes only set the border-color property and require border-width and border-style to be set separately.

.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: #fff; }
.border--gray { border-color: #aaa; }
.border--silver { border-color: #ddd; }
.border--black { border-color: #111; }

Usage:

<div class="border-2 border-solid border--blue">Blue border</div>
<button style="border-width: 1px; border-style: solid;" class="border--green">
  Green border button
</button>

SVG Fill Classes

CSS utility classes for setting SVG fill colors.

.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: #fff; }
.fill-gray { fill: #aaa; }
.fill-silver { fill: #ddd; }
.fill-black { fill: #111; }

Usage:

<svg class="fill-blue">
  <circle cx="50" cy="50" r="40" />
</svg>
<svg>
  <path class="fill-green" d="M10 10 L90 90 L10 90 Z" />
</svg>

SVG Stroke Classes

CSS utility classes for setting SVG stroke colors.

.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: #fff; }
.stroke-gray { stroke: #aaa; }
.stroke-silver { stroke: #ddd; }
.stroke-black { stroke: #111; }

Usage:

<svg>
  <circle class="stroke-red" fill="none" stroke-width="2" cx="50" cy="50" r="40" />
</svg>
<svg class="stroke-purple" stroke-width="3" fill="none">
  <path d="M10 10 L90 90" />
</svg>

JavaScript Color Object

JavaScript object containing all color values as hex strings for programmatic use.

/**
 * Color values object with all 17 colors as hex strings
 */
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: "#aaa",
  white: "#fff", 
  black: "#111",
  silver: "#ddd"
};

Usage:

import colors from 'colors.css';

// Use in JavaScript
document.body.style.backgroundColor = colors.blue;
const theme = {
  primary: colors.navy,
  secondary: colors.teal,
  accent: colors.orange
};

// Use with Canvas API
context.fillStyle = colors.red;
context.fillRect(0, 0, 100, 100);

Sass Variables

Sass variables for all colors, following the $color naming convention.

// Cool Colors
$aqua: #7FDBFF;
$blue: #0074D9;
$navy: #001F3F;
$teal: #39CCCC;
$green: #2ECC40;
$olive: #3D9970;
$lime: #01FF70;

// Warm Colors  
$yellow: #FFDC00;
$orange: #FF851B;
$red: #FF4136;
$fuchsia: #F012BE;
$purple: #B10DC9;
$maroon: #85144B;

// Gray Scale
$white: #fff;
$silver: #ddd;
$gray: #aaa;
$black: #111;

Usage:

@import "~colors.css/sass/variables";

.header {
  background-color: $navy;
  color: $white;
  border-bottom: 2px solid $blue;
}

.button {
  background-color: $green;
  &:hover {
    background-color: darken($green, 10%);
  }
}

Less Variables

Less variables for all colors, following the @color naming convention.

// Cool Colors
@aqua: #7FDBFF;
@blue: #0074D9;
@navy: #001F3F;
@teal: #39CCCC;
@green: #2ECC40;
@olive: #3D9970;
@lime: #01FF70;

// Warm Colors
@yellow: #FFDC00;
@orange: #FF851B;
@red: #FF4136;
@fuchsia: #F012BE;
@purple: #B10DC9;
@maroon: #85144B;

// Gray Scale
@white: #fff;
@silver: #ddd;
@gray: #aaa;
@black: #111;

Usage:

@import "~colors.css/less/variables";

.header {
  background-color: @navy;
  color: @white;
  border-bottom: 2px solid @blue;
}

.button {
  background-color: @green;
  &:hover {
    background-color: darken(@green, 10%);
  }
}

Stylus Variables

Stylus variables for all colors, using assignment syntax.

// Color Variables
aqua = #7FDBFF
blue = #0074D9
navy = #001F3F
teal = #39CCCC
green = #2ECC40
olive = #3D9970
lime = #01FF70
yellow = #FFDC00
orange = #FF851B
red = #FF4136
fuchsia = #F012BE
purple = #B10DC9
maroon = #85144B
white = #ffffff
silver = #dddddd
gray = #aaaaaa
black = #111111

Usage:

@import "~colors.css/stylus/variables"

.header
  background-color navy
  color white
  border-bottom 2px solid blue

.button
  background-color green
  &:hover
    background-color darken(green, 10%)

CSS Custom Properties

CSS custom properties (CSS variables) for all colors, available in the :root selector.

:root {
  /* Cool Colors */
  --aqua: #7fdbff;
  --blue: #0074d9;
  --navy: #001f3f;
  --teal: #39cccc;
  --green: #2ecc40;
  --olive: #3d9970;
  --lime: #01ff70;

  /* Warm Colors */
  --yellow: #ffdc00;
  --orange: #ff851b;
  --red: #ff4136;
  --fuchsia: #f012be;
  --purple: #b10dc9;
  --maroon: #85144b;

  /* Gray Scale */
  --white: #fff;
  --silver: #ddd;
  --gray: #aaa;
  --black: #111;
}

Usage:

@import "~colors.css/myth/variables";

.header {
  background-color: var(--navy);
  color: var(--white);
  border-bottom: 2px solid var(--blue);
}

.button {
  background-color: var(--green);
}

.button:hover {
  filter: brightness(0.9);
}

Build and Development

Available Build Tasks

The package includes a Gulp-based build system for development and customization:

# Install dependencies
npm install

# Default development server with live reload
gulp

# Compile Sass to CSS
gulp sass

# Compile Stylus to CSS  
gulp stylus

# Compile Myth CSS to standard CSS
gulp myth

# Minify CSS
gulp minify

# Lint CSS
gulp lint

File Structure

colors.css/
├── css/               # Distribution CSS files
│   ├── colors.css     # Main CSS file
│   └── colors.min.css # Minified version
├── js/                # JavaScript module
│   └── colors.js      # Color object export
├── sass/              # Sass source files
│   ├── _variables.scss
│   ├── _skins.scss
│   └── colors.scss
├── less/              # Less source files
│   ├── _variables.less
│   ├── _skins.less  
│   └── colors.less
├── stylus/            # Stylus source files
│   ├── variables.styl
│   ├── skins.styl
│   └── colors.styl
├── myth/              # Myth CSS files
│   ├── variables.css
│   ├── skins.css
│   └── colors.css
└── coffee/            # CoffeeScript version
    └── colors.coffee

License

MIT License - see the package for full license details.