Color Tools
Hex/RGB/HSL/HSV picker, WCAG contrast checker, harmony palettes, tints & shades, and CSS variable export.
#
{ hexInput = e.target.value.slice(1); fromHex(); }"
class="h-11 w-14 rounded-xl border border-slate-700 bg-slate-800 cursor-pointer p-1" />
{ rgb[ch] = parseInt(e.target.value)||0; fromRgb(); }"
type="number" min="0" max="255"
class="w-full bg-slate-800 border border-slate-700 rounded-lg px-2.5 py-2 font-mono text-sm text-white focus:outline-none focus:ring-2 focus:ring-brand focus:border-transparent transition" />
{ hsl.h = parseInt(e.target.value)||0; fromHsl(); }" type="number" min="0" max="360"
class="w-full bg-slate-800 border border-slate-700 rounded-lg px-2.5 py-2 font-mono text-sm text-white focus:outline-none focus:ring-2 focus:ring-brand focus:border-transparent transition" />
{ hsl.s = parseInt(e.target.value)||0; fromHsl(); }" type="number" min="0" max="100"
class="w-full bg-slate-800 border border-slate-700 rounded-lg px-2.5 py-2 font-mono text-sm text-white focus:outline-none focus:ring-2 focus:ring-brand focus:border-transparent transition" />
{ hsl.l = parseInt(e.target.value)||0; fromHsl(); }" type="number" min="0" max="100"
class="w-full bg-slate-800 border border-slate-700 rounded-lg px-2.5 py-2 font-mono text-sm text-white focus:outline-none focus:ring-2 focus:ring-brand focus:border-transparent transition" />
Color Values
WCAG Contrast Ratio
Sample Text
Tints & Shades
Tints (lighter)
Shades (darker)
Color Harmony Scheme
All Schemes Preview
CSS Variables
Enter a hex color to generate palettes
Copied!