Color Converter

Convert between HEX, RGB, HSL

Preview

HEX

#0ea5e9

RGB

rgb(14, 165, 233)

HSL

hsl(199, 89%, 48%)

Tailwind arbitrary

[#0EA5E9]

Edit RGB

Edit HSL

H (0-360)

S (%)

L (%)

How it works

Color Converter — Convert between HEX, RGB, HSL. All processing happens in your browser — no upload, no signup, no email required. Free forever.

Last updated: 2026-05-06

Editor's note

We use this one in design hand-offs more than anything else. Designers think in hue, saturation and lightness — they say things like "a touch warmer" or "drop the saturation a notch". Developers think in HEX, because that is what ends up in the stylesheet. The mismatch eats up a depressing amount of Slack. So we put HEX, RGB and HSL on the same panel with a live swatch, because the fastest way to end "is this the right teal" is to point at the colour together.

The Tailwind arbitrary-value output is the part we did not expect to use as much as we do. It started as a small convenience — copy bg-[#1F2937] in one go — and quietly became the default way we ship one-off shades that don't deserve a config entry. We resisted adding a curated palette feature. Palette curation is a real design problem and this tool is not where it gets solved; here we just convert what you already chose.

About Color Converter

Color Converter turns any colour value between HEX, RGB and HSL representations and previews the result side by side. It also outputs a Tailwind "arbitrary value" string ready to drop into a className. HEX RGB conversion is one of the most common chores in front-end work — this tool removes the calculator step.

Designers use it to translate brand colours from a Figma file into CSS, developers to debug an unexpected hue, and accessibility reviewers to verify that a colour reads correctly when expressed in HSL for tweaking lightness.

Everything happens in your browser. Your palette, brand colours and prototypes never touch a remote server.

How to use Color Converter

Click the colour swatch to open your operating system's colour picker, or type a HEX value directly.
Use the RGB number inputs to fine-tune the red, green and blue channels (0-255 each).
Switch to the HSL editor to adjust hue (0-360), saturation and lightness — useful when you need a slightly darker or warmer variant.
Watch the Preview panel for an instant rendering of the colour at full size.
Use the copy buttons next to HEX, RGB, HSL or Tailwind arbitrary value to send it straight to your clipboard.

Common use cases

Converting a brand colour from a designer's HEX spec into the rgb() format your CSS-in-JS solution expects.
Generating Tailwind arbitrary class strings like bg-[#1f2937] without leaving the browser.
Tuning a button hover state by nudging the lightness in HSL while keeping hue constant.
Verifying that a hex code from a stakeholder email matches the actual rendered colour they had in mind.
Building a dark-mode variant by reading off the HSL of a light colour and lowering its lightness.

Tips & common mistakes

HSL is much more intuitive than RGB for adjusting brightness or saturation — try editing HSL when you want a "slightly darker blue".
Hex codes can be 3 or 6 digits. The 3-digit form (#abc) expands to #aabbcc, so #f00 and #ff0000 are identical.
When pasting from Figma, watch out for trailing alpha bytes (e.g. #1f2937FF). Strip the alpha before pasting if your tooling expects opaque hex.
For accessibility checks, generate two HSL values and compare lightness deltas — at least 50% L difference is a safe rule of thumb for body text.

Frequently asked questions

Which colour spaces are supported?

HEX, RGB, and HSL. We also output a Tailwind 'arbitrary value' format you can paste directly into class names.

Can I save a palette?

Not yet. For now, use the copy buttons to send each value to your clipboard. Palette saving is on the roadmap.

Are alpha channels handled?

Currently no. We focus on opaque colours; HEX-A and RGBA support is planned.

Why do RGB(255, 0, 0) and HSL(0, 100%, 50%) produce the same colour?

They describe the same point in the colour space, just from different axes. RGB defines mix-ratios of light primaries; HSL describes hue, saturation and lightness. Either gets you to pure red.

Can I paste a colour name like "crimson" or "rebeccapurple"?

Not directly. Browsers map ~140 CSS named colours to specific hex values — search for the name in your editor and paste the hex equivalent here.

What does the Tailwind arbitrary value output look like?

Something like [#1F2937] — wrap that in any Tailwind class such as text-[#1F2937], bg-[#1F2937] or border-[#1F2937] to use the exact colour without extending tailwind.config.js.