Every color tool you need. Free.
20+ utilities for developers and designers. AI-powered. No signup required. Built by people who actually ship.
Why ColorDev?
A single place for the boring and the interesting parts of working with color in code.
Free, with no signup
Every tool runs straight in your browser. No account, no paywall, no email required. Bookmark and go.
Built on open standards
WCAG 2.2 contrast math, OKLCH and sRGB color spaces, Tailwind CSS config, design tokens — the same specs your codebase already uses.
AI where it helps
Generate full color systems, extract palettes from images, or fix accessibility issues — powered by Gemini 2.5 Flash. Everything else stays deterministic.
Privacy by default
Color math happens locally. Only AI tools send data to our API, and we don't store prompts or generated palettes.
20+ tools for developers and designers
Click any tool to get started. No account required.
Contrast Checker
Check WCAG AA and AAA contrast ratios instantly.
Color Converter
Convert HEX, RGB, HSL, OKLCH, HSV, and CMYK in real time.
Advanced Color Picker
Full-featured color picker with HSV canvas and live formats.
Tints & Shades Generator
Generate a full tint and shade scale from any color, Tailwind style.
CSS Gradient Generator
Build linear, radial, and conic gradients with live CSS.
Palette Generator
Build a cohesive palette from a base color using harmonies and tonal variations.
Color Harmony Explorer
Explore complementary, analogous, triadic, and other harmonies.
Image Color Extractor
Extract the dominant color palette from any image.
Color Mixer
Mix two or more colors with weighted ratios in real time.
Color Blindness Simulator
Preview your palette for protanopia, deuteranopia, tritanopia.
Accessible Palette Fixer
Paste a palette and get an auto-fixed version that meets WCAG contrast requirements.
Tailwind Config Generator
Convert your palette to a Tailwind CSS config in one click.
CSS Variables Generator
Turn your palette into CSS custom properties with one click.
Figma Tokens Export
Export your palette as Tokens Studio JSON for Figma.
SCSS Variables Generator
Generate SCSS variables and maps from your palette.
Color System Generator
AI-powered: describe your product, get a complete design system.
Context-Aware Palette
AI-powered: generate a semantic palette from a product description.
Intelligent Color Naming
AI-powered: get semantic names for your colors in any convention.
Palette Reviewer
AI-powered: get an expert diagnosis and improvement plan for your palette.
Dark Mode Generator
AI-powered: turn your light palette into a balanced dark-mode counterpart.
Frequently asked questions
+Do I need to sign up?
No. Every tool works without an account. Sign-in is only required for the AI tools when you use our managed key, and even then it's one-click via GitHub or email.
+Are the tools really free?
Yes. Deterministic tools (contrast, converters, palette generation, exports) are free forever. AI tools are free with a generous daily limit; heavy users can plug in their own Gemini API key.
+Do the tools work offline?
The non-AI tools are client-only once the page loads, so they keep working offline. AI-powered tools need a network connection to reach the Gemini API.
+Is my data private?
Deterministic tools never leave your browser. For AI tools, we forward your prompt to Google Gemini and return the response — we don't persist prompts, uploaded images, or generated palettes.
+Which browsers are supported?
Any evergreen browser: Chrome, Edge, Firefox, Safari, Opera, Arc. The eyedropper uses the EyeDropper API, which requires Chromium-based browsers — other browsers still get the native color picker.
+Can I export to Tailwind / CSS variables / design tokens?
Yes. Every palette tool ships with export panels for Tailwind config, CSS custom properties, SCSS variables, JSON design tokens, and Figma-ready swatches.