Convert colors between HEX, RGB, and HSL formats online. Enter any color value and instantly get the equivalent in all three formats with a live color preview.
Color Picker
Pick a color to convert
Color Converter is a free online tool that converts colors between HEX, RGB, and HSL formats instantly. Enter a color in any supported format — such as #FF5733, rgb(255, 87, 51), or hsl(11, 100%, 60%) — and the tool displays the equivalent values in all three formats along with a live color preview. It also includes a built-in color picker so you can visually select any color and get its code representations immediately. All conversions happen client-side in your browser, ensuring fast performance and complete data privacy.
Use the Color Converter when you're working across design tools and code editors that use different color formats. Designers often provide colors in HEX while CSS-in-JS libraries or animation frameworks may require RGB or HSL values. It's also useful when fine-tuning colors by adjusting HSL values for perceptual changes (like making a color lighter or more saturated) and then grabbing the corresponding HEX code for your stylesheet.
Front-end developers and UI designers commonly use Color Converter to translate HEX color values from design mockups in Figma or Sketch into RGB or HSL for CSS, generate HSL variants of a brand color by adjusting lightness and saturation, convert colors between formats when building design token systems and theme configurations, match colors across different platforms or tools that expect different formats, and quickly preview how a color looks before committing it to a stylesheet. It's also a handy reference when learning about color theory and the relationships between different color models.
Essential terms and definitions related to Color Converter.
A six-digit hexadecimal representation of a color in the format #RRGGBB, where each pair represents the intensity of red, green, and blue channels from 00 (0) to FF (255). Shorthand notation (#RGB) expands each digit (e.g., #F00 becomes #FF0000). HEX is the most common color format in web development and design handoff.
An additive color model where Red, Green, and Blue light are combined in varying intensities (0-255 each) to produce a wide spectrum of colors. RGB is the native color model for digital screens. When all three channels are at maximum (255, 255, 255), the result is white; when all are zero, the result is black.
A cylindrical color model representing colors by Hue (0-360° on the color wheel), Saturation (0-100%, vibrancy), and Lightness (0-100%, brightness). HSL is more intuitive than RGB for human color selection — you can create tints by increasing lightness, shades by decreasing it, and tones by reducing saturation, all without affecting the base hue.
The standard color space for the web, defined by the IEC 61966-2-1 specification. All CSS color values (HEX, RGB, HSL) are assumed to be in sRGB unless specified otherwise. sRGB covers approximately 35% of the visible color spectrum. Wider gamut spaces like Display P3 and Rec. 2020 are supported by modern CSS via the color() function.
This tool focuses on opaque color conversion between HEX, RGB, and HSL. For colors with transparency, you would need to add the alpha channel manually to the output — for example, changing rgb(255, 0, 0) to rgba(255, 0, 0, 0.5).
Currently, the tool accepts HEX, RGB, and HSL input formats. To convert a named CSS color, you can look up its HEX value first (e.g., coral is #FF7F50) and then enter that into the converter.
The tool accepts both 3-digit shorthand (e.g., #F00) and 6-digit full HEX values (e.g., #FF0000). The 3-digit format is automatically expanded to 6 digits for precise conversion.
Common errors developers encounter and how to resolve them.
Gamma Correction difference in HEX to RGB conversion: Colors look different on screen HEX and RGB values are defined in the sRGB color space and stored with gamma correction (γ ≈ 2.2) applied. When mathematically mixing two colors (interpolation), directly averaging RGB values produces perceptually incorrect results — the mix appears darker than expected. For correct color mixing, first convert to linear RGB (remove gamma), perform the operation, then convert back to sRGB. The CSS color-mix() function handles this automatically. Use this tool to verify that your converted values are sRGB-compliant.
HSL Saturation and Lightness values incorrect: Percentage format difference In HSL format, Hue ranges from 0-360 degrees, while Saturation and Lightness range from 0-100%. Some programming libraries expect Saturation and Lightness as a 0-1 decimal range, whereas the CSS hsl() function uses percentage format. Writing hsl(200, 0.8, 0.5) is incorrect — the correct form is hsl(200, 80%, 50%). Use this tool to enter your HEX or RGB value and instantly get the correct HSL percentage values.
Color accessibility: Insufficient WCAG contrast ratio The WCAG 2.1 standard requires a minimum contrast ratio of 4.5:1 (normal text) or 3:1 (large text) between text and background. The contrast ratio is calculated using relative luminance: L = 0.2126R + 0.7152G + 0.0722B (with linear RGB values). Light text on a light background or dark-on-dark combinations cannot pass this threshold. Use this tool to convert your colors, obtain RGB values for luminance calculation, and build an accessible color palette.