Color Converter Free Online

Free online color converter. Convert HEX to RGB, RGB to HSL, and between all color formats instantly. Includes color preview.

Color Palette

Formats explained

  • HEX — Web standard (#RRGGBB)
  • RGB — Red, Green, Blue (0-255)
  • HSL — Hue, Saturation, Lightness
  • CMYK — Cyan, Magenta, Yellow, Key (print)

Web colours can be expressed in multiple formats - HEX codes (#FF5733), RGB values (rgb(255, 87, 51)), HSL notation (hsl(11, 100%, 60%)), and CMYK values for print. Design tools like Figma and Adobe XD show colours in one format while CSS might require another. This free colour converter converts between all these formats instantly as you type, and includes a visual colour picker so you can select any colour and immediately see all its representations.

How to Use the Color Converter

1

Enter a colour in any format

Type a HEX code (with or without the # prefix), RGB values, HSL values, or CMYK percentages in the corresponding input field. You can also click the colour swatch to open the browser's native colour picker and select a colour visually. The converter accepts HEX codes in both 3-character shorthand (#F53) and 6-character full form (#FF5533).

2

View all format equivalents

As soon as you enter a colour, all other format representations update instantly. You can see the colour in HEX, RGB, HSL, HSV, and CMYK simultaneously. A colour swatch preview shows the actual colour so you can confirm it is the right one.

3

Copy the format you need

Click the Copy button next to any format to copy just that colour value to your clipboard. For example, copy the CSS-ready hex value for your stylesheet, or the RGB values for use in a specific design tool that requires separate R, G, B inputs.

Understanding Colour Formats

HEX (Hexadecimal) - the most widely used format in web development. A 6-character code using hexadecimal digits (0-9, A-F) representing red, green, and blue channels as two digits each. Format: #RRGGBB. Example: #FF5733 means Red=255, Green=87, Blue=51. The 3-character shorthand (#RGB) is available for colours where each channel pair is the same digit twice - #FF5500 can be written as #F50. HEX is used directly in HTML, CSS, SVG, and most design tools.

RGB (Red, Green, Blue) - specifies colour as three values, each from 0 to 255, representing the intensity of red, green, and blue light. Format: rgb(R, G, B). Example: rgb(255, 87, 51). This is the underlying colour model for all screen displays. In CSS, rgb() values are used directly and are equivalent to HEX values. RGB is intuitive if you think of mixing coloured light.

HSL (Hue, Saturation, Lightness) - a more human-intuitive colour model. Hue is a degree value (0-360) representing the colour wheel position: 0/360=red, 60=yellow, 120=green, 180=cyan, 240=blue, 300=magenta. Saturation (0-100%) controls colour intensity: 0% is grey, 100% is fully saturated. Lightness (0-100%) controls brightness: 0% is black, 50% is normal, 100% is white. HSL is especially useful in CSS when you want to generate colour variations programmatically - you can darken a colour by reducing Lightness, or create a muted version by reducing Saturation, without changing the Hue.

CMYK (Cyan, Magenta, Yellow, Key/Black) - a subtractive colour model used in colour printing. Where RGB uses light, CMYK uses ink. Values are percentages (0-100%). CMYK is the standard for professional print work - when preparing designs for print, you need CMYK values rather than RGB, because screens and printers mix colour differently. Note that CMYK-to-RGB conversion is approximate because these are different physical colour spaces.

When You Need Each Colour Format

Use HEX in HTML attributes, CSS properties (color, background-color, border-color), SVG fill and stroke attributes, and when sharing colour codes in design handoffs and style guides. HEX is the most compact text representation and universally understood.

Use RGB in CSS where you need to separate the channel values for manipulation, in Canvas API JavaScript code, in some image processing libraries, and when opacity is needed (use rgba() with a fourth alpha value).

Use HSL in CSS when you want to programmatically modify colours - create hover states by reducing lightness 10%, create a tint by increasing lightness, create a shade by decreasing lightness. HSL makes these operations intuitive without recalculating hex or RGB values.

Use CMYK when preparing designs for professional printing - brochures, business cards, posters, packaging. Always provide CMYK values to print shops rather than RGB, as RGB colours will look different when printed.

Frequently Asked Questions

What colour formats does the converter support?
The converter supports HEX (both 3-character and 6-character), RGB (0-255 per channel), RGBA (with alpha/opacity), HSL (hue 0-360°, saturation 0-100%, lightness 0-100%), HSV/HSB (an alternative to HSL used in Photoshop and many design tools), and CMYK (0-100% per channel). Enter a colour in any format and all other representations appear instantly alongside a visual colour swatch preview.
What is the difference between RGB and HEX colour codes?
HEX and RGB represent the same colour model (red, green, blue channels) in different notations. HEX #FF5733 and rgb(255, 87, 51) represent the exact same colour. HEX uses base-16 (hexadecimal) where each two characters represent one channel: FF=255 red, 57=87 green, 33=51 blue. RGB uses base-10 (decimal). They are mathematically equivalent - the only difference is notation. CSS accepts both formats interchangeably.
When should I use HSL instead of HEX or RGB?
HSL is most useful when you want to create colour variations programmatically. For example, to create a hover state that is 10% darker: just subtract 10 from the Lightness value in HSL. To create a button shade: reduce Lightness by 15. To create a tint: increase Lightness by 15. Doing the equivalent in HEX or RGB requires recalculating all three channel values separately, which is much less intuitive. CSS HSL is fully supported in all modern browsers and is increasingly preferred for design systems and colour theming.
Why do CMYK colours look different from RGB when printed?
RGB and CMYK are different colour spaces with different gamuts (ranges of possible colours). RGB screens can display very bright, saturated colours that cannot be reproduced accurately with ink on paper. When you convert from RGB to CMYK, some vivid RGB colours must be shifted to the nearest achievable CMYK colour. This is why designs made in RGB can look slightly duller when printed in CMYK. Professional print workflows always start in CMYK to ensure what you see on screen closely matches the printed output.
Can I get CSS-ready colour values from the converter?
Yes. All output formats are shown as CSS-ready values. HEX values are shown with the # prefix. RGB values are shown as rgb(R, G, B) ready to paste directly into CSS. HSL values are shown as hsl(H, S%, L%). Click the Copy button next to any format to copy it to your clipboard. The copied value can be pasted directly into your CSS stylesheet or design tool.