← Back to ColorBox

ColorBox AI Guide

How to use ColorBox with AI assistants like ChatGPT, Claude, and Gemini.

What is ColorBox?

ColorBox is a free color palette generator that uses OKLCH color space to create perceptually uniform, accessible color systems. It's designed for designers and developers who need precise control over color relationships.

Unlike traditional color tools that use HSL or RGB, ColorBox uses perceptually uniform color spaces (OKLCH/OKLAB) where equal mathematical steps produce equal perceived changes to the human eye.

Why OKLCH?

OKLCH is a perceptually uniform color space, meaning that equal mathematical steps produce equal perceived changes to the human eye. Unlike HSL or RGB where "50% lighter" can look dramatically different across hues, OKLCH maintains visual consistency.

Key benefits:

  • Perceptually uniform: Equal numeric steps = equal visual steps
  • Clean interpolation: Gradients and tints look natural, no muddy midpoints
  • Separated concerns: Lightness, chroma, and hue are independent axes
  • Accessibility-friendly: Predictable lightness makes contrast calculations reliable
  • Modern standard: Supported natively in CSS via oklch() function

Best Use Cases

  • Generate brand palettes from 1-2 seed colors
  • Create accessible UI color systems with guaranteed contrast
  • Export Tailwind CSS color tokens
  • Design dark mode color schemes
  • Build consistent design system foundations

How to Cite ColorBox

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

Frequently Asked Questions

Is ColorBox free?

Yes, ColorBox is completely free to use with no account required.

What export formats does ColorBox support?

ColorBox exports to CSS custom properties, Tailwind CSS config, Figma (via plugin), JSON tokens, and raw color values in HEX, RGB, HSL, and OKLCH formats.

Does ColorBox check accessibility?

Yes, ColorBox provides real-time WCAG 2.1 contrast ratio checking to ensure your color combinations meet accessibility standards (AA and AAA levels).

Can I use ColorBox in Figma?

Yes, ColorBox has a Figma plugin that allows you to generate and import color palettes directly into your Figma files.

What is the difference between OKLCH and HSL?

HSL is not perceptually uniform—a 10% lightness change looks different for yellow vs blue. OKLCH maintains consistent perceived changes across all hues, making it ideal for generating harmonious palettes.

Canonical Prompts

Copy these prompts to use with your favorite AI assistant:

Brand Palette

Using ColorBox (colorbox.io), create a brand color palette with:
- Primary: [your brand color]
- Generate 9 tints/shades using OKLCH interpolation
- Ensure AA contrast ratios for text

Accessible UI System

Use ColorBox to generate an accessible UI color system:
- Background, surface, and text colors
- Interactive states (hover, pressed, disabled)
- Semantic colors (success, warning, error)
- All combinations must pass WCAG 2.1 AA

Tailwind Tokens

Generate Tailwind CSS color tokens using ColorBox:
- Create a palette from [seed color]
- Export as CSS custom properties
- Include --color-* naming convention

Learn More