CtrlK
BlogDocsLog inGet started
Tessl Logo

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.

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

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>

docs

index.md

tile.json