Color Converter
Convert colors between HEX, RGB, and HSL formats instantly.
About the Color Converter
This color converter handles HEX (3, 6, and 8-digit), RGB / RGBA, and HSL / HSLA in both directions. HSL is included up front because it's the format most modern design systems (Tailwind, shadcn/ui, Radix) use for theme variables — you can shift hue, saturation, and lightness independently to derive a full palette from a single base color. Each value is copy-ready so you can paste straight into a CSS custom property or design token file.
Common use cases
- Convert a brand HEX to HSL for shadcn/ui CSS variables
- Derive hover and active states by shifting lightness
- Build a dark-mode variant by swapping the L channel
- Generate semi-transparent overlays with RGBA / HSLA
- Match a color across Figma, Tailwind, and CSS
Why client-side?
Every byte you paste, type, or upload here is processed entirely inside your browser. Nothing is sent to a server, logged, or stored. That means it's safe to use this tool on production secrets, customer data, internal logs, and any input you would not paste into a hosted SaaS formatter.
Related tools
- Color Palette Generator Generate harmonious color palettes from a base color. Create complementary, analogous, and triadic color schemes.
- Gradient Generator Create CSS linear and radial gradients visually. Pick colors, adjust angles, and copy the CSS code.
- CSS Unit Converter Convert between px, rem, em, vh, and vw CSS units. Essential tool for responsive web design.
- Box Shadow Generator Create CSS box-shadow values with a live visual preview. Adjust offset, blur, spread, and color.
Frequently Asked Questions
- How do I convert HEX to RGB?
- Enter your HEX color code (e.g., #FF5733) in the input field, and the tool instantly shows the equivalent RGB and HSL values.
- What color formats are supported?
- This tool supports HEX, RGB, and HSL color formats with instant conversion between all three.
- Can I use this for CSS color values?
- Yes. All output formats are ready to copy and paste directly into your CSS, Sass, or any design tool.
- Why use HSL for CSS variables?
- HSL is ideal for CSS custom properties and dynamic theming because you can adjust lightness and saturation independently, making it easier to create consistent color palettes and dark mode themes.