Skip to content
TechToolsHQ
NewsReviewsGuidesTech 101Tech SeriesToolsNewsletter
TechToolsHQ

Independent, research-driven tech coverage — breaking news, in-depth reviews, buying guides, and technical tutorials to help you understand and choose with confidence.

Explore
NewsReviewsGuidesTech 101Tech SeriesFree Tools
Legal
About UsOur AuthorsContact UsPrivacy PolicyTerms of ServiceCopyright & DMCAAffiliate DisclosureEditorial PolicyAdvertise With Us

© 2026 TechToolsHQ. All rights reserved.

Tools / Colour converter

Colour converter

Paste a hex code or an rgb() value and get every format back, including the bare HSL triple that CSS custom properties usually want. Shorthand hex like #abc is expanded correctly.

Runs entirely in your browser

Loading tool…

About this tool

Colours in web work show up in several notations, and you constantly need to move between them. This converter takes a HEX code or an rgb() value and returns every common format — HEX, RGB and HSL — so you can grab whichever your stylesheet or design tool expects. It also outputs the bare HSL triple that CSS custom properties usually want, without the surrounding hsl() wrapper.

Small details are handled correctly. Shorthand hex like #abc is expanded to its full six-digit form, and the conversions are exact rather than approximate, so a value round-trips without drift. A live preview shows the actual colour as you work, which catches the times a pasted value is not quite what you thought.

Everything runs in your browser, so it is instant and nothing is uploaded. Use it to translate a colour from a design handoff into the format your code needs, or to understand a colour by seeing it in HSL where hue, saturation and lightness are legible.

Frequently asked questions

Which colour formats does it convert between?
HEX, RGB and HSL, in any direction. It also gives the bare HSL values (without the hsl() wrapper) that CSS custom properties commonly use.
Does it handle shorthand hex like #abc?
Yes. Three-digit shorthand is expanded to its full six-digit equivalent, so #abc becomes #aabbcc and converts correctly.
Why convert a colour to HSL?
HSL expresses colour as hue, saturation and lightness, which makes it easy to create tints and shades or adjust a colour intuitively — far more readable than tweaking raw RGB channels.
Is there a live preview?
Yes. The tool shows a swatch of the actual colour as you enter a value, so you can confirm it is what you intended.
Is the conversion private?
Yes. It runs entirely in your browser, so nothing you enter is sent to a server.

Enjoying Colour converter?

TechToolsHQ is an independent, reader-supported tech platform. If this free tool saved you time, solved a problem, or helped your workflow, consider supporting our work. Your support helps us keep our utilities 100% free, private, and ad-free for everyone.

100% optional · Reader supported · Independent researchSupport our work

Related tools

  • Colour contrast checkerCheck a text and background pair against every WCAG threshold.
  • Tailwind CSS color finderFind the closest matching Tailwind CSS palette color and utility class from any hex.
  • Typography & font pairing previewPreview modern heading and body Google Font pairings with live layout hierarchy.
  • CSS gradient generatorDesign linear, radial, and conic CSS gradients with multi-stop color controls.
  • CSS box shadow generatorCreate multi-layer, realistic soft box shadows with copyable CSS declarations.
  • Color palette & harmony generatorGenerate complementary, triadic, and monochromatic color palettes from any hex.

Browse all tools