Color Converter
Convert between HEX, RGB, HSL and Tailwind CSS color formats. Live preview with sliders and nearest Tailwind palette match.
#B3EBF2, rgb(179,235,242), or hsl(187,72%,83%)What is a Color Converter?
A color converter translates a color value from one format to another — between HEX, RGB, HSL, CSS custom properties, and named palette systems like Tailwind CSS. Modern frontend and design workflows span multiple tools that each have a preferred color format: design tools like Figma export HEX, CSS animations often use HSL for programmatic lightness adjustments, and component libraries like Tailwind CSS use their own named palette. Being able to instantly convert between these formats eliminates copy-paste errors and manual math.
Color format conversions involve real mathematical transformations. Converting from HEX to RGB is straightforward bit manipulation, but converting to HSL requires normalizing the RGB channels and computing the hue angle using conditional logic based on which channel is dominant. This tool performs all these conversions instantly in your browser, with a live preview so you can verify the result visually before copying.
When to Use This Tool
- Design-to-code handoff: Translate HEX colors from Figma or Sketch designs into HSL for use in CSS custom properties or RGB for canvas and WebGL rendering.
- Tailwind CSS integration: Find the nearest Tailwind palette class for any custom color, so you can use utility classes instead of arbitrary values in your markup.
- CSS theming: Convert a brand color to HSL so you can programmatically generate lighter and darker variants for hover states, focus rings, and disabled states.
- Debugging CSS: When a color looks wrong in the browser, convert the computed HEX value to RGB and compare it against the expected design spec to find where the discrepancy crept in.
- Accessibility review: Use HSL lightness values to quickly judge whether foreground and background color pairings have sufficient contrast before running a full WCAG audit.
How It Works
The converter performs all calculations in your browser using standard color space mathematics. HEX to RGB conversion reads the three 2-character hex pairs and converts them to decimal integers (0–255). RGB to HSL normalizes the channel values to 0–1, finds the maximum and minimum, and derives hue, saturation, and lightness using the standard HSL formula. Tailwind matching calculates the Euclidean distance in RGB space between your color and every swatch in the Tailwind palette, returning the nearest match. The RGB sliders allow fine-tuning by directly setting channel values, with all other formats updating in real time.
Frequently Asked Questions
What color formats does this tool support?
The tool converts between HEX (#FF5733), RGB (rgb(255, 87, 51)), HSL (hsl(11, 100%, 60%)), and CSS custom property format (--color: #FF5733). It also finds the nearest Tailwind CSS palette color using Euclidean distance in RGB color space. You can input a color using a hex text field, a native color picker, or the individual R, G, B sliders, and all output formats update simultaneously.
How does the Tailwind color matching work?
The tool compares your selected color against every swatch in the Tailwind CSS v3 palette — covering slate, red, orange, yellow, green, blue, cyan, teal, purple, and pink across all shade steps from 50 to 950. For each swatch it calculates the Euclidean distance in RGB color space: the square root of the sum of squared differences across the R, G, and B channels. The swatch with the smallest distance is returned as the nearest Tailwind match, giving you the corresponding bg-{color}-{shade} and text-{color}-{shade} class names.
What is HSL and when should I use it instead of HEX or RGB?
HSL stands for Hue, Saturation, and Lightness. Hue is the base color as a degree on a color wheel (0 = red, 120 = green, 240 = blue, 360 = red again), saturation controls how vivid or grey the color is (0% = grey, 100% = full color), and lightness controls how dark or light the color appears (0% = black, 50% = true color, 100% = white). HSL is far more intuitive than HEX or RGB when you need to generate color variations programmatically — for example, hsl(220, 80%, 60%) can become a lighter hover state at hsl(220, 80%, 70%) by simply incrementing the lightness, without touching the hue or saturation at all.