DevKits

Color Converter (HEX, RGB, HSL)

Convert colors between HEX, RGB, HSL, and HSV instantly. Includes a live color preview and copy-ready CSS strings.

Last updated:

HEX#3b82f6
RGBrgb(59, 130, 246)
HSLhsl(217, 91%, 60%)

Enter a color in HEX, RGB, HSL, or HSV above to convert it to all other formats at once, with a live preview. Alpha (opacity) is preserved. Everything runs in your browser.

What is Color Converter?

A color converter translates a single color between the formats used across web development and design: HEX (#RRGGBB) for CSS, RGB for canvas and image work, HSL for intuitive lightness/saturation tweaks, and HSV for design tools. Seeing all representations at once — plus a live swatch — makes it easy to grab the exact syntax a given context needs without mental math.

How to convert a color

  1. 1Type or paste a color in any supported format (HEX, rgb(), hsl(), or a named color).
  2. 2All other formats update instantly, alongside a live preview swatch.
  3. 3Adjust HSL lightness/saturation to fine-tune, then read back the HEX.
  4. 4Copy the CSS-ready string you need.

Use Cases

Match a design to CSS

Convert an HSV value from a design tool into the HEX or rgb() string your stylesheet needs.

Tweak lightness with HSL

Use HSL to make a color lighter or darker predictably, then export the resulting HEX.

Add or read opacity

Convert between 8-digit HEX (#RRGGBBAA) and rgba() to handle transparency consistently.

Code Examples

One color, four formats

HEX:  #3B82F6
RGB:  rgb(59, 130, 246)
HSL:  hsl(217, 91%, 60%)
HSV:  hsv(217, 76%, 96%)

Key Concepts

HEX
A base-16 encoding of red, green, blue channels (#RRGGBB), optionally with alpha (#RRGGBBAA). The most common CSS color syntax.
HSL vs HSV
Both use Hue + Saturation, but HSL's third channel is Lightness (0=black,100=white) while HSV's is Value/brightness. HSL is native to CSS.
Alpha channel
Opacity from 0 (transparent) to 1. Represented as the last pair in 8-digit HEX or the 4th argument in rgba()/hsla().

Tips & Best Practices

  • ▸HSL is the easiest format for creating tints/shades: keep hue fixed and adjust lightness.
  • ▸3-digit HEX (#39F) is shorthand for 6-digit (#3399FF) — both are valid CSS.
  • ▸For accessible text, check contrast ratios (WCAG AA needs 4.5:1) — a converter shows the color, not the contrast.
  • ▸Named CSS colors (tomato, rebeccapurple) are convenient but limited; convert to HEX for exact control.

Frequently Asked Questions

Does the tool support alpha channel?

Yes. HEX inputs with 8 digits (e.g. #RRGGBBAA) and rgba()/hsla() strings preserve the alpha value across formats.

What input formats are accepted?

3- or 6-digit HEX (with optional #), rgb()/rgba() functional notation, hsl()/hsla() functional notation, and named CSS colors (e.g. tomato).

Related Tools

URL Encode/Decode

Percent-encode and decode URLs online. Handles query strings, path segments, and special characters correctly.

User Agent Parser

Parse User-Agent strings to identify browser, engine, operating system, and device. Instantly see what your own browser sends.

HTTP Status Codes

Complete reference of HTTP status codes with meanings, use cases, and RFC citations. Search 60+ codes from 100 Continue to 511 Network Authentication Required.

CSS Gradient

Design linear and radial CSS gradients with a visual color-stop editor. Copy production-ready CSS or Tailwind classes.

JSON Formatter

Format, beautify, and validate JSON online. Free, fast, and 100% local — your data never leaves your browser.

JSON Validator

Validate JSON online with instant error location and structure statistics (depth, keys, node types). 100% local — your JSON never leaves the browser.