# ColorUI

> Fastest free color palette generator for designers. Explore millions of color schemes, pick colors, check WCAG contrast, and extract palettes from images in seconds.

ColorUI ships one engine behind nine surfaces: a Web app, a public API, a Chrome extension, a Figma plugin, a VSCode extension, a CLI, a GitHub Action, an MCP server, and a Raycast extension. Every surface is open source (MIT), ships with no telemetry, and consumes the same Edge API.

## Public API (machine-readable)

The public API is the canonical machine interface. Use it for any programmatic work; do not scrape the HTML pages.

- Discovery: [https://colorui.io/api/v1](https://colorui.io/api/v1)
- OpenAPI 3.1 spec: [https://colorui.io/api/v1/openapi.json](https://colorui.io/api/v1/openapi.json)
- Postman collection: [https://colorui.io/api/v1/postman.json](https://colorui.io/api/v1/postman.json)
- Live status: [https://colorui.io/api/v1/status](https://colorui.io/api/v1/status)
- Endpoints: `/api/v1/convert`, `/api/v1/contrast`, `/api/v1/palette`, `/api/v1/status`
- Auth: none; CORS open; rate limit 60 req/min/IP; `X-RateLimit-*` headers on every response.

## MCP server (for AI agents)

If you are an AI agent (Claude, Cursor, Zed, Windsurf, Continue), prefer the MCP server over scraping. It exposes ColorUI as native tools over MCP 2024-11-05.

- Landing: [https://colorui.io/mcp](https://colorui.io/mcp)
- Install: `npx -y @colorui/mcp`
- Tools: `generate_palette`, `harmony_palette`, `check_contrast`, `convert_color`

## Distribution surfaces

- [Web app](https://colorui.io/)
- [Public API](https://colorui.io/api)
- [Chrome ext](https://colorui.io/extension)
- [Figma plugin](https://colorui.io/figma)
- [VSCode ext](https://colorui.io/vscode)
- [CLI](https://colorui.io/cli)
- [GitHub Action](https://colorui.io/action)
- [MCP server](https://colorui.io/mcp)
- [Raycast ext](https://colorui.io/raycast)

## Tools

- [AI palette](https://colorui.io/ai): Generate a 5-color OKLCH palette from a prompt. Deterministic per (prompt, variant).
- [Generate palettes](https://colorui.io/generate): Random + harmony palettes (complementary, analogous, triadic, tetradic, split, square, monochromatic).
- [Color picker](https://colorui.io/picker): HSV / OKLCH ring picker, six-format readout, named color search.
- [WCAG contrast](https://colorui.io/contrast): WCAG 2.1 ratio + grade + APCA Lc, plus a full text/surface contrast matrix.
- [Color converter](https://colorui.io/converter): Any CSS color to HEX / RGB / HSL / OKLCH / LAB / LCH / CMYK in one screen.
- [Extract from image](https://colorui.io/extract): k-means palette extraction with mood presets (colorful / bright / muted / deep / dark).
- [Color wheel](https://colorui.io/wheel): Pick a base, view every harmony rule, copy the palette.
- [Gradient maker](https://colorui.io/gradient): Linear, radial, conic gradients with OKLCH interpolation and easing presets.
- [Colorblind simulator](https://colorui.io/colorblind): Deuteranopia, protanopia, tritanopia simulation for any palette.
- [Palette visualizer](https://colorui.io/visualize): Apply a palette to fake landing page / dashboard / mobile mock to sanity-check.
- [Tailwind colors](https://colorui.io/tailwind): Full Tailwind palette in HEX / RGB / OKLCH with class names.
- [Recolor SVG](https://colorui.io/recolor-svg): Swap palette colors in any uploaded SVG; sanitised before download.
- [Color mixer](https://colorui.io/mix): CSS color-mix() preview in OKLCH / sRGB / LAB / HSL.
- [Box shadows](https://colorui.io/shadows): Layered, perceptually tuned drop shadows; copy CSS.
- [Mesh gradient](https://colorui.io/mesh-gradient): Place radial layers anywhere; copy a stack of CSS gradients.
- [CSS design system](https://colorui.io/css-vars): One brand color -> 12-step OKLCH ramp + light/dark token sets.
- [Material You](https://colorui.io/material): Generate Android-12-style key/secondary/tertiary tonal palettes.
- [Design tokens](https://colorui.io/tokens): Export palette as W3C DTCG / Style Dictionary / Tailwind / SCSS / CSS.
- [Token Studio (3-tier)](https://colorui.io/token-studio): Author primitive / semantic / component tokens; export DTCG, Style Dictionary, Tailwind v4, shadcn, SCSS, CSS, Swift, Kotlin.
- [Dark mode generator](https://colorui.io/dark-mode): OKLCH luminance inversion + 4-step tonal elevation. Generates a dark companion for any palette.
- [Fix color-blindness](https://colorui.io/fix-cvd): Auto-shift palette colors away from protan / deutan / tritan / achromat confusion lines while preserving brand intent.
- [Palette to image prompt](https://colorui.io/palette-to-prompt): Deterministic NLG: turns a palette into a Midjourney / DALL-E / Sora prompt with harmony + temperature analysis.
- [Live palette preview](https://colorui.io/preview): Apply any palette to Landing / Dashboard / Mobile / Email / Pricing / Auth templates; sub-150ms re-render.
- [Camera color picker](https://colorui.io/picker/camera): Sample colors from device camera or pick anywhere on screen via the EyeDropper API.

## Documentation

- [Public API documentation](https://colorui.io/api)
- [All open-source surfaces](https://colorui.io/oss)
- [Release notes](https://colorui.io/changelog)
- [Live API status](https://colorui.io/status)
- [Long-form articles](https://colorui.io/blog)
- [Color & design glossary](https://colorui.io/learn/glossary)
- [About ColorUI](https://colorui.io/about)
- [Privacy policy](https://colorui.io/privacy)
- [Terms of service](https://colorui.io/terms)

## How-to guides

- [How to Extract a Color Palette From an Image](https://colorui.io/how-to/extract-colors-from-image): Pull a usable, accessible color palette from any photo in under a minute. K-means clustering in OKLCH, mood presets, and a contrast sanity check.
- [How to Check WCAG Contrast on a Color Palette](https://colorui.io/how-to/check-wcag-contrast): Verify every text-on-surface pair against WCAG 2.1 AA / AAA in two minutes. Includes APCA Lc as a forward-compatible second opinion.
- [How to Build a Design Token Palette From One Brand Color](https://colorui.io/how-to/build-a-design-token-palette): Turn a single HEX into a 12-step OKLCH ramp, semantic tokens, dark-mode mirror, and W3C DTCG export - in under ten minutes, free.
- [How to Simulate Color Blindness on a Design](https://colorui.io/how-to/simulate-color-blindness): Run any palette or screenshot through deuteranopia, protanopia, and tritanopia simulations to catch CVD-unsafe color choices before users do.

## Recent releases

- 2026-04-01 - **Raycast ext 0.1.0**: Raycast extension: four commands in your macOS launcher
- 2026-04-01 - **MCP server 0.1.0**: MCP server: ColorUI as a native tool for Claude, Cursor, Zed, Windsurf, Continue
- 2026-04-01 - **Public API 1.0.0**: OpenAPI 3.1 spec at /api/v1/openapi.json
- 2026-04-01 - **GitHub Action 1.0.0**: GitHub Action: block PRs that miss WCAG contrast
- 2026-04-01 - **CLI 0.1.0**: CLI: `npx colorui palette "fintech dashboard"`
- 2026-04-01 - **VSCode ext 0.1.0**: VSCode extension: inline swatches + hover WCAG contrast
- 2026-04-01 - **Figma plugin 1.0.0**: Figma plugin: prompt-to-palette inside Figma + FigJam
- 2026-04-01 - **Web app 2026.04**: Shareable palette URLs at /p/<hash>

## Recent articles

- [OKLCH Gamut Math, Visually: Why Some Colors "Do Not Exist"](https://colorui.io/blog/oklch-gamut-math-visually): OKLCH lets you describe colors that no screen can show. Understanding why - and how browsers map them back into reality - turns gradients and tokens from guesswork into intent.
- [How to Pick Accessible Colors: A Step-by-Step Workflow](https://colorui.io/blog/how-to-pick-accessible-colors): Picking colors that look great and pass accessibility standards doesn’t have to be a chore. Here is the exact workflow we use to build inclusive design systems.
- [The Psychology of Color Harmonies: Why Some Palettes Just Feel Right](https://colorui.io/blog/the-psychology-of-color-harmonies): Ever wondered why a sunset palette feels calming while a neon cyberpunk theme feels electric? It’s not just taste—it’s math and psychology.
- [W3C Design Tokens (DTCG) Format: A Deep Dive for Color](https://colorui.io/blog/design-tokens-w3c-dtcg-deep-dive): The W3C Design Tokens Community Group format is becoming the lingua franca for token interchange. A practical look at how to author, reference, and theme color tokens in DTCG.
- [color-mix() Replaces SCSS lighten() and darken(): A Migration](https://colorui.io/blog/color-mix-replaces-scss-lighten): SCSS lighten()/darken() shipped in 2007 and have been quietly wrong since 2014. CSS color-mix() does the same job better, at runtime, with theme awareness. Here is how to migrate.
- [Container Queries Meet Color Tokens: Components That Theme Themselves](https://colorui.io/blog/container-queries-color-tokens): Container queries unlock context-aware components. Combined with color-mix() and CSS custom properties, every card can pick its own legible theme based on the surface it lands on.
- [View Transitions for Color UIs: Instant Theme Swaps Without Flicker](https://colorui.io/blog/view-transitions-for-color-uis): The View Transitions API ships native cross-fade and morph animations for any DOM change - including theme swaps. Here is how to wire it up for color tooling.
- [CMYK vs RGB: When Print Reality Bites Back](https://colorui.io/blog/cmyk-vs-rgb-when-it-matters): Your screen is RGB-additive. Your printer is CMYK-subtractive. Here is what survives the trip from screen to paper, and how to stop being surprised.
- [Monitor Calibration for Designers (Without a Spectrophotometer)](https://colorui.io/blog/monitor-calibration-for-designers): A pragmatic guide to making your screen show colors the way real users will see them - using only macOS, Windows, and a free test pattern.
- [currentColor: The Most Useful CSS Color Keyword](https://colorui.io/blog/currentcolor-and-themed-svg): One line of CSS turns icons, borders, focus rings, and SVG strokes into theme-aware components. Why currentColor still beats every alternative in 2026.
- [CSS color-mix() Recipes Every Designer Should Know](https://colorui.io/blog/color-mix-css-recipes): color-mix() lets you blend any two CSS colors at runtime. Six practical patterns: hover states, tints/shades, theming, focus rings, and more.
- [Gamma and Linear Color, Explained for Designers](https://colorui.io/blog/gamma-and-linear-color-explained): Why "50% gray" is not actually halfway between black and white, and why your gradients sometimes look muddy. The shortest possible primer on gamma.

## Optional

- Full content (every blog post body): [https://colorui.io/llms-full.txt](https://colorui.io/llms-full.txt)
- Sitemap: [https://colorui.io/sitemap.xml](https://colorui.io/sitemap.xml)
- RSS (releases): [https://colorui.io/releases.xml](https://colorui.io/releases.xml)
- RSS (blog): [https://colorui.io/feed.xml](https://colorui.io/feed.xml)
- JSON Feed (blog): [https://colorui.io/feed.json](https://colorui.io/feed.json)
- ChatGPT plugin manifest: [https://colorui.io/.well-known/ai-plugin.json](https://colorui.io/.well-known/ai-plugin.json)
- Liveness probe: [https://colorui.io/api/v1/health](https://colorui.io/api/v1/health)
- Security policy: [https://colorui.io/.well-known/security.txt](https://colorui.io/.well-known/security.txt)