🎨 Web & Developer

Color Converter

Convert colours between HEX, RGB, HSL, HSV and CMYK instantly. Pick a colour or type any format, copy the code you need, and explore tints and shades.

🎨

Color Converter

Pick a colour with the swatch or type a value into any field — HEX, RGB, or HSL. Every other format updates instantly. Click Copy on the one you need.

HEX

RGB

HSL

All Formats

HEX

#38BDF8

RGB

rgb(56, 189, 248)

HSL

hsl(199, 93%, 60%)

HSV / HSB

hsv(199, 77%, 97%)

CMYK

cmyk(77, 24, 0, 3)

RGB %

22%, 74%, 97%

Tints & Shades (click to select)

What is a Color Converter?

A color converter translates a colour between the different formats used in design and web development — HEX, RGB, HSL, HSV, and CMYK. Each format describes the same colour in a different way, and different tools and contexts expect different formats: CSS uses HEX and RGB, designers often think in HSL, and print uses CMYK. This converter lets you enter a colour in any common format and instantly get all the others, with one-click copying.

Whether you’re matching a brand colour, building a website, designing a graphic, or just curious what a HEX code looks like in RGB, this tool does the maths instantly and shows a live preview, plus tints and shades to help you build a palette.

How to Use This Color Converter

Pick a colour using the swatch, or type a value into the HEX, RGB, or HSL fields — every other format updates automatically. The “All Formats” section shows HEX, RGB, HSL, HSV/HSB, CMYK, and RGB percentages, each with a Copy button. The tints and shades strip shows lighter and darker variations; click any to select it. The live preview reflects your current colour at all times.

HEX, RGB, HSL, HSV and CMYK Explained

HEX: a six-digit hexadecimal code like #38BDF8, used throughout web design. The pairs represent red, green, and blue from 00 to FF.
RGB: red, green, and blue values from 0–255, the additive colour model used by screens.
HSL: hue (0–360°), saturation (%), and lightness (%) — intuitive for adjusting colours by hand.
HSV / HSB: hue, saturation, and value/brightness — common in design software colour pickers.
CMYK: cyan, magenta, yellow, and key (black) percentages, the subtractive model used in printing.

How HEX and RGB Relate

HEX and RGB describe the same thing — the amount of red, green, and blue — just in different number bases. Each pair of hex digits is a value from 0 to 255 written in base 16. Converting between them is direct.

#38BDF8 splits into three pairs:
38 (hex) = 56 (decimal) → Red
BD (hex) = 189 (decimal) → Green
F8 (hex) = 248 (decimal) → Blue

So #38BDF8 = rgb(56, 189, 248)

When to Use Each Format

Use HEX or RGB for websites and CSS — they’re universally supported. Use HSL when you want to adjust a colour intuitively, such as making it lighter or more muted, because changing one value does one obvious thing. Use HSV/HSB when working in design tools like Photoshop or Figma, which often use it in their pickers. Use CMYK only for print projects, since printers mix ink subtractively — and be aware that screen colours (RGB) don’t always reproduce exactly in CMYK.

💡 HSL is the secret weapon for building colour palettes. Keep the hue fixed and vary lightness to get tints and shades of the same colour, or shift the hue by 30° increments for harmonious complementary and analogous colours. The tints and shades strip above does exactly this.

What is RGBA and Transparency?

RGBA adds an alpha channel to RGB — a fourth value from 0 (fully transparent) to 1 (fully opaque) — letting you create semi-transparent colours in CSS, like rgba(56, 189, 248, 0.5) for a half-transparent sky blue. HEX also supports transparency with an eight-digit form (#38BDF880). Transparency is essential for overlays, shadows, and layering colours on the web. This converter focuses on solid colours, but the HEX and RGB values it gives you are the base you’d add an alpha value to.

Color Models: Additive vs Subtractive

RGB is an additive model: screens emit light, and combining full red, green, and blue produces white. CMYK is a subtractive model: ink absorbs light, and combining cyan, magenta, and yellow produces (near) black, which is why printers add a separate black (K) channel for depth and efficiency. This fundamental difference is why a vivid colour on screen can look duller when printed — the printable CMYK gamut is smaller than the RGB gamut your monitor can display.

Using Colors in Web Design

For web and CSS, you can use HEX (#38BDF8), RGB (rgb(56 189 248)), or HSL (hsl(199 93% 60%)) interchangeably — modern browsers support all three. HSL is increasingly popular because it makes building consistent design systems easier: define a base hue and generate a full scale of tints and shades by varying lightness. Whichever you choose, this converter gives you the exact code to paste into your stylesheet, and the tints/shades help you build accessible colour scales.

Frequently Asked Questions

How do I convert HEX to RGB?

Split the six-digit HEX code into three pairs and convert each from hexadecimal to decimal. For #38BDF8: 38 = 56 (red), BD = 189 (green), F8 = 248 (blue), giving rgb(56, 189, 248). This converter does it instantly — just type or paste a HEX code and read the RGB value, or copy it with one click.

How do I convert RGB to HEX?

Convert each of the red, green, and blue values (0–255) to a two-digit hexadecimal number and join them with a # prefix. For rgb(56, 189, 248): 56 = 38, 189 = BD, 248 = F8, giving #38BDF8. Enter your RGB values in the fields above and the HEX code appears automatically.

What is the difference between HSL and HSV?

Both use hue and saturation, but differ in the third value. HSL uses lightness, where 50% is the pure vivid colour, 100% is white, and 0% is black. HSV (also called HSB) uses value/brightness, where 100% is the brightest version of the colour and 0% is black. HSL is common in CSS; HSV is common in design software colour pickers. This converter shows both.

When should I use CMYK?

Use CMYK only for print projects — business cards, brochures, posters, packaging — because printers mix cyan, magenta, yellow, and black ink. For anything on a screen (websites, apps, social media), use RGB or HEX. Because the CMYK colour range is smaller than RGB, bright screen colours can look duller in print, so always check a proof for critical work.

What does the # mean in a colour code?

The # (hash) simply signals that the following characters are a hexadecimal colour code, used in CSS and HTML. #FF0000 is pure red, #000000 is black, and #FFFFFF is white. The hash itself has no value — it’s a marker. A three-digit shorthand also exists (#F00 = #FF0000) where each digit is doubled.

What is RGBA?

RGBA is RGB with an added alpha (transparency) channel, written as rgba(red, green, blue, alpha) where alpha ranges from 0 (fully transparent) to 1 (fully opaque). For example, rgba(56, 189, 248, 0.5) is a 50% transparent sky blue. It’s used in CSS for overlays, shadows, and layering. HEX can also encode alpha with an eight-digit code.

How do I make a colour lighter or darker?

The easiest way is with HSL: increase the lightness value to make a tint (lighter) or decrease it to make a shade (darker), keeping hue and saturation the same. This produces natural-looking variations of the same colour. The tints and shades strip above does this automatically — click any swatch to select that lighter or darker version.

Is this colour converter free and private?

Yes — it’s completely free with no sign-up, and it runs entirely in your browser. Nothing you enter is uploaded or stored anywhere; all the conversions happen instantly on your device. Use it as much as you like for web design, graphics, print, or learning about colour.