HSL / HSV Converter

Convert HEX, RGB, HSL and HSV/HSB in either direction. Compare the CSS lightness ramp with the design-picker value ramp so the same-looking numbers do not turn into the wrong colour.

DESIGN & COLOR · COLOUR-MODEL HANDOFF · BROWSER WORKSPACE

Build a preview you can inspect.

Convert HEX, RGB, HSL and HSV/HSB in either direction. Compare the CSS lightness ramp with the design-picker value ramp so the same-looking numbers do not turn into the wrong colour.

01 · EDIT A COLOUR IN ANY MODELLIVE · LOCAL

LIVE COLOUR#4378D2

HEX handoff

Hex colour

Use #RGB or #RRGGBB. Alpha HEX is not part of this converter.

RGB screens & pixels

RedGreenBlue

HSL CSS colour syntax

Hue °Saturation %Lightness %

HSV / HSB design pickers

Hue °Saturation %Value %

#4378D2 · hsl(218 61% 54%) is the CSS form. HSV/HSB is the design-picker form.The hue is shared by HSL and HSV. Saturation and the third channel use different maths, so copying values between them changes the colour.

02 · HAND OFF THE RIGHT VALUE4 MODELS

HEX · EXACT#4378D2

RGB · SCREEN67 · 120 · 210

HSL · CSS218° · 61% · 54%

HSV / HSB · DESIGN PICKER218° · 68% · 82%HSV is not a CSS function.

HSL · LIGHTNESS0% → 100% · the end is white

HSV · VALUE0% → 100% · the end stays vivid

CSS & DESIGN HANDOFF

hex   #4378D2
rgb   rgb(67 120 210)
hsl   hsl(218 61% 54%)
hsv   218, 68%, 82%   (not valid CSS — design tools only)

Why the models disagree

At this hue, HSV value 100% means the brightest saturated colour. HSL lightness 100% always mixes all the way to white. HSL works in CSS; HSB in Photoshop and many design pickers is HSV.

◎

Runs in this browser. Results are estimates or editing cues. Review the assumptions and source-specific limits before using them in a consequential decision.

Back to the tool library ↗

Need a feature from the original version? Open the current ECECH tool

How this app works

Convert HEX, RGB, HSL and HSV/HSB in either direction. Compare the CSS lightness ramp with the design-picker value ramp so the same-looking numbers do not turn into the wrong colour. Results update as you adjust inputs and stay in this browser.