Nine Degrees Below Palette

The Nine Degrees Below's palette in various formats.

This node package is inspired by Nine Degrees Below's LCh color palette. It repackages it in various formats to make it easier to reuse in Node-based packages. It also produces GPL palette files for use with GNU Image and Inkscape.

This defines all five saturations of the twenty-four colors.

There are also color wheels that mostly match the ones from Nine Degrees Below:

Conventions

In most cases, the hues are identified by h and a three digit, zero-padded number:

• h000
• h024
• h038
• h053
• h065
• h080
• h090
• h100
• h115
• h130
• h145
• h162
• h180
• h204
• h218
• h233
• h245
• h260
• h270
• h280
• h295
• h310
• h325
• h342

There are five saturations at each level.

• s10 for 1.0 saturation
• s08 for 0.8 saturation
• s06 for 0.6 saturation
• s04 for 0.4 saturation
• s02 for 0.2 saturation

From the source file, there is a GPL file with only the 0.8 and 0.2 saturation.

The color codes are in the format of color-nine-degrees-below-h000-s08.

There are also thirteen levels of gray: g05, g10, g15, g20, g30, g40, g50, g60, g70, g80, g85, g90, g95. These go from darkest to lightest.

Locations

The cannon location for this repository is:

• MfGames

Mirrors are also available at:

• SourceHut
• Radicle

Issues can be reported in any of the three locations (check the mirrors first).

Usage

The primary way of using this is as a Node package.

npm install --only-dev @mfgames/nine-degrees-below

Including as a style

@import "@mfgames/nine-degrees-below/styles/nine-degrees-below-oklch.css";

There are two formats for this file:

• Using oklch():
  • @mfgames/nine-degrees-below/styles/nine-degrees-below-oklch.css
• Using hex strings:
  • @mfgames/nine-degrees-below/styles/nine-degrees-below-hex.css

There is also a Sass variant changing .css to .scss.

Style Dictionary

With Style Dictionary, it can be used directly.

// build.ts
import StyleDictionary from "style-dictionary";
import { tokens } from "@mfgames/nine-degrees-below";

const style = new StyleDictionary({
    source: [`src/tokens/**/*.json`],
    tokens,
    platforms: {},
});

Then in your token file:

{
    "theme": {
        "$type": "color",

        "background": {
            "$type": "color",
            "$value": "{color.nine-degrees-below.g90}"
        }
    }
}

The three variable exposed by the package are:

• tokens is the DTCG color token file
• tokensHex is a nested JS structure of hex codes, such as color.nine-degrees-below.h000.s10
• tokensOklch is the same as Hex but with oklch() CSS functions