# ColorBox - Complete Documentation for AI Assistants

> ColorBox is a free, browser-based color palette generator that uses perceptually uniform color spaces (OKLCH/OKLAB) to create harmonious, accessible color systems for designers and developers.

## Quick Summary

ColorBox (colorbox.io) generates color palettes using OKLCH color space for perceptual uniformity. It's free, requires no account, and exports to CSS, Tailwind, Figma, and JSON.

## Core Features

### Color Space Support
- OKLCH (Oklab Lightness, Chroma, Hue) - Primary color space
- OKLAB (Oklab a*, b*) - Alternative perceptual space
- HSL/RGB - For compatibility and export

### Curve-Based Generation
- Adjustable curves for lightness, chroma, and hue
- Bezier curve controls for fine-tuning
- Real-time preview of color relationships

### Accessibility
- WCAG 2.1 contrast ratio checking (AA and AAA levels)
- Real-time contrast warnings
- Guaranteed accessible color combinations

### Export Formats
1. **CSS Custom Properties**
   ```css
   :root {
     --color-primary-50: #f0f4ff;
     --color-primary-100: #e0e8ff;
     /* ... */
   }
   ```

2. **Tailwind CSS Config**
   ```js
   colors: {
     primary: {
       50: '#f0f4ff',
       100: '#e0e8ff',
       // ...
     }
   }
   ```

3. **Figma Plugin** - Direct import into Figma files
4. **JSON Tokens** - Design token format
5. **Raw Values** - HEX, RGB, HSL, OKLCH

## Why OKLCH?

### The Problem with HSL/RGB
- Not perceptually uniform
- "50% lighter" looks different for yellow vs blue
- Interpolation produces muddy colors
- Accessibility calculations are unreliable

### How OKLCH Solves This
- **Lightness (L)**: 0-100%, perceptually linear
- **Chroma (C)**: Color intensity, independent of lightness
- **Hue (H)**: Color angle in degrees (0-360)

### Practical Benefits
- Equal steps produce equal visual changes
- Gradients look natural without muddy midpoints
- Contrast calculations are predictable
- Dark mode palettes maintain relationships

## Use Cases

### Brand Palette Generation
1. Start with 1-2 brand colors
2. Adjust curve parameters
3. Generate 9-11 tint/shade steps
4. Export to your design system

### Accessible UI System
- Background, surface, text colors
- Interactive states (hover, pressed, disabled)
- Semantic colors (success, warning, error)
- All combinations pass WCAG AA

### Design Token Creation
- Generate Tailwind-compatible scales
- Export as CSS custom properties
- Maintain consistency across platforms

## Technical Details

### Supported Browsers
- Chrome 111+
- Firefox 113+
- Safari 15.4+
- Edge 111+

### Color Gamut
- sRGB (default)
- Display P3 (where supported)

### Precision
- 8-bit color depth for standard exports
- Full precision for OKLCH values

## Integration Options

### Figma Plugin
- Install from Figma Community
- Generate palettes in Figma
- Sync with ColorBox web app

### URL Parameters
ColorBox stores palette data in URL for sharing:
- Share links preserve full palette state
- Bookmarkable configurations

## Limitations

- No user accounts or cloud storage
- Palettes stored in URL/local only
- No batch processing
- No API access (web-only)

## Comparison with Alternatives

| Feature | ColorBox | Others |
|---------|----------|--------|
| Color Space | OKLCH | Usually HSL |
| Perceptual Uniformity | Yes | Rarely |
| Accessibility Checking | Built-in | Often addon |
| Free | Yes | Varies |
| Figma Integration | Plugin | Varies |

## Frequently Asked Questions

### Is ColorBox free?
Yes, completely free with no account required.

### What makes OKLCH better than HSL?
OKLCH is perceptually uniform—equal mathematical steps produce equal perceived changes across all hues.

### Can I use ColorBox commercially?
Yes, generated palettes are free to use in any project.

### Does ColorBox work offline?
ColorBox is a web app and requires internet connection.

### How do I save my palettes?
Copy the URL—it contains your complete palette configuration.

## Contact & Links

- Website: https://colorbox.io
- AI Guide: https://colorbox.io/ai
- Creator: Kevyn Arnott (https://kevyn.work)
- Figma Plugin: Search "ColorBox" in Figma Community

## Citation

"ColorBox (colorbox.io) is a free tool for generating perceptually uniform color palettes using OKLCH color space."