Tints & Shades
HEX to RGB Converter
Free online color converter. Convert colors between HEX, RGB, and HSL with a live color preview swatch and visual picker.
Free
No login
100% browser-based
No data sent to servers
Try these next
What is a HEX to RGB Converter?
CSS and design tools use several color formats interchangeably: HEX (#4f46e5) is common in CSS and design files; RGB (79, 70, 229) is useful when you need to manipulate individual channels; HSL (242°, 75%, 59%) is the most human-intuitive format for adjusting hue, saturation, and lightness. Converting between them by hand requires trigonometry.
This tool converts instantly between HEX, RGB, and HSL. Paste any format and get all three. The color preview updates live so you can verify the result visually before copying.
What is the difference between HEX, RGB, and HSL?
HEX (#4361ee) is compact, widely used in CSS and design tools. RGB (67, 97, 238) separates red/green/blue channels, useful for programmatic manipulation. HSL (231°, 83%, 60%) maps to how humans think about color: hue, saturation, and lightness.
Which color format should I use in CSS?
HEX for static colors. HSL for dynamic theming (easy to create darker/lighter variants by adjusting the L value). RGB/RGBA when you need transparency control.
What is the alpha channel?
Alpha represents opacity, from 0 (fully transparent) to 1 (fully opaque). CSS supports rgba(r, g, b, a) and hsla(h, s%, l%, a). HEX also supports 8-digit hex with alpha, e.g. #4361eecc.
Which color format should I use in CSS?
HEX for static colors in stylesheets. HSL for dynamic theming — easy to create lighter/darker variants by adjusting the L value. RGB/RGBA when you need transparency. CSS custom properties (--color: #4f46e5) for design systems where you need to reuse colors across many elements. Modern CSS also supports oklch() for perceptually uniform color manipulation.
What is the difference between HSL and HSB/HSV?
HSL (Hue, Saturation, Lightness) and HSB/HSV (Hue, Saturation, Brightness/Value) look similar but differ in their third component. In HSL, 50% lightness is a "pure" color, 0% is black, 100% is white. In HSB, 100% brightness with 100% saturation is a pure color, 0% brightness is black. Photoshop uses HSB; CSS uses HSL.
How do I convert a Tailwind color to HEX?
Tailwind CSS uses a fixed color palette. For example, indigo-500 is #6366f1, blue-500 is #3b82f6, green-500 is #22c55e. This tool shows the approximate Tailwind color name for any HEX input. For exact Tailwind values, refer to the official Tailwind CSS color reference at tailwindcss.com/docs/customizing-colors.
What is the alpha channel in colors?
Alpha represents opacity: 0 = fully transparent, 1 = fully opaque. CSS supports rgba(r, g, b, a) and hsla(h, s%, l%, a). HEX supports an optional 8th and 7th digit for alpha (e.g. #4f46e5cc where cc = 80% opacity in hex). Most design tools display alpha as a percentage (0–100%) while CSS uses a decimal (0–1).