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.
| Format | Syntax | Best for | Alpha |
|---|---|---|---|
| HEX | #3b82f6 | Design specs, compact notation | #3b82f680 |
| RGB | rgb(59, 130, 246) | Programmatic manipulation | rgba(59, 130, 246, 0.5) |
| HSL | hsl(217, 91%, 60%) | Theme generation, readable palettes | hsla(217, 91%, 60%, 0.5) |
| OKLCH | oklch(0.63 0.21 255) | Perceptual uniformity, wide gamut | oklch(0.63 0.21 255 / 0.5) |
HSL is ideal for generating consistent design palettes because adjusting lightness and saturation is intuitive. OKLCH is the modern alternative that ensures equal perceived brightness across different hues — a 50% lightness blue and 50% lightness yellow actually look equally bright, unlike HSL.
Modern CSS supports color functions beyond the traditional rgb() and hsl() notations. The color() function allows Display P3 and other wide-gamut color spaces. The color-mix() function blends two colors in any color space. The oklch() function provides perceptually uniform color manipulation. All major browsers support these functions as of 2024. When building design systems, define your base colors in OKLCH for consistent lightness scales, then use this converter to generate fallback HEX values for older tooling.
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.
In-depth articles covering the concepts behind Color Converter.
CSS Color Systems: A Complete Guide for Developers
Master CSS color formats — HEX, RGB, HSL, and modern CSS Color Level 4. Learn when to use each format and how to build consistent color palettes.
CSS Grid vs Flexbox: Why Your Layout Keeps Breaking
A hands-on comparison of CSS Grid and Flexbox with common layout bugs developers encounter and how to fix them.
Web Accessibility Checklist: A Practical Guide for Developers
A no-nonsense web accessibility checklist for developers. Covers WCAG 2.1 essentials, semantic HTML, keyboard navigation, color contrast, screen readers, ARIA, and automated testing tools.
CSS Container Queries: The Complete Practical Guide
Learn CSS container queries with real-world examples. Covers @container syntax, container types, naming, fallbacks, and how they differ from media queries for responsive component design.