KuConvert

Colour

Convert RGB to HSL

Paste RGB values to get hue, saturation and lightness — the notation that makes building a colour scale a matter of changing one number.

#ff8800

HEX

255, 136, 0

RGB

32, 100%, 50%

HSL

HSL

Preview

White text on thisBlack text on this

Contrast

  • Against white2.39:1Fails
  • Against black8.77:1AAA

WCAG asks for 4.5:1 for body text and 3:1 for large text. The ratio is computed from relative luminance, which is not the same as how bright a colour looks.

  • Runs in your browser
  • No account required
  • Free to use

How it works

01

HSL is the notation for making variations

In RGB, a lighter version of a colour means changing all three channels by amounts that depend on the colour. In HSL it means raising the lightness. That is why design systems are usually built in HSL and shipped in hex.

02

A grey has no hue

When saturation is zero the hue is undefined — the maths divides by zero. It is reported as 0 rather than NaN, which is what CSS expects and what every other implementation does.

03

Hue wraps, the others clamp

Hue is an angle, so 400° is 40° and -20° is 340°. Saturation and lightness are percentages and are clamped to 0-100.

What it does

Accepts either input notation

Comma or space separated, with alpha carried through.

Rounded sensibly

One decimal place, which is enough to round-trip back to the same RGB values.

Contrast shown too

Against white and black, with the WCAG verdicts.

Runs in your browser

No account and no upload — what you type is never sent anywhere. Analytics records that the tool was opened, never what you put into it.

Practical advice

Getting a better result

  • To build a scale from a brand colour, keep hue and saturation and vary lightness from about 95% down to 5%.
  • Two colours with the same lightness in HSL do not look equally bright — HSL lightness is not perceptual. For that you want a perceptual space such as OKLCH.

Questions

Things people ask

Why is the hue 0 for my grey?

Because a colour with no saturation has no hue to report — the calculation is undefined. Zero is the conventional answer and the one CSS accepts.

Does converting lose precision?

A little. RGB has 256 steps per channel and HSL is continuous, so rounding on the way back can shift a channel by one. It is not visible, but a strict round-trip comparison will show it.

Related tools

Colour Picker

Pick a colour and get every notation, shades, harmonies and contrast.

Runs entirely in your browser

Open tool

HEX to RGB

Convert a hex colour to RGB, including the alpha forms.

Runs entirely in your browser

Open tool

RGB to HEX

Convert RGB or RGBA to a hex colour.

Runs entirely in your browser

Open tool

Image Converter

Convert between JPG, PNG, WebP and AVIF - up to 50 images at once.

Runs entirely in your browser

Open tool
See every tool

Who builds these

Free tools by day. Websites that earn their keep by trade.

KuConvert is built by KUDUY, a web design and development agency. From custom WordPress builds to SEO and e-commerce, everything they do is engineered to bring you more qualified traffic and turn it into revenue.

Web Design

Custom, conversion-focused web design that captivates visitors and turns them into paying customers. Mobile-first, fast, and built to rank.

Web Development

Custom WordPress websites built with clean code, blazing-fast performance (Core Web Vitals optimised), and enterprise-grade security.

E-Commerce

Online stores that convert visitors to customers with seamless shopping experiences.

SEO

Technical SEO, keyword research, on-page optimisation and local SEO strategies that drive qualified organic traffic.

Digital Marketing

Data-driven campaigns that deliver measurable ROI across every channel.

Branding

Memorable brand identities that stand out in any market and build lasting trust.

Website Help

One-on-one expert support for bug fixes, updates and ongoing maintenance — without a long-term retainer.

  • Fixed scope, no surprise invoices

    Most sites ship in four to eight weeks with the scope and the price agreed up front.

  • SEO from day one

    Search is designed into the build — structure, schema and Core Web Vitals — not retrofitted.

  • A team, not a ticket queue

    A project manager, a designer and a developer you can actually reach.

Talk to KUDUYView all services

Need your whole site to load this fast?

Images are usually the heaviest thing on a page and the easiest win. KUDUY works on site speed, image delivery and Core Web Vitals for teams who would rather not do it by hand.

Work with KUDUYBrowse all tools

This tool runs entirely in your browser. Your files are never uploaded.