HSL to HEX Converter

Convert HSL color values to HEX instantly — paste hsl(210, 100%, 50%) or the newer CSS4 space-separated syntax hsl(210 100% 50%), and get the hex code immediately. Perfect for the reverse workflow: if you've built a CSS design system with HSL custom properties or Tailwind's color config, use this to get hex codes back for Figma, Sketch, or client brand guidelines. No signup, live output, copy in one click.

PICK COLOR

ON BLACK 5.21:1 AA (Pass)

ON WHITE 4.03:1 Fail

CONVERSION RESULT

HSL 33, 100%, 50%

HEX #FF8C00

ENTER HEX CODE

HUE 33°

SATURATION 100%

LIGHTNESS 50%

FORMATS

rgb(255, 140, 0)

hsl(33, 100%, 50%)

cmyk(0%, 45%, 100%, 0%)

Interior Design

Bedroom walls

Home office

Bathroom vanity

Pairs with:

Color Mixing

Blue 85%

White 15%

Start with ultramarine blue. Add tiny red for purple-blue, white for lighter shades.

Tints (Lighter)

Shades (Darker)

COMPLEMENTARY

TRIADIC

SPLIT COMPLEMENTARY

ANALOGOUS

PRIMARY HSL(33, 100%, 50%)

SECONDARY HSL(213, 100%, 50%)

ACCENT HSL(63, 100%, 60%)

NEUTRAL HSL(33, 10%, 90%)

Click "Copy CSS" to copy gradient code

COLOR 1

COLOR 2

STEPS (5)

DIRECTION

CSS VARIABLES

:root {
  --primary: #ff8c00;
  --primary-hsl: 33, 100%, 50%;
  --secondary: #008cff;
  --accent: #ffcc00;
}

TAILWIND CONFIG

module.exports = {
  theme: {
    extend: {
      colors: {
        'brand': {
          DEFAULT: '#ff8c00',
          50: '#fff7ed',
          ...
        }
      }
    }
  }
}

SCSS VARIABLES

$primary-color: #ff8c00;
$secondary-color: #008cff;
$accent-color: #ffcc00;
$neutral-color: #f1f5f9;

JSON OBJECT

{
  "hex": "#ff8c00",
  "hsl": "33, 100%, 50%",
  "rgb": "255, 140, 0",
  "name": "Dark Orange"
}

My Color Library

Save your favorite colors. Synced across all color tools.

Import format info

Import a JSON file with this format:

[
  {"hex": "#FF8C00", "name": "Orange"},
  {"hex": "#3B82F6", "name": "Blue"}
]

What This Tool Does

Color Conversion HSL, HEX, RGB, CMYK formats

Accessibility Check WCAG contrast ratios

Color Harmonies Complementary, triadic, analogous

Gradients Create smooth color transitions

Export Options CSS, Tailwind, SCSS, JSON

Keyboard Shortcuts

Ctrl+C Copy HEX

Ctrl+V Paste HEX

R Random color

S Save to library

Professional HSL Color Conversion Made Easy

HSL (Hue, Saturation, Lightness) is one of the most intuitive color models for designers. Unlike RGB, HSL lets you think about colors the way humans naturally perceive them - by their hue, how vivid they are, and how light or dark they appear.

Our HSL to HEX Converter provides instant, accurate color conversions with advanced features designed for modern workflows. Beyond simple conversion, we offer comprehensive color analysis including WCAG accessibility testing, automatic generation of shades and tints, color harmony schemes, gradient creation, and export in multiple formats.

How to Use the HSL to HEX Converter

Select Your Color

Use the HSL sliders to adjust Hue (0-360°), Saturation (0-100%), and Lightness (0-100%), enter a HEX code directly, or click "Pick Color" to use the visual color picker.

Check Accessibility

View WCAG contrast ratios against black and white backgrounds. AA and AAA compliance badges show instantly.

Explore Variations

Navigate through tabs to generate shades, tints, color harmonies, palettes, or gradients.

Export and Save

Copy individual colors, export code in your preferred format, or save to your personal library.

Understanding HSL Color Model

Hue (0-360°)

The color type on the color wheel. 0° is red, 120° is green, 240° is blue, and 360° wraps back to red.

Saturation (0-100%)

The intensity or purity of the color. 0% is gray, 100% is the most vivid version of the hue.

Lightness (0-100%)

How light or dark the color is. 0% is black, 50% is the pure color, 100% is white.

WCAG Accessibility

Automatic contrast ratio calculations with AA and AAA compliance indicators.

Color Harmony

Explore complementary, triadic, split-complementary, and analogous schemes.

Multi-Format Export

Export in CSS Variables, Tailwind Config, SCSS, or JSON format.

Frequently Asked Questions

How do I convert HSL to HEX?

Simply adjust the HSL sliders (Hue, Saturation, Lightness) or enter a HEX code in the input field. The conversion happens instantly in real-time. You can also use the color picker button to select any color visually.

What is HSL color format?

HSL stands for Hue, Saturation, and Lightness. Hue is the color type (0-360 degrees on the color wheel), Saturation is the intensity (0-100%), and Lightness is the brightness (0-100%). HSL is often more intuitive for designers than RGB because it separates color (hue) from intensity and brightness.

What is WCAG color accessibility?

WCAG (Web Content Accessibility Guidelines) defines contrast ratios to ensure text is readable. AA level requires 4.5:1 contrast ratio, while AAA requires 7:1. Our tool automatically checks your color against black and white backgrounds.

How do I generate color harmonies?

Go to the Harmony tab to see complementary, triadic, split-complementary, and analogous color schemes automatically generated from your selected color. Click any color to copy its HEX code.

What export formats are supported?

You can export colors in CSS Variables, Tailwind Config, SCSS Variables, and JSON formats. Use the Export Code tab to copy the code in your preferred format.