Color Format Converter: Convert Between HEX, RGB, HSL, HSV, and CSS Color Names

Color values are one of the most deceptively annoying things to work with in frontend development. Figma gives you a hex code. Your CSS variables use HSL. Your Tailwind config expects a specific format. An accessibility tool asks for RGB. And your designer keeps sending Slack messages with colour names like "warm slate" that have to be cross-referenced in some design system doc.

Toolzy's Color Converter is the single tool you need for all these translations. Enter any color in any supported format, and instantly see the equivalent value in every other format — with a live colour preview so you know you're working with the right shade.

Understanding the Color Formats

Before diving into the converter, it helps to understand what each format represents and where you'll encounter it.

HEX (#RRGGBB)

The hexadecimal format is the most common in CSS and design tools. Each pair of hex digits represents the red, green, and blue channels on a scale of 00 to FF (0–255).

color: #3b82f6;          /* Tailwind blue-500 */
background-color: #fff;  /* Shorthand for #ffffff */
border-color: #e5e7eb;   /* Tailwind gray-200 */

HEX supports an optional alpha channel as a fourth pair (#RRGGBBAA), where FF is fully opaque and 00 is fully transparent. Figma, most design tools, and the majority of CSS codebases use HEX by default.

RGB (Red, Green, Blue)

RGB expresses colour as three integer channels from 0 to 255. The CSS rgb() function takes these directly, and the rgba() variant adds an alpha channel from 0.0 to 1.0.

color: rgb(59, 130, 246);        /* Same blue */
background: rgba(0, 0, 0, 0.5);  /* 50% transparent black */

RGB is the native model of screens, so it's what colour pickers in browsers and JavaScript canvas APIs work in. If you're doing colour math in JavaScript, you'll likely work in RGB.

HSL (Hue, Saturation, Lightness)

HSL represents colour in terms humans think about naturally: the hue (the colour wheel angle, 0–360°), the saturation (how vivid vs grey, 0–100%), and the lightness (how dark vs light, 0–100%).

color: hsl(217, 91%, 60%);          /* Blue again */
color: hsl(217, 91%, 60% / 0.5);    /* 50% transparent (modern syntax) */

HSL is particularly useful for:

• Design systems: It's easy to create colour scales by varying lightness in fixed steps.
• Dynamic theming: Adjusting lightness with CSS calc() for hover/active states.
• Tailwind config: Tailwind's oklch-based design in v4 aside, HSL is the recommended format for custom colour tokens in v3.
• Accessibility work: You can directly see whether a colour is light or dark from the lightness value.

HSV (Hue, Saturation, Value)

HSV is similar to HSL but uses value (brightness) instead of lightness. It's the model used by Adobe Photoshop, most native OS colour pickers, and many design applications. You won't often write HSV directly in CSS — but you'll encounter it when copy-pasting from design tools or when working with image processing libraries.

H: 217°  S: 76%  V: 96%   /* Same blue in HSV */

CSS Named Colors

CSS defines 148 named colours — from red and blue to cornflowerblue and rebeccapurple. They're convenient for quick prototyping but rarely used in production systems (with the exception of transparent, white, black, and a handful of others).

color: cornflowerblue;    /* #6495ED */
background: aliceblue;    /* #F0F8FF */
border-color: transparent;

The converter lets you input a CSS colour name and get its HEX/RGB/HSL equivalent — useful when you encounter one in legacy code and need to know the actual value.

Use Cases

Design to Code Handoff

Figma outputs HEX by default in its inspect panel. If your CSS codebase uses HSL variables, you'd normally open a colour picker, paste the hex, and manually read the HSL values. The converter does this in one step.

Scenario: Your designer hands off #1d4ed8. You need to add it to a CSS custom property system that uses HSL.

/* What you need */
--color-primary: hsl(221, 74%, 47%);

Paste #1d4ed8 into the converter, and the HSL value is right there.

Tailwind Config Customisation

When extending Tailwind's colour palette, you can use any valid CSS colour format. HSL is often preferred because it makes it easy to reason about colour scales:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50:  'hsl(217, 100%, 97%)',
          100: 'hsl(217, 96%, 93%)',
          500: 'hsl(217, 91%, 60%)',
          900: 'hsl(217, 71%, 23%)',
        }
      }
    }
  }
}

Use the converter to derive each step from a known base colour, adjusting the lightness value across the scale.

CSS Variables and Theming

Modern theming systems define colour tokens as CSS custom properties. The converter helps you normalise values when you're collecting colours from different sources (brand guidelines, design files, existing stylesheets) into a unified token system.

:root {
  --color-surface: hsl(0, 0%, 100%);
  --color-text-primary: hsl(220, 9%, 13%);
  --color-accent: hsl(262, 83%, 58%);
}

Accessibility Contrast Checking

WCAG contrast requirements (4.5:1 for normal text, 3:1 for large text) are checked against luminance values derived from RGB. Many contrast checkers ask for hex or RGB input. If you have an HSL value, convert it first, then plug it into your contrast tool.

The HSL format also gives you an immediate intuition about contrast: two colours with lightness values of 20% and 95% will almost certainly have sufficient contrast; two with 45% and 55% might not.

How to Use the Converter

1. Open toolzy.in/tools/color-converter
2. Enter a colour in any supported format:
   • HEX: #3b82f6 or 3b82f6 (with or without the #)
   • RGB: rgb(59, 130, 246) or just 59, 130, 246
   • HSL: hsl(217, 91%, 60%) or 217, 91%, 60%
   • HSV: 217, 76%, 96%
   • CSS name: cornflowerblue
3. See the live preview — a colour swatch updates immediately so you can confirm you're looking at the right colour
4. Copy any format with a single click — each output field has its own copy button

No form submission needed — the conversion happens as you type.

Colour Format Quick Reference

| Format | Example | Where it's used | |--------|---------|-----------------| | HEX | #3b82f6 | CSS, Figma, design tools, Tailwind source | | RGB | rgb(59, 130, 246) | CSS, JavaScript canvas/WebGL, accessibility tools | | HSL | hsl(217, 91%, 60%) | CSS theming, design systems, Tailwind config | | HSV | H:217 S:76% V:96% | Photoshop, native OS pickers, image processing | | CSS name | cornflowerblue | Legacy CSS, quick prototyping |

Frequently Asked Questions

Does the converter handle 8-digit HEX (with alpha)? Yes. #3b82f680 is parsed as blue at 50% opacity. The alpha channel is preserved across conversions where the target format supports it (RGBA, HSLA).

What about the oklch() and color() CSS functions? These are newer CSS colour spaces not yet widely supported across all tools and browsers. The converter focuses on the five formats above, which cover the vast majority of practical frontend and design work.

My hex code has only 3 digits (#fff). Does it work? Yes. 3-digit shorthand hex is automatically expanded: #fff → #ffffff, #36c → #3366cc.

How accurate is the HSV conversion? The conversion between RGB and HSV is mathematically exact (no rounding errors). There is minor floating-point rounding in displayed values (e.g. H: 217.0° vs H: 217.04°), but this has no perceptible effect on the rendered colour.

Can I use this to find the Tailwind class for a custom colour? Not directly — Tailwind's built-in palette has specific named classes. But you can use the converter to get the HEX or RGB value, then use a Tailwind colour palette reference to find the closest named class.

---

Stop hunting through colour pickers and documentation. Open the Color Converter, type your colour, and have every format ready to copy in seconds.