Color Converter HEX ↔ RGB ↔ HSL
Convert colors between HEX, RGB, and HSL formats instantly — with a visual color picker.
Enter a color in HEX, RGB, or HSL format — the converter instantly updates all three formats simultaneously. Use the native color picker on the HEX tab to visually choose a color. Click "Copy" next to any format to copy it to your clipboard. Supports both 3-digit (#ABC) and 6-digit (#AABBCC) HEX codes.
This tool is used by web developers, UI/UX designers, and anyone working with CSS, HTML, Figma, or design systems. Converting between HEX, RGB, and HSL is a daily need when building websites or adjusting brand color palettes. All conversions happen instantly in your browser — no server calls, no data sent.
Frequently Asked Questions
What is a HEX color code?
A HEX color is a 6-digit hexadecimal value (e.g. #1565C0) representing the red, green, and blue components of a color. Each pair of digits ranges from 00 to FF (0–255 in decimal). HEX is the most common color format in CSS, HTML, and design tools like Figma and Adobe XD.
What is the difference between RGB and HSL?
RGB describes a color by its red, green, and blue light components (0–255 each). HSL (Hue, Saturation, Lightness) is more intuitive for designers: hue is the color wheel angle (0–360°), saturation is the intensity (0–100%), and lightness controls brightness (0–100%). HSL is easier to adjust when you want to make a color lighter, darker, or more/less vivid.
How do I convert HEX to RGB?
Split the 6-character HEX into three pairs: first pair = Red, second = Green, third = Blue. Convert each pair from hexadecimal to decimal. For example: #1565C0 → 15=21, 65=101, C0=192 → RGB(21, 101, 192). This converter does it automatically — type in any field and all others update instantly.
Can I use a 3-digit HEX code?
Yes. A 3-digit code like #1AC is shorthand for #11AACC, where each digit is doubled. This converter accepts both 3-digit and 6-digit HEX codes. Note that not all tools support 3-digit HEX in all contexts — if in doubt, use the 6-digit form.
What are HEX colors used for?
HEX colors are used in CSS (color: #1565C0), HTML attributes, SVG, and virtually all design tools (Figma, Adobe XD, Sketch, Photoshop, Canva). HEX is compact and human-readable, making it the default format for web design. RGB is preferred in CSS for RGBA (with alpha/transparency) and in programmatic color manipulation.
How do I find the HEX code of a color in Figma?
In Figma: select the element, open the Fill panel on the right sidebar, click the color swatch — the HEX code is shown and can be copied directly. You can also use the color picker eyedropper to sample any on-screen color. In VS Code: install the "Color Highlight" extension to see color swatches next to HEX/RGB values in your CSS files.
What is RGBA and how does it differ from RGB?
RGBA adds an alpha (opacity) channel to RGB: RGBA(21, 101, 192, 0.8) means the same color at 80% opacity. The alpha value ranges from 0 (fully transparent) to 1 (fully opaque). This converter handles RGB without alpha — for RGBA, simply use the RGB values shown here and add your desired alpha value in CSS: rgba(R, G, B, alpha).
How do I convert HSL to HEX?
HSL to HEX conversion is done mathematically. First convert HSL → RGB using the standard formula (H/60, saturation and lightness calculations), then convert each RGB component to its 2-digit HEX equivalent. This tool handles the full conversion chain automatically — enter an HSL value and the HEX output updates instantly.
What are web-safe colors?
Web-safe colors are a set of 216 colors (6 values per channel: 00, 33, 66, 99, CC, FF) that display consistently across all older monitors and browsers. Modern displays can render over 16 million colors, making the web-safe palette largely obsolete. You can use any HEX/RGB/HSL value in modern web design without restriction.
How are colors defined in CSS?
CSS supports multiple color formats: HEX (#1565C0), RGB (rgb(21, 101, 192)), RGBA (rgba(21, 101, 192, 0.8)), HSL (hsl(213, 80%, 42%)), HSLA (with alpha), named colors (blue, red, etc.), and the newer oklch() and color() functions. HEX and RGB are most widely supported. HSL is preferred when you need to programmatically adjust lightness or saturation in CSS custom properties.