HEX ↔ RGB ↔ HSL Converter

Convert colors between HEX, RGB and HSL formats. Live preview, quick presets, copy CSS-ready values. 100% client-side, no uploads.

A color converter translates colors between different format representations used in web design and digital graphics: HEX (#RRGGBB), RGB (0-255, 0-255, 0-255), HSL (hue, saturation, lightness), and HSV (hue, saturation, value). Each format describes the same color differently -- HEX is compact for CSS, HSL is intuitive for creating variations, and RGB maps directly to display hardware. This tool converts instantly as you type, entirely in your browser.

Convert colors instantly without leaving your browser

HEX, RGB, and HSL — all three formats update in real time as you type or pick. Copy CSS-ready values in one click. No uploads, no sign-up, no limits.

Real-time conversion

CSS-ready output

Free unlimited

How to use

1
Pick a Color
Type a HEX value, adjust RGB/HSL number inputs, or click a quick preset.
2
See Live Preview
The swatch at the top updates instantly to show the current color.
3
Copy Any Format
Use the Copy button next to HEX, RGB or HSL to copy a CSS-ready value.

Why Use This Color Converter?

Three Formats, One View

HEX, RGB and HSL are all visible and editable at the same time — change one and the others update instantly.

CSS-Ready Output

Copy buttons give you `#RRGGBB`, `rgb(r, g, b)` or `hsl(h, s%, l%)` strings that paste straight into CSS.

Quick Presets

Start from the Tailwind CSS default palette or pure black/white, then fine-tune with the sliders.

Real-Time Validation

Invalid inputs are handled gracefully — your previous color is preserved until you type a valid replacement.

Understanding Color Formats

HEX, RGB, HSL, and HSV explained

HEX (#RRGGBB) is the most compact color format for web design. Each pair of hexadecimal digits (00-FF) represents the intensity of red, green, and blue, respectively. The value 00 means the channel is off (black), and FF means it's at full intensity. For example, #FF0000 is pure red, #00FF00 is pure green, and #FFFFFF is white. HEX is the standard format in CSS, HTML, and design tools because it's short, unambiguous, and easy to copy-paste. Shorthand notation (#RGB) exists for colors where each pair is identical, like #F00 for red.

RGB uses decimal values (0-255) for the same three channels. It's the format that display hardware natively understands -- each pixel on an LCD or OLED screen has red, green, and blue subpixels that can be set to 256 brightness levels. RGB is also used in JavaScript's canvas API (ctx.fillStyle = 'rgb(255, 0, 0)') and in image processing libraries. RGBA adds an alpha channel (0-1 or 0-255) for transparency.

HSL (Hue, Saturation, Lightness) describes colors in a way that's more intuitive for humans. Hue is the color itself, measured as an angle on the color wheel (0掳=red, 120掳=green, 240掳=blue). Saturation is how vivid the color is (0%=gray, 100%=fully colored). Lightness is how dark or light (0%=black, 50%=normal, 100%=white). HSL makes it easy to create tints (increase lightness), shades (decrease lightness), and tones (decrease saturation) of a base color. HSV (Hue, Saturation, Value) is similar but uses Value instead of Lightness -- Value=100% means the color at full brightness, while Lightness=100% means white.

When to use each format

Use HEX for CSS and HTML -- it's the most widely supported format and the shortest to write. Use RGB when you need to programmatically manipulate color channels (e.g., mixing two colors by averaging their RGB values) or when you need alpha transparency (rgba()). Use HSL when you need to create color variations -- for example, generating a button's hover state by increasing lightness by 10%, or creating a monochromatic color scheme by keeping hue constant and varying saturation and lightness.

HSL is particularly powerful in CSS custom properties (CSS variables). You can define -- hue: 210 and then use hsl(var(-- hue), 70%, 50%) throughout your stylesheet. Changing a single variable updates the entire color scheme -- impossible with HEX or RGB without recalculating every value. This is why modern CSS frameworks like Tailwind v4 are moving toward HSL-based color systems.

Common Use Cases

Designing with HSL

Build a color palette by picking a base hue and adjusting lightness — much easier in HSL than in RGB.

Converting Figma Colors to CSS

Figma often shows HEX; CSS sometimes needs RGB or HSL (for `color-mix` or opacity). Get the exact string in one click.

Accessibility Checking

Pair this tool with the Contrast Checker to verify your color choices meet WCAG requirements.

Theme Tweaking

Quickly swap a Tailwind preset for a custom brand color and copy the resulting HEX into your config.

How does this compare to other color converters?

A side-by-side comparison of popular color conversion tools.

Feature	NovaTools	RapidTables	W3Schools
HEX 鈫?RGB 鈫?HSL 鈫?HSV	All formats		Limited
Live preview as you type	Instant	Submit button
Color picker integration	EyeDropper API
Privacy (no upload)	100% local	Server-side
Copy CSS-ready values
Works offline

Most online color converters process conversions on their server. Our tool performs all calculations in your browser -- your color values are never transmitted or stored.

FAQ

Which color formats are supported?

HEX (e.g. `#2563EB`), RGB (e.g. `rgb(37, 99, 235)`) and HSL (e.g. `hsl(217, 83%, 53%)`). All three update simultaneously as you change any value. The HEX field also accepts 3-digit shorthand (`#fff` → `#FFFFFF`), and the RGB and HSL fields accept manual input or slider adjustments. The tool always outputs the 6-digit HEX form and standard CSS syntax for RGB and HSL, so the copied values are ready to paste directly into your stylesheet without any manual reformatting.

What is the difference between RGB and HSL?

RGB describes a color by its red, green and blue components, each ranging from 0 to 255. HSL describes it by hue (a color wheel angle from 0 to 360), saturation (intensity, 0% to 100%), and lightness (brightness, 0% to 100%). HSL is more intuitive for designers because you can change lightness without recalculating the other two values — for example, making a color darker is as simple as reducing the lightness percentage. RGB is more common in programming contexts and image processing, while HSL is preferred for generating color palettes and theme variations.

Does the tool support 3-digit HEX shorthand?

Yes. Typing `#fff` is automatically expanded to `#FFFFFF`. The tool accepts any valid 3-digit or 6-digit HEX value, with or without the leading `#`. The output always uses the 6-digit form for maximum compatibility with CSS preprocessors, design tools, and browser dev tools. If you type an invalid value (e.g., `#GGG` or `#12345`), the RGB and HSL fields simply retain the last valid color, so you can experiment freely without losing your previous work.

Can I copy CSS-ready values?

Yes. The Copy button next to each format gives you `#2563EB`, `rgb(37, 99, 235)` or `hsl(217, 83%, 53%)` — ready to paste directly into CSS, SCSS, Tailwind config, or any design tool that accepts standard CSS color notation. The copied string uses the exact syntax that browsers expect, with no extra whitespace or trailing characters. This eliminates the common mistake of copying a hex value without the `#` prefix or forgetting the commas in `rgb()` notation.

What happens if I type an invalid HEX value?

The HEX field is free-text, so you can type anything, but the RGB and HSL values only update when the HEX is valid. This lets you experiment without losing your previous color. If you type a partial value like `#25`, the tool waits until you complete it to `#2563EB` before updating the other fields. The color swatch at the top of the tool also retains the last valid color, giving you a visual reference point while you type.

How do I convert a Tailwind CSS color to RGB or HSL?

Simply type the Tailwind HEX value into the HEX field (e.g., `#2563EB` for `blue-600`). The RGB and HSL values will update instantly, and you can copy them with one click. This is useful when you need to use a Tailwind color in a context that requires RGB or HSL — for example, `color-mix(in srgb, rgb(37, 99, 235) 50%, transparent)` or `hsl(217, 83%, 53% / 0.5)` for opacity. You can also use the built-in Tailwind preset palette to start from any standard Tailwind color.

Can I use this tool to build a color palette?

Yes. HSL is particularly well-suited for palette generation because you can fix the hue and vary lightness to create tints and shades of the same color. For example, set hue to 217 and saturation to 83%, then create five variations by changing lightness to 20%, 40%, 53%, 70%, and 90%. Each variation can be copied as a HEX value. Pair this tool with the Contrast Checker to verify that your text-background combinations meet WCAG accessibility standards.

Is this tool accurate for professional design work?

Yes. The conversion math follows the W3C CSS Color Module Level 4 specification, which is the same standard that browsers use internally. This means the values you copy from this tool will render identically in browsers, design tools like Figma and Sketch, and image editors like Photoshop. The tool does not apply gamma correction or color space conversion (sRGB to Display P3), so all values are in the standard sRGB color space, which is the default for web design.

100% Client-Side & Private

All color conversion happens entirely in your browser using standard JavaScript math.

No color values, HEX codes, or usage patterns are ever transmitted to our servers, stored in a database, or shared with third parties.
The tool does not use cookies, local storage, or session storage to persist your data — when you close the tab, everything is cleared.
There are no analytics scripts tracking which colors you convert or how often you use the tool.
This makes it safe to use for proprietary brand colors, confidential design systems, or sensitive client work where data leakage is a concern.
You can even use the tool offline after the initial page load.

Explore the topic

All tools in this categoryColor Tools Guides for this topicDesign & accessibility

Color Picker

Pick colors from an image or your screen.

Contrast Checker

Check color contrast for WCAG.

Palette Generator

Create beautiful color palettes.