ColorUI is 40+ small, fast color tools, an API, plus integrations for Figma, VS Code, CLI, GitHub, Raycast, and MCP - all free, all without sign-up. This page documents every corner of it, with deep links so you can bookmark or share any individual section.
Most workflows take less than a minute. Here is the shape of every one of them.
You can start from a color (Picker), a prompt (Prompt Studio), an image (Extract), or a vibe (Explore). Every tool is one page, no sign-up.
Open the Picker →Tweak values live and copy any output (HEX, RGB, OKLCH, CSS, JSON, PNG) with one click. Locks, undo, and keyboard shortcuts are everywhere they help.
Try the Generator →Export to Tailwind, CSS variables, design tokens or PNG. Or copy the page URL - your colors are encoded in it, so the link is the file.
See export formats →Five common starting points map to specific tools. Skip the homepage hunt - jump straight in.
You already know one color and want to do something with it.
You have a brand color (or an idea) and want a full set of tokens, scales, and assets.
Quick gut-checks against WCAG 2.1 and APCA before you ship.
Pull colors out of a photo, recolor a graphic, or build a duotone effect.
Browse curated palettes, daily picks, trends, and procedural color worlds.
Every tool gets its own anchor below - share /guide#tool-picker, /guide#tool-contrast, etc. to drop teammates straight into a specific how-it-works card.
Create a fresh palette from a prompt, a vibe, a color, or pure chance.
Type any intent ("calm fintech", "summer popsicle", "cyberpunk diner") and get a full palette plus a per-color narrative explaining why each shade is there. Runs locally - no LLM call, no sign-up.
Combines well with Brand Story to draft launch copy in the same vibe.
The classic "smash space until it looks right" generator, with locks, undo, harmony presets, and live exports.
Press ? for the full keyboard shortcuts overlay.
/generateBuild linear, radial, and conic gradients with OKLCH-correct interpolation, easing, and one-click CSS.
/gradientDrag color points onto a canvas to build the buttery, multi-color backgrounds you see on Stripe, Linear, and Vercel.
/mesh-gradientGenerate CSS @keyframes that cycle through any palette - perfect for hero backgrounds and loading states.
/animationPure-CSS dots, stripes, grids, checkers, and more - every pattern is one background-image declaration.
/patternGenerate a deterministic procedural artwork from any palette - seedable, downloadable, perfect for OG images and OS wallpapers.
Turn a palette into a brand narrative - voice, vibe, audience, and example launch copy.
/brand-storyGrab a single color, or pull a full palette out of a photo, screen, URL, or camera.
A precise HSV wheel-and-slider picker that shows every modern format (HEX, RGB, HSL, LCH, OKLCH, LAB, P3) live.
/pickerDrop a photo, click any pixel, and copy the exact HEX. Bonus: see the colors of all neighbors at multiple radii.
/picker/imageLive camera color picker. Point your laptop or phone camera at anything in the real world and grab the color.
/picker/cameraPull a full palette out of any photo using k-means clustering, with mood presets (Bright, Muted, Deep, Dark) to push the result toward a feeling.
Pairs nicely with Visualizer to preview the extracted palette on real UI.
/extractPaste any URL - we render it server-side and pull the brand-true palette out.
/palette-from-urlMove a color between formats, look it up, or check a wide-gamut variant.
Type any color in any format (HEX, RGB, HSL, HWB, LCH, OKLCH, LAB, P3, named) and see every other format simultaneously.
/converterThe full Tailwind palette - every color, every step (50-950) - with HEX, RGB, OKLCH, and class-name copy.
/tailwindVisualise which palette colors fit inside sRGB vs Display P3, and emit progressive-enhancement CSS that lights up wide-gamut screens.
Browse the full named-color universe with codes, shades, related colors, and contrast quick-checks against black and white.
/colorsTurn a single brand color into a full token set, ready to ship to Tailwind, CSS, SCSS, or W3C DTCG.
Generate a 12-step OKLCH scale from any brand color, with semantic aliases and dark-mode mirror baked in.
/css-varsMaterial You-style tonal palettes from a source color - primary, secondary, tertiary, and neutral all in one.
/materialExport any palette to W3C DTCG JSON, Style Dictionary, Tailwind config, SCSS map, or plain CSS variables.
/tokensVisual editor for design tokens - reference layer + semantic layer, with live preview and validation.
/token-studioInverts a light palette to a balanced dark mode - lightness flipped, hue preserved, chroma tuned for dark surfaces.
/dark-modeSee your palette dropped onto a small library of real components (cards, navs, buttons) so you can spot trouble before shipping.
/previewTurn a color (or short text) into a complete favicon set - .ico, .png, Apple touch, and the manifest entries.
/faviconWCAG 2.1, APCA, and color-vision-deficiency tools. Pass before you ship.
Score any text + background pair against WCAG 2.1 (AA / AAA) and APCA. Includes a Matrix view to test every pair in a palette.
/contrast/fix-a11yPreview a palette through deuteranopia, protanopia, tritanopia, and grayscale.
/colorblind/fix-cvdSee the palette on real UI, compare two palettes, or recolor an actual asset.
Drop a palette onto a desktop landing page, a dashboard, and a mobile mock - all at once.
/visualizeCompare two palettes side by side with delta-E numbers and per-role mapping.
/palette-diffRemap any image to a two-color duotone (like the Spotify covers) with adjustable shadow / highlight assignment.
/duotoneDrop any SVG (logo, icon set, illustration), swap fills and strokes safely, and download the result.
/recolor-svgBlend two colors via the OKLCH spectrum at any ratio, with a perceptual gradient between them.
Turn any palette into a procedural living world - a 3D scene whose lighting, sky, and terrain come from your colors.
/spatialBrowse and share procedural color worlds others have generated.
/worldsSpecialty workflows: color theory, type-to-prompt, share artefacts.
Pick a base color and instantly get complementary, analogous, triadic, tetradic, split, square, and monochromatic schemes.
/wheelStack multi-layer box-shadows for buttery elevations - and copy production-ready CSS.
/shadowsTranslate any palette into a written prompt usable in Midjourney, DALL-E, or Stable Diffusion.
/palette-to-promptInspiration, trends, and a small game to train your eye.
Endless feed of curated palettes filtered by mood, dominant color, or temperature.
/exploreTrending colors and palettes right now, with a forward-looking forecast for the season.
/trendsTrain your eye - match the target color as closely as you can. Daily and unlimited modes.
/gameColorUI runs in your editor, your launcher, your CI, your design tool, and your AI assistant. Same engine, native to wherever you work.
Free public API for converting colors, scoring contrast, and generating palettes from a prompt or harmony rule.
Eyedropper + working palette in your browser toolbar. Pick colors from any page, sync them with your ColorUI session, and jump into any tool with the palette intact.
Logged-out / private - no telemetry, no account, palette stays on-device.
/extensionApply ColorUI palettes to your Figma file in one click - generate, extract, and convert without leaving the canvas.
/figmaInline color decorators, palette generation, and contrast checking right inside your editor.
/vscodeConvert, generate, and contrast-check colors from the terminal - perfect for CI / scripts.
Drop ColorUI checks into your CI - block PRs that introduce failing-contrast token pairs.
/actionGenerate palettes, check contrast, and convert colors from the Raycast launcher on macOS.
/raycastModel Context Protocol server so AI assistants (Claude Desktop, Cursor, etc.) can call ColorUI tools as native functions.
Beyond the tools themselves - curated articles, definitions, and step-by-step guides.
/blog/learn/glossaryStep-by-step procedural guides for the most common workflows (extract from image, check WCAG, build a token palette, simulate CVD).
/how-to/extract-colors-from-imagePages that orient you on the project rather than do a job for you.
Search across every tool, blog post, and named color from one box. Hex codes jump straight to the color page.
/search/changelog/statusSource-available libraries, plugins, and integrations - everything we ship that you can fork.
/aboutSubscribe to new blog posts and product releases without an account - works in any feed reader.
/feed.xmlEvery palette can be wrapped into a short, shareable URL with a QR code - no account or save button needed.
The hash is content-addressed - the same palette always produces the same URL.
Machine-readable manifests so search engines, LLMs, and browsers can discover the site automatically.
/llms.txtThe trust pages - what we collect (almost nothing), how the site behaves, and what we commit to for accessibility.
Small details that make the toolkit feel a lot bigger than it is.
Tools like /contrast, /generate, /gradient and /mix encode their state in the URL. Copy the address bar to share an exact configuration with a teammate - no account, no save button.
Open any color page (e.g. /colors/7c5cff) and you will see one-click jumps into the Picker, Contrast Checker, and Wheel pre-filled with that color. The same applies in reverse - sending a palette from the Generator into the Visualizer or Tokens preserves it.
Press ? on any page to bring up the shortcuts overlay. The Generator alone has Space (regenerate), L (lock), and U (undo). The Picker supports arrow keys for fine adjustments.
A service worker caches the shell and tools. You can keep working through a flaky connection, on a plane, or behind a VPN.
The cluster of tiny swatches in the header shows your working palette across every page. Click it to jump back into the Generator with the palette intact. The Undo button reverts the last change site-wide.
The sun/moon button in the header instantly mirrors the entire UI. Theme is preserved across sessions and applies to your palette previews too.
Click the Share button on any palette to get a /p/<hash> URL plus a QR code. The hash is content-addressed - same palette, same link - so it doubles as a permanent reference.
Long-form guides on the theory and craft behind the tools.
No. Every tool works without sign-up. Your palette state lives in the URL and in your browser, so the link itself is your save file.
Yes. Every tool has its own anchor on this page (e.g. /guide#tool-picker, /guide#tool-contrast, /guide#tool-extract). Share those links to send teammates straight to the right how-it-works section.
Generator if you want a palette fast, Picker if you have one color already, Extract if you have an image, Prompt Studio if you have a prompt, or Explore if you want inspiration. The five "lanes" above map every common starting point to the right tool.
Yes - after your first visit, a service worker caches the shell and the most-used tools. You can keep working without an internet connection.
Visit /oss for the public repos and /changelog for what has shipped.
Yes - a Chrome / Edge / Brave extension with an eyedropper, persistent palette, and a side panel. See the Browser Extension card in Integrations & surfaces above.
Yes - subscribe via RSS at /feed.xml or JSON Feed at /feed.json. Both work in any modern feed reader, no email or account required.
Start from a prompt, a color, or an image. Everything is free, instant, and yours to keep.