Convert colors between HEX, RGB, and HSL formats instantly. Use the color picker or type any format.
Share this tool
Found it useful? Help a fellow developer discover it.
| Format | Syntax | Range | Best for |
|---|---|---|---|
| HEX | #RRGGBB | 00–FF per channel | CSS, design tools, DevTools |
| RGB | rgb(R, G, B) | 0–255 per channel | CSS, canvas, programmatic manipulation |
| HSL | hsl(H, S%, L%) | H: 0–360, S/L: 0–100% | Palette generation, readable theming |
HEX is the most common format in CSS and design tools. It is compact and universally supported. Use it when copying colors from Figma, Sketch, or browser DevTools.
RGB is useful when you need to manipulate individual channels in code. For example, building a gradient, applying opacity via rgba(), or adjusting brightness programmatically.
HSLis the most human-readable format. Hue (0–360) is the "color wheel angle," saturation controls how vivid the color is, and lightness controls brightness. HSL makes it easy to create color palettes by fixing the hue and varying lightness.
rgb(59, 130, 246) or hsl(217, 91%, 60%).Type or paste your hex color value into the input field (with or without the # prefix). The RGB equivalent updates instantly alongside the HSL value. Click Copy next to the RGB row to copy the CSS-ready rgb() syntax directly to your clipboard.
Use HEX for static color values copied from design tools like Figma or Sketch. Use HSL when building a design system because adjusting lightness or saturation creates accessible light and dark variants of the same hue, making it easy to generate full color scales. Use RGB when you need transparency via rgba() or when manipulating individual channels in JavaScript.
Type or paste your RGB values (for example rgb(59, 130, 246)) into the input and the HEX equivalent appears instantly. Alternatively, enter each channel value directly and copy the resulting HEX. Mathematically: each R, G, and B value (0-255) is converted to a two-digit hexadecimal number and concatenated: R=59 → 3B, G=130 → 82, B=246 → F6, giving #3B82F6.
RGB (Red, Green, Blue) describes a color by its light component values, which is how screens physically work. HSL (Hue, Saturation, Lightness) describes color in human terms: the type of color (hue 0-360), how vivid it is (saturation 0-100%), and how bright it is (lightness 0-100%). HSL is more intuitive for creating color palettes.
Yes. Modern CSS supports hsl() and hsla() natively. Example: color: hsl(220, 90%, 56%). CSS Color Level 4 also adds a space-separated form: hsl(220 90% 56% / 0.8). Both work in all modern browsers.
3-digit HEX (#RGB) is shorthand where each digit is doubled: #F0A is the same as #FF00AA. 4-digit HEX (#RGBA) adds an alpha channel. This tool converts the expanded 6-digit form, which is more universally supported across browsers and design tools.
A HEX color is three concatenated hexadecimal byte values representing red, green, and blue channels. A generic hex number is simply any integer expressed in base 16 (digits 0-9 and A-F). The same encoding applies: each byte ranges from 00 (decimal 0) to FF (decimal 255). Use the Base Converter tool if you need to convert arbitrary integers between hex and other bases.
HSL and HSV (also called HSB) are different color models. In HSL, saturation 100% with lightness 50% gives a fully vivid color, lightness 0% is always black and lightness 100% is always white. In HSV, value 0% is always black and saturation 0% is always a neutral grey or white depending on value. Figma and Photoshop use HSB/HSV internally.
Number Base Converter
Convert numbers between binary, octal, decimal, and hexadecimal.
CSS Formatter
Format, beautify, and minify CSS code online. Shows byte reduction percentage on minify.
WCAG Color Contrast Checker
Check WCAG 2.1 contrast ratios for AA and AAA, normal and large text. Live preview plus accessible color suggestions.
CSS Gradient & Box-Shadow Generator
Generate linear, radial, and conic CSS gradients and layered box-shadows with a live preview. Copy ready-to-use CSS.