Pastel Palette

A comprehensive kawaii-inspired color system with OKLCH color space support, TypeScript definitions, and TailwindCSS v4 integration. Features a cute & kawaii aesthetic with soft, pastel tones.

Features

- 🎨 OKLCH Color Space: Modern color format with sRGB and P3 fallbacks
- 🌸 Kawaii Aesthetic: Soft pastel colors with high lightness values
- 🔧 TypeScript Support: Full type definitions for all color values
- 🎯 Semantic Colors: UIKit-inspired semantic color system
- 🌓 Dark Mode: Automatic light/dark mode adaptation with multiple strategies
- 💨 TailwindCSS v4: CSS-based configuration with @theme directives
- 📦 Monorepo Structure: Modular packages for colors and TailwindCSS integration

Usage

TailwindCSS v4 integration with automatic CSS generation and color variants support.

``css
/ Use generated CSS variables in your styles /
.my-element {
color: var(--color-text);
background-color: var(--color-background);
border-color: var(--color-border);
}
`

Installation

`bash


Install TailwindCSS integration

`css
/ Choose your color space - all include unified kawaii and high-contrast support /

/ OKLCH color space (recommended) /
@import '@pastel-palette/tailwindcss/dist/theme-oklch.css';

/ sRGB color space (fallback) /
@import '@pastel-palette/tailwindcss/dist/theme-srgb.css';

/ P3 Display color space (wide gamut) /
@import '@pastel-palette/tailwindcss/dist/theme-p3.css';
`

2. Use the color variables in your TailwindCSS config or CSS:

`css
.button {
background-color: var(--color-accent);
color: var(--color-white);
border: 1px solid var(--color-border);
}

/ With opacity modifiers /
.overlay {
background-color: var(--color-material-medium);
}
`

$3

The color system now supports three variants: regular, kawaii, and high-contrast. You can use them in two ways:

#### Method 1: Data Attributes (Responsive Override)

Use data attributes to apply color variants that automatically switch between light and dark modes:

`html




`html



- blue, pink, purple, green, orange, yellow
- sky, red, brown, gray, neutral, black, white
- Available in three variants: regular (default), kawaii (softer), high-contrast (more accessible)

$3

#### Element Colors

- text - Primary text colors with depth levels
- placeholder-text - Form placeholder text
- border - Border colors with primary/secondary variants
- separator - Divider/separator lines
- link - Interactive link colors
- disabled-control - Disabled UI controls
- disabled-text - Disabled text elements

#### Background Colors

Depth levels: primary, secondary, tertiary, quaternary, quinary

#### Fill Colors

System fills with depth levels for UI components

#### Material Colors

Opacity-based materials:

- ultra-thick (93% opacity)
- thick (85% opacity)
- medium (72% opacity)
- thin (60% opacity)
- ultra-thin (45% opacity)
- opaque (100% opacity)

#### Application Colors

- accent - Main accent color
- primary - Primary brand color
- secondary - Secondary brand color

Dark Mode & Color Variants

The unified theme system automatically handles dark mode via TailwindCSS v4's built-in dark mode support. All color variants (regular, kawaii, high-contrast) work seamlessly with dark mode.

$3

Dark mode is activated using TailwindCSS v4's standard approach:

`html



Content






Content automatically uses dark colors


`

$3

Control color variants independently of dark mode:

`html



Kawaii colors, dark mode follows OS






High contrast + dark mode


`

Development

`bash


Clone the repository

#### Kawaii Colors (-kawaii)

- Higher lightness values (0.82-0.9 in OKLCH)
- Lower chroma (0.08-0.14) for extra softness
- Ultra-cute aesthetic with pastel softness
- Perfect for kawaii/cute themed applications

#### High Contrast Colors (-hc`)

- Lower lightness values (0.4-0.6 in OKLCH)
- Higher chroma (0.2-0.3) for vivid appearance
- WCAG AAA compliant contrast ratios
- Enhanced accessibility for visually impaired users

License

2025 © Innei, Released under the MIT License.

> Personal Website · GitHub @Innei