Color Converter
Convert HEX, RGB, HSL and generate harmonious color palettes.
Quick Palette
Tints & Shades
Color Harmonies
Complementary
Analogous
Triadic
Split-Complementary
blue-500
Color Harmony Theory
Generate harmonious color combinations based on color wheel theory. Complementary colors are 180° opposite, analogous colors are 30° apart, and triadic colors are 120° apart. Tints & Shades show lighter and darker variations of your selected color.
Practical Example
Convert a HEX color from a design mockup into RGB or HSL for CSS, or find the closest Tailwind-style value. HSL output is useful when you need consistent hover, border, or dark-mode variants.
Practical Use Cases
- Design handoff: convert palette values from design tools into implementation-ready formats.
- Theme generation: derive tints/shades and harmony sets from a single brand color.
- Utility CSS mapping: find the closest Tailwind token for rapid prototyping.
Common Mistakes
- Mixing 3-digit and 6-digit HEX forms without normalization.
- Treating HSL lightness and HSV value as the same parameter.
- Ignoring color-space differences between design exports and web rendering.
How to Interpret Output
- Quick Palette: fast anchor colors for manual selection.
- Tints & Shades: brightness variants useful for hover/disabled/state design.
- Color Harmonies: complementary/analogous/triadic groups for UI accent expansion.
Choosing Text Colors — WCAG Contrast Thresholds
Picking a gray "by eye" routinely produces text that fails for low-vision users and outdoor screens. WCAG defines numeric contrast ratios; compare this tool's output against these thresholds.
| Use | AA (minimum) | AAA (enhanced) |
|---|---|---|
| Body text (up to 18px) | 4.5 : 1 | 7 : 1 |
| Large text (24px+, or 19px bold) | 3 : 1 | 4.5 : 1 |
| UI component borders & icons | 3 : 1 | — |
On a white background, #999999 measures 2.85:1 and fails AA; #767676 is the first common gray that passes at 4.54:1. Light-gray helper text is the single most frequent accessibility audit failure.
Why Dark Mode Isn't Just Inversion
Carrying saturated light-theme colors onto a dark background makes them visually vibrate. The working practice is to adjust HSL by raising lightness while lowering saturation: a light-mode button of hsl(217, 91%, 60%) translates to roughly hsl(217, 70%, 65%) in dark mode. Use this tool's HSL output as the starting point and tune S and L. The math relating HEX, RGB and HSL is covered in the color systems guide.
FAQ
Which format should I keep as source of truth?
Most teams store final tokens as HEX, then generate RGB/HSL when needed for runtime logic or docs.
How accurate is Tailwind closest-color matching?
It is distance-based approximation across Tailwind palettes. Always visually confirm for brand-critical colors.
Is color data sent to a server?
No. Conversion and palette generation are executed locally in your browser.