Color Converter

Colors

Paste a color in any format and get all other representations instantly. Includes a visual color picker.

Enter HEX color (click swatch to use picker)

HEX

#7C3AED

RGB

rgb(124, 58, 237)

RGB Values

124, 58, 237

HSL

hsl(262, 83%, 58%)

HSL Values

262° 83% 58%

CSS Variable

--color: #7C3AED;

Tailwind-like

bg-[#7C3AED]

Opacity 50%

#7C3AED80

Works great for

🎨

Matching design specs in CSS

Convert hex color values from design mock-ups directly to the rgb() or hsl() format your CSS or Tailwind config requires. Eliminates manual hex-to-RGB arithmetic and copy-paste errors in stylesheets.

🎛️

Creating CSS custom properties

Get the ready-to-paste CSS variable declaration for any color, including Tailwind arbitrary-value syntax like bg-[#7c3aed]. Define your design token once and propagate it across the entire codebase.

🤝

Figma & Sketch design handoff

Designers export hex values; developers need HSL for dynamic theming or RGB for canvas APIs. This tool bridges the gap instantly during design-to-code handoff, keeping both sides in sync.

♿

Accessibility contrast prep

Convert brand colors to RGB values before running them through WCAG contrast ratio checks. Having accurate color channel values is the first step in building accessible, AA/AAA-compliant UI components.

📋

Converting brand guideline colors

Brand style guides typically specify colors in hex. Convert them to HSL for theme variable systems that support lightness adjustments, or to RGB for use in SVG fill and stroke attributes.

🔄

Cross-app color matching

Different tools speak different color languages. Figma uses HEX, CSS prefers HSL for theming, Three.js needs RGB floats. Convert once here and use the output wherever the project demands.

color converterhex to rgbrgb to hexhex to hslhsl to hexcolor format convertercss colorcolor pickerhsv to rgbrgb to hsl

Frequently asked questions

How do I convert a HEX color code to RGB?

Paste the HEX code into the input field, or pick a color with the visual picker, and the RGB, HSL, and HSV equivalents all update instantly below it so you can copy whichever format your CSS or design tool needs.

What is the difference between HSL and HSV color formats?

Both describe hue, but HSL uses lightness while HSV uses value (brightness) and saturation relative to that value. HSL is common in CSS for lightening or darkening a color, while HSV maps closer to how color pickers in design software work.

Does this color converter work for CSS variables?

Yes, you can paste any valid HEX, RGB, HSL, or HSV value and copy the converted output directly into a CSS custom property or stylesheet, since all four formats are valid CSS color syntax.

Can I pick a color visually instead of typing a code?

Yes, a visual color picker is included alongside the text input, so you can click to choose a color and immediately see its HEX, RGB, HSL, and HSV values without knowing the code in advance.

New