Convert any colour between HEX, RGB, HSL, HSB, and HWB — with live preview, tints, shades, and one-click copy.
Free Color Format Converter | Convert HEX, RGB, HSL & More Instantly
Stop switching between browser tabs and Stack Overflow to convert colour codes. Paste any colour in any format into our free color format converter and get every format — HEX, RGB, HSL, HSB, HWB, and 8-digit HEX — in one place, with a live preview and one-click copy.
What Is Color Format Conversion?
Colour values can be expressed in multiple formats, and different tools, languages, and design systems use different ones. CSS might use HEX or HSL, design tools like Figma often display HSB, Tailwind prefers HEX, and JavaScript colour libraries may require RGB objects. Converting between them manually means doing maths — our color format converter does it instantly.
The six formats this tool supports are:
| Format | Example | Used in |
|---|---|---|
| HEX | #ff6b6b | CSS, HTML, design tools |
| RGB | rgb(255, 107, 107) | CSS, JavaScript, Canvas |
| HSL | hsl(0, 100%, 71%) | CSS, design systems |
| HSB / HSV | hsb(0, 58%, 100%) | Figma, Photoshop, Illustrator |
| HWB | hwb(0 42% 0%) | CSS Color Level 4 |
| HEX 8 | #ff6b6bff | CSS with alpha channel |
How to Use This Color Format Converter
Step 1 — Enter your colour Type or paste any colour value into the input field. The tool accepts HEX (with or without the #), rgb(), rgba(), hsl(), hsla(), hsb(), hsv(), named CSS colours like coral or rebeccapurple, and even shorthand HEX like #f00.
Step 2 — Or use the colour picker Click the colour picker on the right side of the input row to open your browser’s native colour picker. Any colour you select updates all formats in real time.
Step 3 — Copy the format you need Each format card has its own Copy button. Click it to copy that specific format string directly to your clipboard — ready to paste into your CSS, JavaScript, Figma, or any design tool.
Step 4 — Explore tints and shades The tints and shades palette below the format cards shows 9 variations of your colour from darker shades to lighter tints. Click any chip to load it as the active colour — useful for building colour scales and design system palettes.
Step 5 — Use the presets The preset swatches at the bottom give you quick access to common named colours. Click any to load it instantly.
Understanding the Colour Formats
HEX is the most widely used format in web development. It represents each colour channel (red, green, blue) as two hexadecimal digits from 00 to ff. #ff0000 is full red, #000000 is black, #ffffff is white. The 8-digit HEX variant adds two digits for the alpha channel — #ff0000ff is fully opaque red, #ff000080 is 50% transparent red.
RGB (Red, Green, Blue) expresses each channel as a decimal number from 0 to 255. rgb(255, 0, 0) is full red. This format maps directly to how screens physically produce colour — each pixel has red, green, and blue sub-pixels at varying intensities. RGB is the native format of the web canvas API and most JavaScript colour manipulation libraries.
HSL (Hue, Saturation, Lightness) is more intuitive for designers. Hue is expressed as a degree on the colour wheel (0°–360°), saturation as a percentage of colour intensity, and lightness as a percentage from black to white. hsl(120, 100%, 50%) is pure green. HSL makes it easy to create tints (increase lightness), shades (decrease lightness), and tones (decrease saturation) systematically.
HSB / HSV (Hue, Saturation, Brightness/Value) is similar to HSL but measures brightness differently. It is the native format of Adobe Photoshop, Illustrator, and Figma’s colour picker. The same green in HSB is hsb(120, 100%, 100%) — full brightness, full saturation. Understanding the difference between HSL lightness and HSB brightness is important when moving values between CSS and design tools.
HWB (Hue, Whiteness, Blackness) is a newer CSS format from the Color Level 4 specification. It describes colours by how much white or black has been mixed in. hwb(120 0% 0%) is pure green; hwb(120 50% 0%) is a tint of green with 50% white mixed in. For a detailed specification, MDN’s HWB documentation{target=”_blank” rel=”noopener”} covers browser support and syntax.
Colour Format Best Practices for Web and Design
Use HEX for design tokens and static values. HEX is the most compact and universally supported format. It is the safest choice for CSS variables, design token files, and anywhere colour values will be hardcoded.
Use HSL for dynamic colour manipulation. When you need to generate colour variations programmatically — hover states, active states, disabled states — HSL makes it trivial. hsl(${hue}, ${saturation}%, ${lightness}%) lets you adjust a single value to create the exact variation you need. This is how many design systems generate their colour scales.
Use RGB when working with Canvas or WebGL. The browser’s Canvas API and WebGL expect RGB values. ctx.fillStyle = \rgb(${r}, ${g}, ${b})“ is the standard pattern. JavaScript colour libraries like chroma.js{target=”_blank” rel=”noopener”} and tinycolor2{target=”_blank” rel=”noopener”} work natively with RGB arrays.
Use HSB when translating from design tools. Figma, Photoshop, and Illustrator all display colour in HSB. When a designer gives you a colour from one of these tools, it will typically be in HSB format. Use the HSB input in our color format converter to get the equivalent CSS-compatible HEX or HSL instantly.
Match the format to your CSS strategy. If you are using Tailwind CSS, it expects HEX or RGB in its config. If you are using CSS custom properties for a design system, HSL makes dynamic theming much easier. Pick one primary format per project and stay consistent.
Frequently Asked Questions
What is a color format converter? A color format converter is a tool that takes a colour value in one format — such as a HEX code, RGB value, or HSL string — and outputs the equivalent value in every other colour format simultaneously. Our free color format converter supports HEX, RGB, HSL, HSB, HWB, and 8-digit HEX with live preview and one-click copy.
What is the difference between HSL and HSB? Both use the same Hue channel (0°–360° on the colour wheel), but they measure the remaining two channels differently. HSL measures Lightness — a scale where 50% is the pure hue, 0% is black, and 100% is white. HSB measures Brightness (or Value) — a scale where 100% is the full hue and 0% is black. A pure red is hsl(0, 100%, 50%) but hsb(0, 100%, 100%). HSL is used in CSS; HSB is used in most design applications.
Can I paste an RGB value from Figma? Yes. Figma displays RGB values as integers (e.g. R: 255 G: 107 B: 107). Paste it into the input as rgb(255, 107, 107) and the tool will convert it instantly. Figma also has its own HEX display — just copy the HEX value directly from the fill panel and paste it with or without the #.
What is HWB and should I use it? HWB (Hue, Whiteness, Blackness) is a CSS Color Level 4 format with good modern browser support. It is more perceptually intuitive than HSL because whiteness and blackness map more naturally to how humans think about mixing paint. However, it is not yet supported in older browsers and is not accepted by most design tools. Use it if you are working on a modern CSS project and want more intuitive colour descriptions; stick to HEX or HSL for maximum compatibility.
Why does the same colour look different in Figma vs CSS? This is usually a colour profile mismatch. Figma works in the Display P3 colour space, which has a wider gamut than the sRGB colour space that CSS targets by default. A vivid colour in Figma may look slightly less saturated in CSS because sRGB cannot represent all Display P3 colours. This is unrelated to the format itself — it is a colour space issue. Our tool converts between formats within the sRGB colour space.
Does this tool support alpha transparency? The 8-digit HEX format includes an alpha channel — the last two hex digits represent opacity from 00 (transparent) to ff (fully opaque). For full transparency control in CSS, use rgba(r, g, b, a) where a is a decimal from 0 to 1, or hsla(h, s%, l%, a).
More Free Tools from WebsOpener
- 🔗 Multiple URL Opener: Open hundreds of links at once in separate tabs
- 📊 UTM Parameter Builder: Build campaign tracking URLs for Google Analytics
- 🔠 Base64 Encoder Decoder: Encode and decode Base64 strings and files
- 🔤 URL Encoder Decoder: Percent-encode and decode URLs instantly
- ⚙️ Robots.txt Generator: Build and validate your robots.txt file visually
No account required. No data stored or transmitted. All processing happens locally in your browser.