How do I convert HEX to RGB?

Paste the HEX code into the converter and copy the RGB value. By hand, split the code into three pairs and convert each from base 16 to decimal: #2a9d8f becomes 42, 157 and 143.

How do I convert RGB to HEX?

Type the RGB value, for example rgb(42, 157, 143) or just 42, 157, 143, and copy the HEX. Each channel becomes two hexadecimal digits: 42 is 2a, 157 is 9d, 143 is 8f.

What is the difference between HSL and HSV?

Both use a hue angle, but HSL's lightness runs from black through the pure colour to white, while HSV's value runs from black to the pure colour only. CSS understands HSL; HSV (also called HSB) is used in the colour pickers of design apps.

What is OKLCH and why use it?

OKLCH describes colour by perceived lightness, chroma and hue. Unlike HSL, the same lightness looks equally light for every hue, so scales and contrast stay predictable when you change the hue. All current browsers support oklch() in CSS.

Can I convert colours with transparency?

Yes. Enter an 8-digit HEX, rgb() with a slash alpha, rgba() or hsla(), or use the Alpha slider. Every CSS notation then includes the alpha value.

Is the CMYK value accurate for printing?

It is the standard mathematical conversion used by web tools. Real print output depends on the paper, inks and colour profile, so for brand-critical print work, confirm the values with your printer or in a profile-aware app.

How many CSS named colours are there?

CSS defines 148 named colours, including rebeccapurple and the grey and gray spellings. The converter accepts all of them and shows the nearest name for any colour you enter.

Color Converter: HEX, RGB, HSL, CMYK, OKLCH

Przeliczaj kolory między HEX, RGB, HSL, HSV, CMYK i OKLCH. Wszystko działa lokalnie — nic nie jest wysyłane.

Wejście: HEX · RGB · HSL · HSV · CMYK · OKLCH · CSS names
Wyjście: HEX · RGB · HSL · HSV · CMYK · OKLCH

Formats

#2a9d8f

Nearest CSS name:

Opacity 100%

Alpha100%

HEX#2a9d8f
HEX8#2a9d8fff
RGBrgb(42 157 143)
RGB(A)rgb(42, 157, 143)
HSLhsl(172.7 57.8% 39%)
HSV / HSBhsv(172.7, 73.2%, 61.6%)
HWBhwb(172.7 16.5% 38.4%)
CMYKcmyk(73.2%, 0%, 8.9%, 38.4%)
OKLCHoklch(63.04% 0.1013 183.03)
OKLaboklab(63.04% -0.1012 -0.0054)

CMYK uses the standard device formula. Printed colour depends on the paper and the printer's profile.

Variations

click to use

Tints (towards white)

Shades (towards black)

Tones (towards grey)

Complementary

#2a9d8f

#9d2a38

Analogous

#2a9d56

#2a9d8f

#2a729d

Triadic

#2a9d8f

#8f2a9d

#9d8f2a

Split complementary

#2a9d8f

#9d2a72

#9d552a

Tetradic

#2a9d8f

#552a9d

#9d2a38

#729d2a

Convert any colour to every notation

Paste a colour in any format and this colour converter shows it in all the others at once: HEX, RGB, HSL, HSV/HSB, HWB, CMYK, OKLCH, OKLab and the nearest CSS colour name. Transparency is kept throughout, and below the values you get tints, shades and tones of the colour plus complementary, analogous and triadic harmonies, each one a click away from becoming the new input. Everything is calculated in your browser as you type.

How to convert HEX to RGB (or anything else)

Type or paste a colour into the field: #2a9d8f, rgb(42 157 143), hsl(173 58% 39%), cmyk(73%, 0%, 9%, 38%), oklch(62% 0.1 183) or a name like teal. Or pick one with the colour picker.
Every notation updates instantly. Press the copy button next to the one you need.
Drag the Alpha slider to make the colour translucent; the 8-digit HEX and the alpha-aware CSS functions follow.
Click any tint, shade, tone or harmony swatch to make it the new colour and keep exploring.

The notations, and when to use each

HEX: #rrggbb, or #rrggbbaa with alpha. The short form #rgb doubles each digit. The default in design tools and CSS.
RGB: Red, green and blue from 0 to 255. Modern CSS writes rgb(42 157 143 / 50%); the older rgba(42, 157, 143, 0.5) still works everywhere.
HSL: Hue in degrees, saturation and lightness in percent. Easy to tweak by hand, but 50% lightness is not equally bright across hues: yellow looks far lighter than blue.
HSV / HSB: Hue, saturation and value (or brightness). The model behind the colour pickers in Photoshop, Figma and most design apps. Not valid in CSS.
HWB: Hue plus how much white and black to mix in. Valid CSS since Color Level 4 and intuitive for making pastel or muted variants.
CMYK: Cyan, magenta, yellow and key (black) ink percentages for print. The values here use the standard device formula; real print colour depends on the paper and the printer's colour profile.
OKLCH: Lightness, chroma and hue in a perceptually uniform space. Equal lightness looks equally light across hues, which makes it the best choice for building colour scales and accessible palettes. Supported in all current browsers.
CSS names: The 148 keywords such as tomato, rebeccapurple and slategray. The converter shows the nearest one, and marks it when the match is exact.

