Color Converter
Convert colors between HEX, RGB, RGBA, HSL, and HSLA formats with a live preview swatch. All client-side.
Frequently Asked Questions
1 (or ff in HEX8) is fully opaque; 0 is fully transparent. In rgba() and hsla() it ranges from 0 to 1. In 8-digit HEX (#rrggbbaa) it ranges from 00 to ff.rgb(255, 87, 51) is identical to #FF5733: 255 decimal = FF hex, 87 decimal = 57 hex, 51 decimal = 33 hex. HEX is more compact (6 characters vs many more for RGB) and widely used in CSS and design tools. RGB is more readable for developers doing arithmetic on color values (e.g., darkening by reducing each component). Both are sRGB values — they refer to the same color on screen.red, cornflowerblue, rebeccapurple, and tomato that map to specific RGB values. rebeccapurple (#663399) was added to CSS in honor of Eric Meyer's daughter Rebecca. Named colors are convenient for quick prototyping but not recommended for precise brand colors — always use HEX or HSL values in production CSS. The full list includes both basic colors (red, blue, green) and descriptive names like lavenderblush, papayawhip, and antiquewhite.color(display-p3 r g b). OKLAB is a perceptually uniform color space where equal numeric distances correspond to equal perceived color differences — making it ideal for smooth color interpolation in gradients and palette generation.#RRGGBBAA) extends the standard 6-digit format with a fourth byte for the alpha channel. The last two hex digits control opacity: FF (255) is fully opaque, 80 (128) is 50% transparent, 00 (0) is fully transparent. For example, #FF573380 is the color #FF5733 at 50% opacity. This is equivalent to rgba(255, 87, 51, 0.5). The 4-digit shorthand #RGBA also works (e.g., #F538 expands to #FF553388). All modern browsers support 8-digit HEX.About This Color Converter
This free color converter converts between HEX, RGB, HSL, and HSB/HSV colour formats. Enter a value in any format and all others update instantly, with a live colour preview.
Web colours are expressed in HEX in CSS and HTML, but HSL is often easier to manipulate programmatically since hue, saturation, and lightness map directly to human colour perception. This tool bridges the gap between design tools (which often use HSB) and code (which uses HEX or RGB).
When to use this tool
- Translating design-tool colours to CSS values
- Converting brand colours between different formats
- Generating accessible colour variations by adjusting lightness
- Debugging CSS colour values that look wrong in the browser
Standards & References
How Color Conversion Works
All color formats describe the same color using different mathematical representations. Converting between them uses standard formulas over the same underlying RGB components.
Parse HEX to RGB
A HEX color like #3d85c8 is split into three byte pairs: 3d, 85, c8. Each pair is parsed as hexadecimal (base 16) to give R=61, G=133, B=200 in the 0–255 range.
Compute HSL
R, G, B are normalized to 0–1. The max and min components determine the hue (angle on the color wheel), saturation (intensity), and lightness using the standard Hue-Saturation-Lightness conversion formula.
Format All Outputs
From the same R/G/B/A values, all six formats (HEX, HEX8, RGB, RGBA, HSL, HSLA) are generated simultaneously. The alpha slider adjusts only the A channel, regenerating all outputs in real time.
Common Use Cases
Design-to-Code Translation
Design tools (Figma, Sketch, Adobe XD) often output colors in HEX or RGB. Convert them to the format your CSS framework or design token system uses — HEX for conciseness, HSL for palette variations.
Dark Mode Theme Tokens
HSL is ideal for dark mode. Keep the hue constant, increase lightness for light mode, decrease it for dark mode. This tool converts a base color to HSL so you can derive the full tone scale without manual math.
Accessibility Contrast Checking
WCAG contrast ratio calculations require the relative luminance of a color, which is computed from the linear RGB values. Convert your brand color to RGB here as the first step in a contrast analysis.
CSS Variables & Custom Properties
Modern CSS design systems define colors as custom properties. Convert a single brand hex code into all formats and paste the correct one into your :root {} — whether the project uses HEX, rgb(), or hsl().
Transparent Color Overlays
Use the alpha slider to find the right rgba() or hsla() value for semi-transparent backgrounds, modal overlays, and hover states. Preview the transparency in the live swatch above.
Cross-Tool Color Migration
When migrating a design system between tools, colors may be stored in different formats. Convert each color to a canonical format (e.g., hsl()) and update the design tokens consistently across the entire system.
Related Developer Tools
Related Articles
View all articles
Color Blindness and Design: Why Redundant Signals Matter More Than "Colorblind-Safe" Palettes Alone
Roughly 1 in 12 men have some form of red-green color vision deficiency — meaning "red means error, green means success" relies on a color distinction that's specifically the hardest for the most common type of color blindness. Here's how different CVD types affect color perception differently, why redundant non-color signals (icons, labels, patterns) are the core fix, and how CVD simulation reveals confusable color pairs during design review.
Design Tokens, CSS Variables, and Dark Mode: How to Build a Colour System That Scales
Design tokens are a three-tier hierarchy: primitive colours → semantic meanings → component-specific use. CSS custom properties implement this at runtime, making dark mode a one-place change. Here's the full token model, how Tailwind's colour system works, and why OKLCH is replacing HSL for design systems.
Colour Contrast and Accessibility: WCAG Ratios, Common Failures, and Accessible Design Systems
WCAG contrast requirements are now enforceable law in the EU and UK. Here's how contrast ratios are calculated from RGB values, which common colour combinations fail (including Bootstrap blue), and how to build accessible colour systems from the start.
Colour Converter — Hex, RGB, HSL & CMYK with Live Preview
Learn how hex, RGB, HSL, and CMYK colour representations relate to each other, when to use each, how HSL enables systematic colour theming, and how to convert any colour with a free colour converter.
Colour Converter — HEX, RGB, HSL, HSV & CMYK Explained
Learn the difference between HEX, RGB, HSL, HSV, and CMYK colour formats, when each is used, and how to convert between them instantly with a free colour converter for web and design work.
