@diskette/palette

A color palette library based on Radix Colors with support for both sRGB and Display P3 color spaces.

Installation

npm install @diskette/palette
# or
pnpm add @diskette/palette

Usage

Importing Colors

// Import all colors
import colors from '@diskette/palette'

// Import specific colors
import { blue, red, gray } from '@diskette/palette/colors'

// Import a single color
import blue from '@diskette/palette/colors/blue'

Color Structure

Each color provides separate 12-step arrays for solid and alpha scales, organized by theme and color space:

import blue from '@diskette/palette/colors/blue'

// sRGB solid values (hex) - 12-item array indexed 0-11
blue.light.srgb.solid[8]  // '#0090ff' (step 9)
blue.dark.srgb.solid[8]   // '#0090ff' (step 9)

// Display P3 solid values
blue.light.p3.solid[8]  // 'color(display-p3 0.247 0.556 0.969)'
blue.dark.p3.solid[8]   // 'color(display-p3 0.247 0.556 0.969)'

// Alpha variants - separate 12-item array indexed 0-11
blue.light.srgb.alpha[8] // alpha step 9
blue.light.p3.alpha[8]   // alpha step 9 in P3

// Surface (translucent overlay)
blue.surface.srgb.light // '#f1f9ffcc'
blue.surface.p3.dark    // 'color(display-p3 0.0706 0.1255 0.2196 / 0.5)'

// Semantic values
blue.contrast  // 'white'
blue.indicator // 9 (step number)
blue.track     // 9 (step number)

Generating CSS

Use the css utility to generate CSS custom properties:

import { css } from '@diskette/palette'
import blue from '@diskette/palette/colors/blue'

// Generate CSS variables for light theme
css.palette(blue)
// Output: :root { --blue-contrast: white; ... }
//         :root, .light, .light-theme { --blue-1: #fbfdff; ... }

// Include dark theme
css.palette(blue, { schemes: ['light', 'dark'] })

// Include alpha scale variables (--blue-a1, etc.)
css.palette(blue, { schemes: ['light'], alpha: true })

Alpha Colors

For transparency overlays:

import { blackAlpha, whiteAlpha } from '@diskette/palette/colors'

blackAlpha.srgb.blackA5 // 'rgba(0, 0, 0, 0.3)'
whiteAlpha.p3.whiteA5   // 'color(display-p3 1 1 1 / 0.3)'

CLI

The package includes a CLI for generating CSS files.

palette generate

Generate CSS files for color palettes.

palette generate blue,red,slate -a -o ./styles

styles/
├── index.css        # Imports + Tailwind v4 @theme mappings
├── accents.css      # [data-accent-color] selectors (-a flag)
├── blue.css         # Light theme: --blue-1 through --blue-12, --blue-a1 through --blue-a12
├── blue-dark.css    # Dark theme variants
├── red.css
├── red-dark.css
├── slate.css
├── slate-dark.css
├── black-alpha.css  # --black-a1 through --black-a12
└── white-alpha.css  # --white-a1 through --white-a12

Options:

• -o, --output <dir> - Output directory (required)
• -a, --accents - Generate accents.css with [data-accent-color] and [data-gray-color] selectors

palette list

List available colors.

palette list           # List all colors
palette list --accent  # List only accent colors
palette list --gray    # List only gray colors

Available Colors

Accent Colors

amber, blue, bronze, brown, crimson, cyan, gold, grass, gray, green, indigo, iris, jade, lime, mint, orange, pink, plum, purple, red, ruby, sky, teal, tomato, violet, yellow

Gray Scales

gray, mauve, olive, sage, sand, slate

Alpha Colors

blackAlpha, whiteAlpha

Color Scale

Each color provides a 12-step scale following Radix Colors conventions:

| Step | Use Case | | ---- | ----------------------------- | | 1-2 | App backgrounds | | 3-4 | Component backgrounds | | 5 | Hovered component backgrounds | | 6 | Active/selected backgrounds | | 7 | Borders and separators | | 8 | Hovered borders, focus rings | | 9 | Solid backgrounds | | 10 | Hovered solid backgrounds | | 11 | Low-contrast text | | 12 | High-contrast text |

API Reference

css.palette(config, options?)

Generates CSS custom properties for a color's scale and semantic tokens.

css.palette(config: PaletteColor, options?: {
  schemes?: ('light' | 'dark')[]  // Defaults to ['light']
  alpha?: boolean                 // Include alpha scale (--color-a1, etc.). Defaults to false
}): string

:root {
  --amber-contrast: #21201c;
  --amber-indicator: var(--amber-9);
  --amber-track: var(--amber-9);
}

:root,
.light,
.light-theme {
  --amber-1: #fefdfb;
  --amber-2: #fefbe9;
  --amber-3: #fff7c2;
  --amber-4: #ffee9c;
  --amber-5: #fbe577;
  --amber-6: #f3d673;
  --amber-7: #e9c162;
  --amber-8: #e2a336;
  --amber-9: #ffc53d;
  --amber-10: #ffba18;
  --amber-11: #ab6400;
  --amber-12: #4f3422;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root,
    .light,
    .light-theme {
      --amber-1: color(display-p3 0.995 0.992 0.985);
      /* ... */
    }
  }
}

Output includes @supports and @media (color-gamut: p3) blocks for Display P3 fallbacks.

css.alpha(config)

Generates CSS custom properties for alpha color scales (blackAlpha, whiteAlpha).

css.alpha(config: AlphaConfig): string

css.accents(colorNames)

Generates CSS for [data-accent-color] attribute selectors, mapping accent variables to the specified color.

css.accents(colorNames: string[]): string

css.grays(names, className)

Generates CSS for [data-gray-color] attribute selectors nested under a class.

css.grays(names: readonly string[], className: string): string

css.tailwind(colorNames)

Generates Tailwind v4 @theme inline CSS that maps palette variables to Tailwind color utilities.

css.tailwind(colorNames: string[]): string

Credits

Color values are derived from Radix Colors by WorkOS.

License

MIT