Palz Tools
English
Menu

Color Code Converter

Type a colour code in any format, or pick one, to get its HEX, RGB, HSL, HSV, CMYK and OKLCH values together, each ready to copy, with contrast checks and lighter and darker variants.

HEX, rgb(), hsl(), hsv(), cmyk() or a colour name like teal.

Read as HEX · Nearest CSS name: ≈ Dark orange

HEX
#FF8000
RGB
rgb(255, 128, 0)
HSL
hsl(30, 100%, 50%)
HSV / HSB
hsv(30, 100%, 100%)
CMYK
cmyk(0%, 50%, 100%, 0%)
OKLCH (CSS)
oklch(73.19% 0.1858 52.98)
Integer (0xRRGGBB)
16744448
Android ARGB
#FFFF8000
  • As text on white: 2.51:1 · fails WCAG for text
  • As text on black: 8.33:1 · passes WCAG AAA for all text
  • Best text on this colour: black

CMYK here is the simple screen formula; a print shop's colour profile can give different values.

Tints (mixed with white)

Shades (mixed with black)

How to use the colour code converter

  1. Type or paste a colour: #2E8B57, rgb(46, 139, 87), hsl(146, 50%, 36%), cmyk(67, 0, 37, 45) or a CSS name like seagreen. Or use the picker.
  2. Read every format at once and press Copy next to the one you need. Alpha (opacity) carries through to HEX8, rgba() and hsla().
  3. Check the contrast on white and black, and click a tint or shade to convert that colour instead.

What each format means

  • HEX (#RRGGBB): red, green and blue as two hexadecimal digits each, 00 to FF. Used in HTML, CSS and most design tools.
  • RGB: the same three channels as numbers from 0 to 255.
  • HSL: hue (0–360° around the colour wheel), saturation and lightness in %. Easy to adjust by hand: raise the lightness for a paler version.
  • HSV / HSB: hue, saturation and value (brightness), as in Photoshop's and Figma's colour pickers.
  • CMYK: cyan, magenta, yellow and black ink in %, for print.
  • OKLCH: lightness, chroma and hue in a perceptual space, written as CSS oklch().
  • Integer and Android ARGB: the 24-bit number some code and chat apps use for colours, and the #AARRGGBB form Android uses.

Worked example: sea green

#2E8B57 is rgb(46, 139, 87). The largest channel is green (139), so the hue sits in the green-cyan part of the wheel at 146.5°. Lightness is the average of the largest and smallest channels, (139 + 46) ÷ 2 ÷ 255 = 36.3%. For CMYK, K = 1 − 139/255 = 45.5%, and C = (1 − 46/255 − 0.455) ÷ (1 − 0.455) = 66.9%. Its contrast is 4.24:1 on white and 4.94:1 on black, so black text reads slightly better on it.

Formulas: CSS Color Module Level 4 (HSL, HSV and OKLCH via OKLab by Björn Ottosson) and WCAG 2.2 contrast. Everything runs in your browser.

Frequently asked questions

How do I convert HEX to RGB?

Split the six digits into three pairs and turn each pair from hexadecimal into a number from 0 to 255. #2E8B57 is 2E = 46, 8B = 139 and 57 = 87, so rgb(46, 139, 87). Three-digit codes double each digit first: #F80 is #FF8800. An eighth and ninth digit, as in #2E8B5780, is the alpha (opacity): 80 is 128 of 255, about 50%.

Why do some HSL values have decimals?

A HEX code holds whole RGB numbers from 0 to 255, and whole-number HSL can't always point back to the same one. Sea green, #2E8B57, is often written hsl(146, 50%, 36%), but that is really rgb(46, 138, 86), a step off in two channels. The converter shows hsl(146.5, 50.3%, 36.3%) so that copying it gives back exactly #2E8B57. Most colours still come out as whole numbers.

Is the CMYK value right for printing?

It's the standard screen formula (K = 1 − the largest of R, G and B), which is what most converters show. Printers convert with a colour profile for their press and paper, so a print shop's CMYK for the same colour can differ. Use these numbers as a starting point and check a proof for brand colours.

What is OKLCH and when should I use it?

OKLCH is a newer way to write colours in CSS: lightness, chroma (how colourful) and hue, in a space where equal steps look equally different to the eye. It's useful for making even palettes and accessible light/dark variants. All current major browsers support oklch() in CSS; keep a HEX fallback if you support very old browsers.

Which text colour should I use on my background?

The tool shows the WCAG contrast ratio of the colour against white and black and suggests the one with more contrast. Normal text needs at least 4.5:1 (AA) and large text 3:1. For example #767676 on white is 4.54:1, just enough for AA, while #777777 is 4.47:1 and fails.

More image tools

Color PickerPick a colour with a square, hue and opacity sliders or an eyedropper, and copy its HEX, RGB, HSL, HSV, CMYK or OKLCH code; save colours you like.Org Chart MakerOrganizational charts (organograms) for a company or team: names, titles, departments and photos, keyboard and drag editing, spreadsheet import, PNG, SVG, PDF.Image to Text Converter (OCR)Extract text from photos, screenshots and scanned PDFs in 21 languages, including Hindi, Tamil and Spanish. Runs in your browser.JPG to Word ConverterTurn a JPG, PNG, photo or scan into an editable Word (.docx) file with OCR in 21 languages, line by line or as paragraphs, with the picture if you want it. No upload.Image to SVG ConverterVectorize a PNG or JPG logo, icon or drawing into SVG with 2–64 colours, three detail levels and a transparent background.SVG OptimizerShrink SVG files with SVGO: paste or open several, set precision, prettify or make responsive, strip scripts.

See all image tools →

Can't find the tool you need? Tell us, and the most requested tools get built first.