Color Converter

About Color Converter

Colour format conversion is one of the most frequent micro-tasks in web development and UI/UX design — and it is surprisingly tricky to do accurately by hand. HEX, RGB, and HSL represent the same colours but in completely different number systems, and converting between them requires trigonometry in the case of RGB-to-HSL. Yet every tool in the design and development workflow has its own preferred format: CSS stylesheets use HEX codes (#ff6b35), design tools like Figma and Adobe XD use RGB (rgb(255, 107, 53)), and programmatic colour manipulation (darkening a button on hover, generating colour palettes, calculating contrast ratios) is far more natural in HSL because hue, saturation, and lightness are perceptually meaningful. HEX (hexadecimal colour notation) encodes R, G, and B as two hex digits each: #RRGGBB. Values range from #000000 (black) to #ffffff (white). RGB (Red, Green, Blue) expresses the same values as decimal numbers from 0 to 255. HSL (Hue, Saturation, Lightness) describes a colour by its position on the colour wheel (0°–360°), its saturation (0%–100%), and its perceived lightness (0%–100%). HSL is uniquely useful for making colour family adjustments: to get a darker version of a colour, just reduce the L value; to desaturate it, reduce S; to shift the hue family, adjust H. This free online colour converter accepts any HEX, RGB, or HSL value and instantly shows the equivalent in all three formats, plus a live colour swatch preview so you can see the colour while working with the numbers. It also accepts named CSS colours (tomato, steelblue, goldenrod, etc.). All conversion runs locally in your browser with no server needed.

How to Use Color Converter

1. Enter a Color Value: Type a HEX code (with or without the # prefix), an RGB value, an HSL value, or a named CSS color into the input field. The converter detects the format automatically.
2. View All Equivalent Formats: All three format equivalents (HEX, RGB, HSL) are displayed simultaneously alongside a live colour swatch. Edit any field to adjust the colour.
3. Copy Your Needed Format: Click the copy button next to the format you need — HEX for CSS, RGB for design tools, HSL for programmatic manipulation — and paste it directly into your work.

Key Features

• HEX ↔ RGB ↔ HSL — All Directions: Input any colour in HEX (#rrggbb), RGB (r, g, b as 0–255 values), or HSL (h in degrees, s and l as percentages) and see all three formats simultaneously. Edit any field and all others update instantly.
• Live Colour Swatch Preview: A real-time colour swatch shows the actual colour as you enter or edit values. Essential for verifying that the number you typed matches the colour you intended.
• Named CSS Color Support: Type any named CSS colour (e.g. 'tomato', 'steelblue', 'goldenrod', 'mediumseagreen') and the converter resolves it to its HEX, RGB, and HSL equivalents.
• One-Click Copy: Copy any format value (HEX, rgb() string, or hsl() string) to your clipboard with a single click — ready to paste directly into CSS, Tailwind, design tools, or documentation.
• CSS-Ready Output Format: Output values are formatted as valid CSS strings: #ff6b35, rgb(255, 107, 53), and hsl(18, 100%, 60%) — paste directly into your stylesheet without reformatting.
• 100% Browser-Based: All conversion uses standard mathematical formulas implemented in JavaScript. No server requests. Works offline after the initial page load.

Benefits

• Eliminate Manual Colour Math: RGB-to-HSL conversion requires trigonometric calculation. HEX-to-RGB requires base-16 conversion. This tool makes the conversion instant and exact, removing the risk of off-by-one errors in manual calculation.
• Match Colours Across Design and Development Tools: Figma, Sketch, Adobe XD, CSS, and Tailwind CSS all use different default colour formats. Having instant conversion between them eliminates the format-switching friction when moving a colour from a design tool to a stylesheet.
• Understand Colour Relationships with HSL: HSL makes colour relationships visible in the numbers: two colours with the same hue (H) are in the same colour family. Adjust L to create light/dark variants. Adjust S to desaturate. This is impossible to see in HEX or RGB.
• Instant Named Color Lookup: CSS has 140+ named colours, many of which have memorable names but obscure HEX values. Type the name to get its numeric values immediately.

Supported Formats & Capabilities

• Input: HEX (#rrggbb or #rgb), RGB (0–255 each channel), HSL (0–360°, 0–100%, 0–100%), named CSS colors
• Output: HEX, rgb() CSS string, hsl() CSS string

Common Problems & Solutions

My HEX color is 3 digits. Does the converter handle shorthand HEX?

Yes. Shorthand HEX (#f60 instead of #ff6600) is supported. Each shorthand digit is expanded by doubling it — #f60 expands to #ff6600.

Why does my RGB-to-HSL conversion show rounding differences from other tools?

HSL hue is calculated using trigonometry and involves division that can produce slightly different floating-point rounding. Differences of 1° in hue or 0.1% in saturation/lightness between tools are normal rounding artefacts, not errors.

How do I convert RGBA (with alpha transparency) values?

This converter handles the standard RGB/HSL colour channels without alpha. For RGBA, add the alpha channel separately in your CSS: rgba(255, 107, 53, 0.5). The H/S/L values of the colour itself are not affected by the alpha.

I typed a named CSS color and got an error. Why?

The tool supports the 140+ named CSS colors defined in the CSS Color Level 4 specification. Colour names must be spelled correctly and without quotes. Typos or names from other systems (e.g. Pantone or RAL) are not recognised.

Pro Tips & Best Practices

• When building a colour palette, start in HSL. Choose your brand hue (H value), then generate light/dark/saturated/desaturated variants by systematically varying L and S while keeping H constant. This produces a perceptually cohesive palette.
• Tailwind CSS v3+ supports arbitrary values in HEX format directly in utility classes: bg-[#ff6b35]. Use this converter to quickly get the HEX code for any colour you want to use with Tailwind.
• For WCAG accessibility contrast ratio checking, you need the RGB values. Convert your foreground and background colours to RGB here, then use a contrast ratio calculator to verify they meet the 4.5:1 minimum for normal text (WCAG AA).
• The CSS hsl() function is extremely useful for theming: define your brand colour as hsl(220, 90%, 55%), then use CSS variables with modified L and S values for hover states, disabled states, and dark mode variants — all staying within the same hue family.

Privacy & Data Security

All colour conversion calculations are performed entirely in your browser using standard mathematical formulas (the CSS Color specification algorithms). No data is transmitted to any server.

Frequently Asked Questions

What color formats does this converter support?

The tool converts between HEX (#rrggbb), RGB (rgb(r, g, b) with values 0–255), and HSL (hsl(h, s%, l%)). Named CSS colors like 'tomato' or 'steelblue' are also accepted as input.

Does HEX support transparency or alpha?

8-digit HEX supports alpha (#rrggbbaa). This converter handles the standard 6-digit HEX. For transparency, add the alpha channel separately in RGBA or HSLA CSS notation.

Is this color converter mathematically accurate?

Yes. HEX and RGB conversions are exact. HSL conversion uses the standard formulas from the CSS Color specification. Minor rounding differences (< 1°) compared to other tools are normal floating-point behaviour.

What is the difference between HSL and HSB/HSV?

HSL (Hue, Saturation, Lightness) and HSB/HSV (Hue, Saturation, Brightness/Value) are different colour models. At full saturation, HSL has a lighter midrange than HSB. CSS uses HSL. Photoshop uses HSB. This converter works with HSL.

Why do designers prefer HSL for colour manipulation?

HSL separates the three perceptually intuitive dimensions of colour: what colour it is (H), how vivid it is (S), and how light or dark it is (L). This makes HSL ideal for programmatic adjustments like generating tints, shades, and colour families.

How many CSS named colors are there?

The CSS Color Level 4 specification defines 148 named colours. They range from the obvious (red, blue, green) to the obscure (rebeccapurple, papayawhip, blanchedalmond).

Can I convert CMYK colors with this tool?

No. This tool converts between HEX, RGB, and HSL — the three formats used in CSS and web design. CMYK is used in print design (Pantone, offset printing) and requires a separate converter.

Related Utility Utilities