Color Converter

HEX is compact and familiar on the web (#ff0000). HSL is useful for programmatic work: changing the hue while keeping saturation and brightness fixed, and creating palettes. RGB is needed for rgba() with transparency and for canvas/WebGL.

In HSL (Hue, Saturation, Lightness), L=50% gives a pure color; a higher value is lighter, and a lower value is darker. In HSV (Value), V=100% is the maximum brightness. HSL is more intuitive for choosing hues and creating palettes, while HSV is closer to the color pickers in graphic editors.

HEX: #rrggbbaa (8 characters) or #rgba (4 characters). RGB: rgba(255,0,0,0.5). HSL: hsla(0,100%,50%,0.5%). The converter supports all variants and converts the alpha channel between formats.

Standard CSS color names (red, dodgerblue, etc.) are recognized by browsers, but not all converters accept them. HEX, RGB, or HSL is more reliable. Enter the color in one of these formats for an accurate conversion.

Tailwind uses HEX in its config. Copy the HEX value from the converter and add it to theme.extend.colors. For custom values, use arbitrary values: bg-[#1a1a2e] or text-[rgb(26,26,46)]. The converter provides all formats for easy use.