# 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)

## Comparisons

If a user asks "what's the best free <competitor> alternative" or "<competitor> vs <other>", these pages have honest, feature-by-feature matrices.

- [ColorUI vs Coolors: Honest 2025 Comparison](https://colorui.io/vs/coolors): ColorUI vs Coolors compared feature-by-feature in 2025: palette generator, OKLCH support, contrast checks, exports, pricing, privacy. Pick the right tool.
- [ColorUI vs Adobe Color: 2025 Comparison](https://colorui.io/vs/adobe-color): ColorUI vs Adobe Color compared in 2025. Color wheel, harmony rules, accessibility, gradients, exports and Creative Cloud lock-in — pick the right tool.
- [ColorUI vs Realtime Colors: 2025 Comparison](https://colorui.io/vs/realtime-colors): Realtime Colors helps you preview palettes live on a dummy site. ColorUI does the same and adds a real generator, accessibility, OKLCH and exports.
- [ColorUI vs Khroma: 2025 AI Color Tool Comparison](https://colorui.io/vs/khroma): Khroma trains an ML model on 50 colors you like, then generates only those. ColorUI offers free AI prompt generation plus accessibility and exports.
- [ColorUI vs Huemint: 2025 Comparison](https://colorui.io/vs/huemint): Huemint generates palettes via a transformer model. ColorUI offers AI generation plus accessibility, modern color science, and a public API.

## Free alternatives to popular paid tools

- [Free Coolors alternative](https://colorui.io/coolors-alternative): A free Coolors alternative without account walls, paid exports, or feature gates.
- [Free Adobe Color alternative](https://colorui.io/adobe-color-alternative): A free Adobe Color alternative — no Creative Cloud account, full WCAG and APCA accessibility, modern OKLCH color spaces.
- [Free Khroma alternative](https://colorui.io/khroma-alternative): A free Khroma alternative — AI-driven palette generation without the 50-color onboarding wall.
- [Free Huemint alternative](https://colorui.io/huemint-alternative): A free Huemint alternative — AI brand palettes plus accessibility, design tokens and a public API.

## Color format converters

Server-rendered conversion reference pages — every direction of the HEX / RGB / HSL / OKLCH / LAB / CMYK graph.

- [HEX to RGB](https://colorui.io/hex-to-rgb)
- [RGB to HEX](https://colorui.io/rgb-to-hex)
- [HEX to HSL](https://colorui.io/hex-to-hsl)
- [RGB to HSL](https://colorui.io/rgb-to-hsl)
- [HSL to HEX](https://colorui.io/hsl-to-hex)
- [HSL to RGB](https://colorui.io/hsl-to-rgb)
- [HEX to OKLCH](https://colorui.io/hex-to-oklch)
- [OKLCH to HEX](https://colorui.io/oklch-to-hex)
- [RGB to OKLCH](https://colorui.io/rgb-to-oklch)
- [HEX to LAB](https://colorui.io/hex-to-lab)
- [CMYK to HEX](https://colorui.io/cmyk-to-hex)

## 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

- [What Colors Go With Beige? 15 Combinations for Modern Design](https://colorui.io/blog/what-colors-go-with-beige): Beige is the most underrated neutral in design. 15 palettes that pair beige with navy, sage, terracotta, black, blush and more - with HEX codes.
- [Earth Tone Color Palette: 20 Natural Combinations With HEX Codes](https://colorui.io/blog/earth-tone-color-palette-guide): Earth-tone color palettes inspired by clay, stone, moss, sand and bark - 20 natural combinations with HEX codes for branding, interiors and web.
- [What Colors Go With Sage Green? 18 Combinations That Actually Work](https://colorui.io/blog/what-colors-go-with-sage-green): Sage green pairs beautifully with cream, terracotta, blush, navy and more. 18 sage-green palettes with HEX codes, contrast notes and where to use each.
- [Pastel Color Palette Guide: 24 Soft Combinations With HEX Codes](https://colorui.io/blog/pastel-color-palette-guide): A complete guide to pastel color palettes - from baby pastels to dusty pastels to neo-pastels - with HEX codes, pairings and accessibility notes.
- [Aesthetic Color Palettes: 30 Curated Combinations for 2026](https://colorui.io/blog/aesthetic-color-palettes-2026): Hand-picked aesthetic color palettes - cottagecore, dark academia, Y2K, sage minimalism, sunset, retro futurism - with HEX codes ready to copy.
- [50 Shades of Blue: Names, HEX Codes, and How to Use Them](https://colorui.io/blog/shades-of-blue-names-hex-codes): Every shade of blue you actually need - navy, sky, cobalt, teal, periwinkle, cerulean and more - with HEX codes, RGB values, and palette pairings.
- [color-mix() in CSS: The Most Underrated Color Tool of 2025](https://colorui.io/blog/color-mix-css-guide): One CSS function replaces half a design-system pipeline. How color-mix() works, where to use it, and the OKLCH trick that keeps blends clean.
- [Building an Accessible Color Palette From Scratch](https://colorui.io/blog/building-an-accessible-color-palette): A field guide to picking 5-12 colors that pass WCAG, work for color-blind users, and still look like a brand - not a compliance report.
- [Linear, Radial, Conic: Picking the Right CSS Gradient](https://colorui.io/blog/gradient-types-linear-radial-conic): Three gradient functions, three personalities. When to use each, how to ease them, and how to interpolate in OKLCH so the middle stays clean.
- [Naming Colors in a Design System: Semantic vs Numeric vs Functional](https://colorui.io/blog/naming-colors-design-systems): brand-500, primary, action-base, accent-strong: the same color, four naming schools, very different futures. A practical guide to picking names that survive a rebrand.
- [The Tailwind Color Palette, Explained](https://colorui.io/blog/tailwind-color-palette-explained): How Tailwind picks its 22 colors, what the 50-950 scale means, and how to extend it with brand colors that play nicely with the defaults.
- [How to Build a Design System From a Single Brand Color](https://colorui.io/blog/building-a-design-system-from-one-color): A repeatable recipe for turning one HEX into a 12-step OKLCH ramp, semantic tokens, dark mode, and dev-ready exports - in under ten minutes.

## 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)