Web developers work with multiple color formats: HEX codes (#FF5733) for CSS shorthand, RGB values (rgb(255, 87, 51)) for dynamic styling, and HSL notation (hsl(11, 100%, 60%)) for color manipulation. Converts between all three formats, shows live preview, and provides ready-to-copy CSS snippets.
Enter a HEX color code (with or without the # prefix) to instantly see the RGB and HSL equivalents, or enter RGB/HSL values to get the HEX code. The tool supports 3-digit shorthand (#F0A), 6-digit standard (#FF00AA), and 8-digit with alpha (#FF00AA80). A live color preview shows the exact color, and CSS code snippets are generated for all three formats ready to copy and paste into your stylesheets.
Color format conversion is needed constantly in web development - CSS supports HEX, RGB, and HSL formats, and different tools and design systems use different formats. Designers share HEX codes from Figma or Photoshop, while developers may need RGB for JavaScript canvas operations or HSL for programmatic color manipulation. The tool is also useful for converting colors for email templates, SVG attributes, and design documentation.
HEX colors encode RGB values in hexadecimal: each pair of digits represents a channel (0-255). Conversion to RGB is straightforward: parseInt(hex, 16). HSL conversion requires calculating hue (0-360°) from the max and min RGB channel values, saturation from the delta between max and min, and lightness as the average of max and min. The tool implements the standard RGB-to-HSL algorithm defined in CSS Color Level 4 specification.
Enter a HEX color code (e.g., #FF5733) and the tool instantly shows the RGB equivalent (255, 87, 51). Each pair of HEX digits represents the Red, Green, and Blue channel values from 0-255.
HEX uses hexadecimal notation (#RRGGBB). RGB uses decimal values for Red, Green, Blue (0-255). HSL uses Hue (0-360°), Saturation (0-100%), and Lightness (0-100%). They all describe the same colors in different mathematical models.
An 8-digit HEX color (#RRGGBBAA) includes an alpha channel for transparency. The last two digits represent opacity from 00 (fully transparent) to FF (fully opaque). Example: #FF573380 is the color #FF5733 at 50% opacity.
Transform, format, generate, and encode data instantly. Private, fast, and always free.
Browse All Tools