Color Converter

Color representation in web and digital design relies on several competing formats, each with different strengths. Hex codes (like `#3B82F6`) are compact, copy-paste friendly, and universally understood by browsers and design tools, but they're opaque to human interpretation. RGB values (`rgb(59, 130, 246)`) are more readable and align with how screens actually produce color (mixing red, green, and blue light at varying intensities), but are still hard to reason about intuitively. HSL (`hsl(217, 91%, 60%)`) is the most human-friendly format: Hue (0–360° on the colour wheel), Saturation (0–100%), and Lightness (0–100%). HSL makes it trivial to create consistent colour palettes: just vary the lightness for tints and shades, or shift the hue for analogous colours.

CSS supports all of these formats, and choosing the right one for the job makes your code more maintainable. Use hex for fixed brand colours referenced in CSS variables. Use HSL in CSS when building dynamic themes where you want to algorithmically darken or lighten a colour. Use RGBA (`rgba(59, 130, 246, 0.5)`) or `hsl()` with an alpha channel when you need transparency.

In design tools like Figma and Sketch, colours are typically stored as RGB/HSL but exported as hex. When handing off designs to developers, hex is the most portable format. When working in Tailwind CSS, colours map to config values, so knowing the HSL or hex equivalent helps you find the closest Tailwind colour or define a custom one.

This converter handles all four formats with a live swatch preview, alpha transparency, and a recent colour history so you can switch between colours without re-entering them.