Color Formats Explained
| Format | Syntax | Example | Use Case |
|---|---|---|---|
| HEX | #RRGGBB | #3b82f6 | CSS, design tools, brand guides |
| RGB | rgb(R, G, B) | rgb(59, 130, 246) | CSS, programmatic color manipulation |
| HSL | hsl(H, S%, L%) | hsl(217, 91%, 60%) | Theming, generating shades, CSS variables |
| Tailwind | color-shade | blue-500 | Tailwind CSS utility classes |
When to Use Each Format
- HEX — the most compact format, universally supported in CSS and design tools. Best for static color values in stylesheets and brand guidelines.
- RGB — ideal when you need to manipulate individual channels programmatically (e.g., adjusting opacity with rgba, blending colors in canvas).
- HSL — the most human-friendly format. Adjust lightness to create shades, saturation for vibrancy, or hue to shift the entire color. Perfect for CSS custom properties and design systems.
- Tailwind— when working with Tailwind CSS, you want the closest utility class. This tool finds the nearest match from Tailwind's default palette by calculating RGB distance.
FAQ
How accurate is the Tailwind match?
The tool compares your color to every shade (50-950) of 11 Tailwind color families using Euclidean distance in RGB space. It finds the perceptually closest color, but note that RGB distance is not perfectly perceptually uniform. For most use cases the match is visually indistinguishable.
Does this tool support alpha/opacity?
Currently, the converter focuses on opaque colors. If you enter an rgba or hsla value, the alpha channel is ignored and the conversion uses the RGB/HSL components only.
What is a CSS variable suggestion?
Modern CSS design systems use HSL-based custom properties so you can adjust lightness or opacity without redefining the color. The tool outputs a ready-to-use CSS variable in the format --color-custom: H S% L%that works with Tailwind's color-opacity utilities.
Is my color data sent anywhere?
No. All conversions run entirely in your browser. No network requests are made. You can verify this in your browser's DevTools Network tab.
Can I paste colors from Figma or design tools?
Yes. Most design tools copy colors as HEX (e.g., #3B82F6) or RGB. Simply paste the value into the input field and the tool will auto-detect the format.