Pastel UI is a beautiful, feature-rich interface for the [Pastel API](https://github.com/valknarness/pastel-api), providing intuitive tools for color manipulation, palette generation, and accessibility testing.
## Features
### 🎨 Color Playground
- **Interactive Color Picker** - Real-time color selection with live preview
- **Multi-Format Support** - Hex, RGB, HSL, HSV, Lab, OkLab, LCH, OkLCH, CMYK, Gray, and 148 named colors
Open [http://localhost:3000](http://localhost:3000) in your browser.
### Environment Variables
```bash
# .env.local
NEXT_PUBLIC_API_URL=http://localhost:3000 # Your Pastel API URL
NEXT_PUBLIC_APP_URL=http://localhost:3000 # This app's URL (for sharing)
```
## Development
### Available Commands
```bash
# Development
pnpm dev # Start dev server (http://localhost:3000)
pnpm dev:turbo # Start with Turbopack (faster)
# Building
pnpm build # Production build
pnpm start # Start production server
# Code Quality
pnpm lint # Run ESLint
pnpm lint:fix # Fix ESLint issues automatically
pnpm format # Format code with Prettier
pnpm type-check # TypeScript type checking
# Testing
pnpm test # Run unit tests (Vitest)
pnpm test:ui # Vitest UI mode
pnpm test:e2e # Run E2E tests (Playwright)
pnpm test:e2e:ui # Playwright UI mode
# Analysis
pnpm analyze # Analyze bundle size
```
### Project Structure
```
pastel-ui/
├── app/ # Next.js App Router
│ ├── playground/ # Color manipulation tool
│ ├── palettes/ # Palette generation
│ ├── accessibility/ # Accessibility tools
│ ├── names/ # Named colors explorer
│ └── batch/ # Batch operations
├── components/
│ ├── ui/ # Base UI components
│ ├── color/ # Color-specific components
│ ├── tools/ # Tool components
│ └── layout/ # Layout components
├── lib/
│ ├── api/ # API client and queries
│ ├── utils/ # Utility functions
│ ├── hooks/ # Custom React hooks
│ └── stores/ # Zustand stores
└── tests/ # Unit and E2E tests
```
See [CLAUDE.md](CLAUDE.md) for detailed architecture documentation.
## Features Overview
### Color Playground (`/`)
The main interface for color manipulation:
- Input colors in any format
- View comprehensive color information
- Manipulate colors with intuitive controls
- Convert between formats instantly
- Copy values with one click
### Palette Generation (`/palettes`)
Create beautiful color palettes:
#### Harmony Palettes (`/palettes/harmony`)
Generate palettes based on color theory:
- **Monochromatic** - Variations of a single hue
- **Analogous** - Adjacent colors on the wheel
- **Complementary** - Opposite colors
- **Split-complementary** - Base + two adjacent to complement
- **Triadic** - Three evenly spaced colors
- **Tetradic** - Four colors in a rectangle
#### Distinct Colors (`/palettes/distinct`)
Generate visually distinct colors using advanced algorithms:
- Configurable count (2-100 colors)
- Distance metric selection (CIE76, CIEDE2000)
- Optional fixed colors to include
- Real-time progress indicator
#### Gradient Creator (`/palettes/gradient`)
Create smooth color gradients:
- Multiple color stops
- Configurable step count
- Color space selection for interpolation
- Live preview
- Export as CSS or color array
### Accessibility Tools (`/accessibility`)
Ensure your colors are accessible:
#### Contrast Checker (`/accessibility/contrast`)
- WCAG 2.1 compliance testing
- AA/AAA ratings for normal and large text
- Contrast ratio calculation
- Improvement recommendations
#### Color Blindness Simulator (`/accessibility/colorblind`)
- Simulate protanopia (red-blind)
- Simulate deuteranopia (green-blind)
- Simulate tritanopia (blue-blind)
- Side-by-side comparison
- Batch palette testing
### Named Colors Explorer (`/names`)
Browse and search 148 CSS/X11 named colors:
- Visual grid display
- Search by name or hex value
- Sort by hue, brightness, saturation, name
- Find nearest named color for any input
- Click to use in playground
### Batch Operations (`/batch`)
Process multiple colors efficiently:
- Upload CSV/JSON files
- Apply operations to all colors
- Bulk format conversion
- Visual preview of results
- Download in multiple formats
## Export Formats
Export your colors and palettes in various formats:
### CSS Variables
```css
:root {
--color-primary: #ff0099;
--color-secondary: #00ccff;
--color-accent: #ffcc00;
}
```
### Tailwind Config
```javascript
module.exports = {
theme: {
extend: {
colors: {
primary: '#ff0099',
secondary: '#00ccff',
accent: '#ffcc00',
}
}
}
}
```
### JSON
```json
{
"colors": [
{ "name": "primary", "hex": "#ff0099" },
{ "name": "secondary", "hex": "#00ccff" },
{ "name": "accent", "hex": "#ffcc00" }
]
}
```
### SCSS
```scss
$color-primary: #ff0099;
$color-secondary: #00ccff;
$color-accent: #ffcc00;
```
## Keyboard Shortcuts
| Shortcut | Action |
|----------|--------|
| `Cmd/Ctrl + K` | Open command palette |
| `Cmd/Ctrl + C` | Copy current color (hex) |
| `Cmd/Ctrl + V` | Paste color from clipboard |
| `Cmd/Ctrl + Z` | Undo color change |
| `Cmd/Ctrl + Shift + Z` | Redo color change |
| `Cmd/Ctrl + D` | Toggle dark/light mode |
| `Cmd/Ctrl + /` | Show keyboard shortcuts |
| `Esc` | Close modals/dialogs |
| `Arrow Keys` | Navigate color history |
| `Space` | Toggle color picker |
## API Integration
Pastel UI communicates with the [Pastel API](https://github.com/valknarness/pastel-api) for all color operations. The API client is type-safe and includes automatic retries, caching, and error handling.
### Example API Usage
```typescript
import { pastelAPI } from '@/lib/api/client';
// Get color information
const info = await pastelAPI.getColorInfo(['#ff0099']);
