A color palette library based on [Radix Colors](https://www.radix-ui.com/colors) with support for both sRGB and Display P3 color spaces.
npm install @diskette/paletteA color palette library based on Radix Colors with support for both sRGB and Display P3 color spaces.
``bash`
npm install @diskette/paletteor
pnpm add @diskette/palette
`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'
`
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)
`
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 })
`
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)'
`
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)[data-accent-color]
4. Generate accents.css? - Include and [data-gray-color] selectors@theme inline
5. Generate Tailwind v4 config? - Include 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)
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, mauve, olive, sage, sand, slate
blackAlpha, whiteAlpha
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 |
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.
Generates CSS custom properties for alpha color scales (blackAlpha, whiteAlpha).
`ts`
css.alpha(config: AlphaConfig): string
Generates CSS for [data-accent-color] attribute selectors, mapping accent variables to the specified color.
`ts`
css.accents(colorNames: string[]): string
Generates CSS for [data-gray-color] attribute selectors nested under a class.
`ts`
css.grays(names: readonly string[], className: string): string
Generates Tailwind v4 @theme inline CSS that maps palette variables to Tailwind color utilities.
`ts``
css.tailwind(colorNames: string[]): string
Color values are derived from Radix Colors by WorkOS.
MIT