Skip to content

Color Converter – HEX, RGB, HSL and OKLCH

Type or pick any colour to get it in every common CSS format, and see at a glance whether text in that colour is readable on white or black.

HEX, rgb(), hsl(), oklch() or a name like “teal”.

Formats

  • hex#6366F1
  • rgbrgb(99 102 241)
  • hslhsl(239 84% 67%)
  • oklchoklch(58.5% 0.204 277.1)

Text contrast (WCAG)

On white
4.47:1
AA Large pass (large text only)
On black
4.70:1
AA pass

How to convert a colour

  1. Enter a colour in the box, for example #6366F1, rgb(99 102 241), hsl(239 84% 67%) or a name like teal. You can also press Pick a colour to use your device's colour picker.
  2. Check the preview. A large swatch shows the colour with sample text in white and in black on top of it.
  3. Copy the format you need. The Formats list shows HEX, RGB, HSL and OKLCH, each with its own copy button.
  4. Check the contrast. The Text contrast panel shows the ratio against white and against black, and the highest WCAG level the colour reaches.

Features

  • Four output formats at once: HEX, RGB, HSL and OKLCH, ready to paste into CSS.
  • Flexible input: 3, 4, 6 and 8-digit HEX, rgb(), hsl(), oklch(), modern and legacy syntax, and CSS colour names.
  • Transparency support, with alpha shown in every format.
  • Native colour picker on phones and computers.
  • WCAG 2 contrast ratio on white and on black, labelled AAA, AA, AA Large or Fails AA.
  • Live preview swatch with sample text in both white and black.
  • Friendly error message with examples when a value can't be read.

Why use Fileora's colour converter

It does the maths in your browser, so there is nothing to wait for and nothing is sent anywhere, including unreleased brand colours. It's free, has no sign-up, and it works on a phone, which helps when you are matching a colour you have just seen on screen.

Pairing a colour conversion with a contrast check saves a step: you find out whether a brand colour is safe for buttons and links before it reaches a design review.

HEX, RGB, HSL and OKLCH compared

HEX is the most compact and the most widely supported format. #6366F1 is simply the red, green and blue values written in base 16. It is ideal for design handoffs but hard to adjust by eye.

RGB holds the same information as whole numbers from 0 to 255. It is useful when a colour comes from code, such as a canvas or an image library.

HSL splits a colour into hue, saturation and lightness, so you can make a colour lighter without changing its hue. Its weakness is that lightness is not perceptual: yellow at 50% lightness looks far brighter than blue at 50%.

OKLCH fixes that. Its lightness follows human vision, so you can build a scale of shades where each step looks evenly spaced, or swap hues while keeping text contrast similar. For design tokens and themes it is usually the best choice, with HEX kept as a fallback for older tools.

Getting contrast right

Aim for at least 4.5:1 for body text and 3:1 for large headings and icons. Mid-tones often pass on one background but fail on the other, so check both white and black if your site has a dark mode. If a brand colour fails, lower its OKLCH lightness a little for text and keep the original for backgrounds and borders.

When you need to embed a small icon in that colour directly in your CSS, the image to Base64 converter turns it into a data URI. You can also turn a colour-coded link into a scannable code with the QR code generator, and keep theme files tidy with the JSON formatter.

Frequently asked questions

How do I convert HEX to RGB?

Type or paste the HEX code, with or without the #, into the Colour box. The RGB value appears straight away in the Formats list, together with HSL and OKLCH. Press the copy button next to the one you need. Three, four, six and eight-digit HEX codes are all accepted.

Which colour formats can I type in?

HEX codes, rgb() and rgba(), hsl() and hsla(), oklch(), and CSS colour names such as teal, crimson or rebeccapurple. Both the modern space-separated syntax, like rgb(99 102 241 / 0.5), and the older comma syntax, like rgba(99, 102, 241, 0.5), work.

What is OKLCH and why would I use it?

OKLCH describes a colour by lightness, chroma (how colourful it is) and hue. Unlike HSL, its lightness matches how bright colours actually look to people, so two colours with the same L value have similar visual weight. That makes it easier to build consistent palettes and hover states. All current major browsers support oklch() in CSS.

What do AA, AAA and AA Large mean?

They are levels from the Web Content Accessibility Guidelines (WCAG 2). Normal body text needs a contrast ratio of at least 4.5:1 for AA and 7:1 for AAA. Large text, roughly 24px, or about 19px when bold, needs 3:1 for AA. If a colour fails even 3:1, don't use it for text on that background.

Is transparency kept when converting?

Yes. An alpha value from an eight-digit HEX code or a / 0.5 style value is carried into every output format. The contrast check always uses the solid version of the colour, because the real contrast of a see-through colour depends on what is behind it.

Why does my colour look slightly different in another app?

Values are converted to standard sRGB and rounded to whole numbers for RGB and HSL. An OKLCH colour that lies outside the sRGB range is clipped to the nearest colour a normal screen can show. The difference is usually too small to see.

Related tools

Can't find the tool you need, or something isn't working?

Tell us which tool you'd like next or what went wrong. We read every message, and requests decide what we build next.

Request a toolReport a problem

Opens your email app. Please don't attach private files.