npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

color-combinations-css

v2.0.0

Published

The 348 color combinations from Sanzo Wada's A Dictionary of Color Combinations, as overridable CSS custom properties grouped by theme.

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

olle_jolle_j

Keywords

csscolorcolourpalettecolor-combinationssanzo-wadacss-variablescustom-propertiesthemedesign-tokens

Readme

color-combinations-css

The 348 color combinations from Sanzo Wada's A Dictionary of Color Combinations, packaged as overridable CSS custom properties — grouped by theme, ready to serve from a CDN.

No JavaScript, no build step. Just a single CSS file.

The combinations

Every combination, numbered #1–#348. Find one you like and use its number.

All 348 color combinations

Install

npm install color-combinations-css

Or use it straight from a CDN — no install:

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/[email protected]/color-combinations.css"
>

(unpkg works too: https://unpkg.com/[email protected]/color-combinations.css)

Usage

Set data-color-combination="N" (N = 1–348) on any element. Everything inside it inherits that combination's colors through CSS variables:

<section data-color-combination="176">
  <h1 style="color: var(--cc-1); background: var(--cc-2)">Hello</h1>
  <p style="color: var(--cc-3)">…</p>
</section>

Each combination defines --cc-1 … --cc-N, where N is 2, 3, or 4 depending on the combination (120 are 2-color, 120 are 3-color, 108 are 4-color). Colors are ordered by their position on the original plate.

Put data-color-combination on <html> to theme the whole page:

<html data-color-combination="42"> … </html>

Load just one combination

If you only want a single palette and don't need all 348, load that combination's file instead — it sets --cc-1 … --cc-N directly on :root, so it themes the whole page with ~200 bytes:

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/[email protected]/combos/176.css"
>
/* or in a bundler */
@import "color-combinations-css/combos/176.css";

No data-color-combination attribute needed in this mode — the variables are global.

Aliasing to your own names

The --cc- prefix is intentionally neutral so it never collides with framework tokens like --primary. Map them to friendlier names in your own stylesheet:

:root {
  --bg: var(--cc-1);
  --fg: var(--cc-2);
  --accent: var(--cc-3);
}

Why --cc-N and not --primary?

--primary / --secondary carry semantic meaning in front-end frameworks (Bootstrap, Material, Tailwind, shadcn) — "the brand color," "the action color." These combinations are just ordered, harmonious sets with no inherent roles, and a neutral prefix avoids clobbering existing design tokens.

Data & license

Color data is from dictionary-of-colour-combinations (digitized from Sanzo Wada's book, public domain). This packaging is released under the MIT License.