Công Cụ Nhanh
VI: Chuyển sang tiếng Việt

Color converter: HEX, RGB, HSL and CMYK

Accepts HEX, rgb(), hsl(), hsv(), cmyk() or a CSS colour name such as tomato.

Formats

HEX
#2448e0
RGB
rgb(36, 72, 224)
HSL
hsl(229, 75.2%, 51%)
HSV / HSB
hsv(229, 83.9%, 87.8%)
CMYK
cmyk(83.9%, 67.9%, 0%, 12.2%)

CMYK here is a simple conversion formula without a printer's ICC profile, so printed results may differ.

Contrast (WCAG 2.2)

Sample text Aa

This colour as text on white

Ratio 6.82:1

  • AA normal text: pass
  • AA large text: pass
  • AAA normal text: fail
  • AAA large text: pass

Sample text Aa

This colour as text on black

Ratio 3.08:1

  • AA normal text: fail
  • AA large text: pass
  • AAA normal text: fail
  • AAA large text: fail

Sample text Aa

Against another colour

Ratio 6.31:1

  • AA normal text: pass
  • AA large text: pass
  • AAA normal text: fail
  • AAA large text: pass

Tints (mixed with white)

Shades (mixed with black)

CSS

color: #2448e0;
color: rgb(36, 72, 224);
color: hsl(229, 75.2%, 51%);
--brand: #2448e0;

Processed in your browser. Your files and data are never uploaded to a server.

Quick answer

The same colour can be written many ways: #336699 = rgb(51, 102, 153) = hsl(210, 50%, 40%). HEX is three base-16 pairs for red, green and blue; HSL describes hue (0–360°), saturation and lightness, which makes lighter and darker variants easy. Body text needs a contrast ratio of at least 4.5:1 against its background to meet WCAG AA.

What are HEX, RGB and HSL colour codes?

Convert between HEX (3, 4, 6 or 8 digits), rgb()/rgba(), hsl()/hsla(), HSV, CMYK and the 148 CSS colour names, with a colour picker and a checkerboard preview for transparent colours. You also get WCAG 2.2 contrast for the colour as text on white, on black or on a background you choose (pass / fail for AA and AAA, normal and large text), nine tints and nine shades you can copy with a click, and a ready-to-paste CSS snippet.

Illustration of a painter's palette with round paint blobs, a dropper lifting an orange drop, and three colour swatch cards fanned out beside it

