mrmrs/colors

★ 9,389CSSAudience · designerComplexity · 1/5LicenseSetup · easy

Mindmap

mindmap
  root((colors.css))
    What it does
      Named color classes
      17-color palette
      Zero dependencies
    Class types
      Background bg-
      Text color
      Border border--
      SVG fill- stroke-
    Delivery
      Link CSS file
      npm install
      Copy-paste classes
    Ecosystem
      Tachyons system
      Functional CSS
    Audience
      Web designers
      Frontend devs

mindmap root((colors.css)) What it does Named color classes 17-color palette Zero dependencies Class types Background bg- Text color Border border-- SVG fill- stroke- Delivery Link CSS file npm install Copy-paste classes Ecosystem Tachyons system Functional CSS Audience Web designers Frontend devs

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Apply consistent background and text colors to HTML elements by adding a single class name instead of writing hex codes.

USE CASE 2

Style SVG graphics with named fill and stroke color classes from the shared palette.

USE CASE 3

Drop a single 903-byte CSS file into any project for instant color utility classes with no build tooling required.

Tech stack

CSSnpm

Getting it running

Difficulty · easy Time to first run · 5min

MIT license, use freely in any project, commercial or open-source, just keep the copyright notice.

In plain English

colors.css is a small CSS file that defines a set of named color values as ready-to-use utility classes for web pages. Instead of writing custom color values in hex codes every time you need to color something, you add a class name like .bg-blue or .navy to an HTML element and the color is applied for you. The palette covers 17 colors including navy, blue, aqua, teal, olive, green, lime, yellow, orange, red, fuchsia, purple, maroon, plus white, gray, silver, and black. The library provides four types of classes for each color: background color classes (prefixed with .bg-), text color classes (no prefix), border color classes (prefixed with .border--), and fill and stroke classes for SVG graphics (prefixed with .fill- and .stroke-). This covers the most common cases where a developer would want to apply a consistent color in HTML and CSS without writing it by hand each time. The entire file is only 903 bytes. It has no JavaScript, no build requirements for basic use, and no dependencies. You can link directly to the built CSS file in HTML, install it via npm, or copy and paste the relevant classes into an existing stylesheet. It is part of the Tachyons design system ecosystem, which follows a functional CSS approach where small single-purpose classes are composed to style elements. The README notes that customizing the default color values is possible through a separate tool at components.ai, and links to several alternative open-source color systems based on different color models. The project is released under the MIT license.

Copy-paste prompts

Prompt 1

Show me how to use colors.css to style a card component in HTML with a navy background, white text, and a teal border, just the HTML and class names, no custom CSS.

Prompt 2

I want to add colors.css to my project via npm and import it in a simple Vite setup. Walk me through the install and import steps.

Prompt 3

I need to customize the blue color in colors.css to match my brand. Show me how to override the .blue class and generate a modified version using the components.ai tool mentioned in the README.

Prompt 4

Show me how to apply the fill- and stroke- classes from colors.css to an inline SVG icon to change its color on hover using just HTML and CSS.

Prompt 5

Explain the functional CSS philosophy behind colors.css and the Tachyons system, how does composing single-purpose classes compare to writing semantic CSS class names?

Open on GitHub → Explain another repo

← mrmrs on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.