@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 an interactive CLI for generating CSS files.

npx @diskette/palette

The CLI guides you through:

1. Select accent colors - Choose from all available accent colors with color swatches, plus alpha colors (blackAlpha, whiteAlpha)
2. Select gray colors - Natural pairings are pre-selected based on your accent choices
3. Output directory - Where to save the generated files (default: ./palette)
4. Generate accents.css? - Include [data-accent-color] and [data-gray-color] selectors
5. Generate Tailwind v4 config? - Include @theme inline mappings in index.css

Example output:

palette/
├── 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
├── accents.css      # [data-accent-color] selectors (optional)
└── index.css        # Tailwind v4 @theme mappings (optional)

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