How to convert colours

  1. 1

    Type or paste a colour in any format (#2448e0, rgb(36 72 224), hsl(229 75% 51%), tomato…), or click the swatch to pick one visually.

  2. 2

    Read the HEX, RGB, HSL, HSV/HSB, CMYK and matching CSS name, and copy the line you need.

  3. 3

    Check “Contrast”: the colour as text on white, black and your own background colour, with pass / fail for each WCAG level.

  4. 4

    Click any tint or shade to copy a lighter or darker version of the same hue, or copy the CSS block.

Common colour models

ModelExample (same colour)Where it's used
HEX#336699CSS, Figma, brand guidelines
RGBrgb(51, 102, 153)CSS, graphics programming, screens
HSLhsl(210, 50%, 40%)CSS; easy lighter / darker and hover states
HSV / HSBhsv(210, 66.7%, 60%)Colour pickers in Photoshop and Illustrator
CMYKcmyk(66.7%, 33.3%, 0%, 40%)Print (needs the printer's ICC profile)

WCAG 2.2 contrast thresholds

Ratios run from 1:1 (same colour) to 21:1 (black on white). Large text means at least 18pt (24 px) regular or 14pt (about 18.7 px) bold.

LevelNormal textLarge textNotes
AA≥ 4.5:1≥ 3:1The minimum most websites should meet
AAA≥ 7:1≥ 4.5:1Enhanced; good for long-form reading
UI components≥ 3:1≥ 3:1Input borders, icons, focus indicators (criterion 1.4.11)

Swipe sideways to see the whole table →

For example, grey #767676 on white is 4.54:1, just passing AA; #777777 is only 4.48:1 and fails.

Real-world examples

Brand colour from Figma to CSS

The designer sends #2448E0. Paste it to get rgb(36, 72, 224) and hsl(229, 75.2%, 51%), then build a darker hover colour by lowering the lightness instead of guessing a HEX code.

Is the button text readable?

White text on an orange #f97316 button is only about 2.8:1, failing AA for normal text. Try darker steps from the shades row until the ratio passes 4.5:1.

A light-to-dark scale for a design system

From one primary colour, the nine tints and nine shades give ready-made values for subtle backgrounds, borders and strong text; click a swatch to copy it.

Sending a colour to the printer

The CMYK value here is a good estimate, but real ink depends on paper and press. Send the HEX too and ask the printer to match it with their ICC profile or a Pantone reference.

Common problems and fixes

An 8-digit HEX has the wrong transparency.
In CSS the last two digits are alpha: #2448e080 is about 50% opaque. Some software (older Android) puts alpha first (#AARRGGBB), so check the order.
Printed colour doesn't match the screen.
Screens mix light (RGB) and printers mix ink (CMYK), which has a smaller gamut; very vivid RGB colours such as neon green can't be printed exactly. You need the printer's ICC profile for an accurate conversion.
Light grey text on white is hard to read.
Check the ratio: below 4.5:1 fails AA for normal text. #767676 is the lightest grey that still passes on white.
The colour isn't recognised.
Check the HEX digit count (3, 4, 6 or 8), the brackets in rgb() or hsl(), and that names are CSS names like tomato or steelblue.
Transparent colours give odd contrast ratios.
A colour with alpha is composited over its background before the calculation, exactly as the eye sees it; the more transparent, the closer the ratio gets to 1:1.

How HEX, RGB and HSL relate

RGB describes a colour by the intensity of its red, green and blue channels, each 0–255. HEX is just RGB written in base 16: 0x33 = 51, 0x66 = 102, 0x99 = 153, so #336699 = rgb(51, 102, 153). HSL re-expresses that colour as hue (position on the colour wheel), saturation and lightness, so a lighter version only needs a higher L with the same hue.

How contrast is calculated

WCAG computes each colour's relative luminance (after removing sRGB gamma, with green weighted most at 0.7152) and then takes (lighter + 0.05) / (darker + 0.05). That's why yellow on white is nearly invisible despite the different hue, while dark blue on white contrasts very well.

Glossary

Hue
The position on the colour wheel: 0° red, 120° green, 240° blue.
Saturation
How vivid or grey a colour is; 0% is fully grey.
Alpha
Opacity, from 0 (fully transparent) to 1 (solid).
Tint / shade
A colour mixed with white (tint) or black (shade).
WCAG
The W3C's Web Content Accessibility Guidelines, currently version 2.2.
ICC profile
A file describing how a device reproduces colour, needed for accurate RGB to CMYK conversion.

Frequently asked questions

How do I convert HEX to RGB?

Split it into three pairs and convert each from base 16 to base 10: #FF8800 → FF = 255, 88 = 136, 00 = 0, giving rgb(255, 136, 0). The tool does this as you type.

What is a 3-digit HEX code?

A shorthand when each pair has two identical digits: #f80 = #ff8800.

Can I use the CMYK values for print?

As an estimate. An exact conversion needs the printer's ICC profile and paper type, so send the HEX along and ask the printer to match it.

Which colours pass contrast on white?

Any colour with a ratio of 4.5:1 or more for normal text. The tool shows the ratio and marks pass or fail for AA and AAA.

What's the difference between HSV and HSL?

Both use hue and saturation, but HSL has lightness (L = 100% is always white) while HSV has value (V = 100% is the most vivid). Photoshop's HSB is the same as HSV.

Is the colour I pick sent anywhere?

No. All conversions and contrast checks run in your browser.

Ratings and comments

Loading…