@diskette/palette

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

Installation

``bash
npm install @diskette/palette


or


pnpm add @diskette/palette
`

Usage

$3

`ts
// 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'
`

$3

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

`ts
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)
`

$3

Use the css utility to generate CSS custom properties:

`ts
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 })
`

$3

For transparency overlays:

`ts
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.

`bash
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

$3

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

$3

gray, mauve, olive, sage, sand, slate

$3

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

$3

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

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

Example output

`css
: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.

$3

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

`ts
css.alpha(config: AlphaConfig): string
`

$3

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

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

$3

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

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

$3

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

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

Credits

Color values are derived from Radix Colors by WorkOS.

License

MIT