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.
What people use it for
- 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
Private by design
Everything you type here is processed inside your browser. Nothing is sent to a server, logged or stored, so it is safe to use with real numbers, drafts and anything you would not paste into a hosted tool.
Try these next
- 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.
Browse every tool or read the creator guides.
Questions people ask
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.