HEX to RGB by hand

A HEX colour is three pairs of base-16 digits. Split #2a9d8f into 2a, 9d and 8f, then convert each pair: 2a is 2 × 16 + 10 = 42, 9d is 9 × 16 + 13 = 157 and 8f is 8 × 16 + 15 = 143, so the colour is rgb(42, 157, 143). Going the other way, divide each channel by 16: the quotient is the first digit and the remainder the second. An 8-digit HEX adds a fourth pair for alpha, where ff is fully opaque and 80 is about 50%.

Conversions between HEX, RGB, HSL, HSV and HWB are exact, apart from rounding. CMYK is an approximation by nature, and OKLCH colours that fall outside the sRGB range a screen can show are brought back in by lowering the chroma, keeping the lightness and hue you asked for.

Which notation should you use in CSS?

Every current browser understands all of HEX, rgb(), hsl(), hwb() and oklch(), so the choice is about what is easiest to read and maintain. HEX is compact and is what designers hand over, so it remains the safe default for one-off values. HSL is convenient when you want to nudge a colour by hand, for example a slightly lighter hover state.

For a design system, OKLCH is increasingly the better choice. Because its lightness is perceptual, a set of brand colours that share the same L value really do look equally light, and you can derive a whole scale by changing only one number. It can also describe the more vivid colours of wide-gamut P3 screens, which HEX and rgb() cannot. Keep in mind that HSV, HSB and CMYK are not valid CSS: they are here for moving values between design and print tools.

Tints, shades, tones and harmonies

A tint mixes the colour with white, a shade with black and a tone with grey. The three rows step from the original colour in 10% increments, which gives you hover states, borders and backgrounds that obviously belong together.

Harmonies rotate the hue around the colour wheel: complementary is the opposite hue, analogous its neighbours 30° either side, triadic three hues 120° apart, split-complementary the two hues beside the complement, and tetradic four hues 90° apart. They are a starting point for accents, not a rule: always check text colours with the contrast checker. To build a palette from a photo instead, use the color palette generator.

Najczęstsze pytania

How do I convert HEX to RGB?: Paste the HEX code into the converter and copy the RGB value. By hand, split the code into three pairs and convert each from base 16 to decimal: #2a9d8f becomes 42, 157 and 143.
How do I convert RGB to HEX?: Type the RGB value, for example rgb(42, 157, 143) or just 42, 157, 143, and copy the HEX. Each channel becomes two hexadecimal digits: 42 is 2a, 157 is 9d, 143 is 8f.
What is the difference between HSL and HSV?: Both use a hue angle, but HSL's lightness runs from black through the pure colour to white, while HSV's value runs from black to the pure colour only. CSS understands HSL; HSV (also called HSB) is used in the colour pickers of design apps.
What is OKLCH and why use it?: OKLCH describes colour by perceived lightness, chroma and hue. Unlike HSL, the same lightness looks equally light for every hue, so scales and contrast stay predictable when you change the hue. All current browsers support oklch() in CSS.
Can I convert colours with transparency?: Yes. Enter an 8-digit HEX, rgb() with a slash alpha, rgba() or hsla(), or use the Alpha slider. Every CSS notation then includes the alpha value.
Is the CMYK value accurate for printing?: It is the standard mathematical conversion used by web tools. Real print output depends on the paper, inks and colour profile, so for brand-critical print work, confirm the values with your printer or in a profile-aware app.
How many CSS named colours are there?: CSS defines 148 named colours, including rebeccapurple and the grey and gray spellings. The converter accepts all of them and shows the nearest name for any colour you enter.

Powiązane narzędzia

Zobacz wszystkie narzędzia

Sprawdzanie kontrastu WCAGSprawdź kolory tekstu i tła pod kątem WCAG AA i AAA.Generator palety kolorówWyciągnij dominujące kolory z dowolnego zdjęcia jako HEX, RGB i HSL.Generator faviconWszystkie rozmiary favicon, prawdziwy wielorozmiarowy .ico i manifest aplikacji z jednego obrazu.Konwerter obrazówPrzekoduj, przeskaluj i zwektoryzuj obrazy z podglądem przed/po na żywo.Data StudioPrzenoś tekst strukturalny między JSON, YAML, TOML, CSV i Markdown.Kompresja i archiwaZmniejsz dowolny plik za pomocą gzip lub Brotli albo spakuj folder do ZIP-a.