Color Tool
A complete color toolkit, right in your browser. Pick a color with a draggable saturation/hue picker or generate a palette, lock colors you like while regenerating, then explore six color harmonies, Tailwind-style shade scales, tints/tones, a full HEX/RGB/HSL/HSV/CMYK/OKLCH conversion table, a WCAG contrast checker (against white, black, or any custom color), a color blindness simulator, and export any palette as CSS, Tailwind, SCSS, or JSON. Nothing is sent to a server.
Inline visual picker
Pick a color with a draggable saturation/value square and hue slider directly on the page — no native browser popup, fully keyboard-accessible with arrow keys.
Lock colors while regenerating
Generate a palette, lock the swatches you like, and regenerate — locked colors stay put while the rest change.
Harmonies and variations
See complementary, analogous, split-complementary, triadic, tetradic, and square harmonies, plus a Tailwind-style 50–950 scale, shades, tints, and tones — all generated instantly from your chosen color.
Conversion, contrast, and accessibility
Every color shows its HEX, RGB, HSL, HSV, CMYK, and OKLCH values, its WCAG contrast ratio against white, black, or any custom color you pick, with AA/AAA pass indicators, and how it appears under four types of color blindness.
Export your palette
Export a generated palette as CSS variables, a Tailwind config snippet, SCSS, or JSON with one click.
Common Mistakes to Avoid
Confusing tints, shades, and tones
Solution:
Tints add white (lighter), shades add black (darker), and tones add gray (desaturated) — the tool generates all three separately.
Ignoring the contrast checker for text colors
Solution:
A color that looks fine to you may fail WCAG AA contrast requirements — check the contrast section against your actual background color, not just white or black.
Losing a good color while regenerating a palette
Solution:
Use the lock icon on any swatch before hitting Regenerate — locked swatches are kept exactly as-is.
Frequently Asked Questions
It approximates how your color appears to someone with protanopia, deuteranopia, tritanopia, or achromatopsia, so you can check if important colors stay distinguishable.
Yes — the Contrast Checker section includes a custom color comparison in addition to the fixed white and black checks.
Yes — in Generate mode, use the Export button to get the palette as CSS variables, a Tailwind config snippet, SCSS, or JSON.
Inline visual picker
Pick a color with a draggable saturation/value square and hue slider directly on the page — no native browser popup, fully keyboard-accessible with arrow keys.
Lock colors while regenerating
Generate a palette, lock the swatches you like, and regenerate — locked colors stay put while the rest change.
Harmonies and variations
See complementary, analogous, split-complementary, triadic, tetradic, and square harmonies, plus a Tailwind-style 50–950 scale, shades, tints, and tones — all generated instantly from your chosen color.
Conversion, contrast, and accessibility
Every color shows its HEX, RGB, HSL, HSV, CMYK, and OKLCH values, its WCAG contrast ratio against white, black, or any custom color you pick, with AA/AAA pass indicators, and how it appears under four types of color blindness.
Export your palette
Export a generated palette as CSS variables, a Tailwind config snippet, SCSS, or JSON with one click.