Hex Color Picker

This hex color picker converts one colour into every format you need. Pick a colour or paste a HEX, RGB or HSL value, then copy the HEX, RGB, HSL or OKLCH code with one click. It also shows lighter tints, darker shades and the contrast ratio against white and black text.

One colour in each format the picker outputs
Format	Example	Typical use
HEX	#4F98FB	CSS, design tools, brand guides
RGB	rgb(79, 152, 251)	CSS and code that needs separate channels
HSL	hsl(215, 95%, 65%)	Adjusting lightness or saturation by hand
OKLCH	oklch(68.0% 0.164 256.7)	Modern CSS palettes with even lightness

Updated October 12, 2026

What does the AA large text pass mean?

It means the colour has at least 3:1 contrast with that text colour, enough for large text but not body copy. The picker grades three levels: AA for normal text needs 4.5:1, AA large needs 3:1 and AAA normal needs 7:1. WCAG counts text as large from 18 point, or 14 point bold, so a colour that only passes AA large suits headings and big buttons. Source: WCAG 2.2, Contrast (Minimum).

Which colour formats can I type into the picker?

Three-digit or six-digit hex, rgb() and hsl(), with or without the # sign. You can also paste rgba() or hsla() values; the picker reads the colour and ignores the alpha part. If the box turns red, the value was not understood. Clicking any tint or shade swatch loads that colour as the new starting point.

How do I convert a color between HEX, RGB, HSL, and OKLCH?

Short answer: We.Inc's free Hex Color Picker lets you pick a color or paste a HEX, RGB, or HSL value and get it converted into every format, including OKLCH. It also shows a scale of tints and shades and checks how readable text is against white and black.

Key facts

A hex color code is a six-digit code written as # followed by three pairs of hexadecimal digits for red, green, and blue, so #FF0000 is pure red.
HSL describes color as hue, saturation, and lightness, while HEX and RGB give red, green, and blue amounts directly.
OKLCH is a newer CSS color format where two colors with the same L value look equally light, and all current major browsers support it.
Contrast is calculated with the WCAG 2 formula: relative luminance of the lighter color plus 0.05, divided by that of the darker color plus 0.05.
For buttons, the tool recommends aiming for at least 4.5 to 1 contrast between the label and the button color.

Summary checked against this page on September 25, 2026.

Pick a colour or paste any HEX, RGB or HSL value to get every format you need for design and code: HEX, RGB, HSL and OKLCH. See a scale of tints and shades, and check how readable text is on it against white and black. To check a hex code you already have, paste it into the box: the large swatch shows the colour, and the other formats update straight away.

How it works

Use the colour picker, or type a value such as #4F98FB, rgb(79, 152, 251) or hsl(215, 95%, 65%). The # is optional, and three-digit shorthand like #39F works too.
To view or check a hex code, paste it in. If the code is not valid (for example it has a letter past F, or the wrong number of digits) the box turns red.
Copy any format with one click. OKLCH is the modern CSS format that keeps lightness consistent across hues.
Click any tint or shade to make it the current colour.
Read the contrast ratios to decide whether white or black text belongs on this colour.

Hex, RGB and HSL explained

Every colour on a screen is a mix of red, green and blue light. A hex code writes those three amounts as pairs of base-16 digits, from 00 (none) to FF (full, which is 255). So #FF0000 is full red with no green or blue, #808080 is a mid grey, and #4F98FB is a little red, a fair amount of green and nearly full blue, which reads as a clear sky blue.

RGB says exactly the same thing in ordinary numbers: rgb(79, 152, 251). HSL describes the colour the way people tend to think about it: hue is the position on a colour wheel from 0 to 360 degrees, saturation is how vivid it is, and lightness runs from black at 0% to white at 100%. To make a colour a bit darker, lowering the lightness in HSL is far easier than guessing new hex digits.

OKLCH is the newest of the four. Its lightness value is designed to match how bright colours look to people, so a yellow and a blue with the same L look about equally light. That makes it a reliable format for building evenly spaced palettes.

Which format should you use?

Use hex when you share a colour with someone else, paste it into a design tool, or set brand colours in a website builder: almost every tool accepts it. Use RGB or HSL in CSS when you want to add transparency or tweak a colour by hand. Use OKLCH when you are building a full palette in CSS and want lightness to stay consistent across different hues.

Whichever you pick, they describe the same colour. Copying the value from this page in a different format will not change how it looks.

Choosing a brand colour that works on a website

A brand colour has to do several jobs: stand out on buttons, stay readable behind white text, and not tire the eye across a whole page. Mid-tone blues, greens and deep reds usually manage all three. Very light colours (yellow, pastel pink) look good in a logo but make poor buttons, because neither white nor black text reads well on them without adjustment.

The contrast panel shows this immediately. If white text scores under 4.5:1, either use black text or pick a darker shade from the scale for buttons.

Tints, shades and a simple palette

Tints mix your colour with white; shades mix it with black. A practical website palette needs only a few: a very light tint for section backgrounds, the main colour for buttons and links, and one darker shade for hover states. Add neutral greys for text and borders and you have a complete, consistent set.

To check a specific text and background pair (for example grey text on a tinted background), use the color contrast checker, which scores both WCAG AA and AAA.

Tips

For buttons, aim for at least 4.5:1 contrast between the label and the button colour.
Build a palette from one brand colour: a light tint for backgrounds, the colour itself for buttons, a dark shade for hover states and text.
Screens differ. Check your brand colour on a phone as well as a laptop.

Frequently asked questions

What is a hex colour code?

A six-digit code for a colour on screen, written as # followed by three pairs of hexadecimal digits for red, green and blue. #FF0000 is pure red; #000000 is black; #FFFFFF is white.

What is the difference between HEX, RGB and HSL?

They describe the same colours in different ways. HEX and RGB give the red, green and blue amounts. HSL gives hue (the angle on a colour wheel), saturation and lightness, which is easier to adjust by hand.

What is OKLCH and should I use it?

OKLCH is a newer CSS colour format based on how people perceive colour. Two colours with the same L value look equally light, which makes consistent palettes easier. All current major browsers support it.

How is contrast calculated?

Using the WCAG 2 formula: relative luminance of the lighter colour plus 0.05, divided by that of the darker colour plus 0.05. For a full two-colour check, use the We.Inc color contrast checker.

How do I check what colour a hex code is?

Paste the code into the box at the top of this page. The swatch shows the colour, and you get the matching RGB, HSL and OKLCH values plus lighter and darker versions. If the box turns red, the code is not a valid three- or six-digit hex value.

What does a three-digit hex code like #F80 mean?

It is shorthand where each digit is doubled. #F80 is the same colour as #FF8800. Only colours whose pairs repeat can be written this way.

Are hex codes case-sensitive?

No. #4f98fb and #4F98FB are the same colour. Pick one style and keep it consistent in your code so values are easy to search for.

How do I convert hex to RGB by hand?

Split the six digits into three pairs and convert each pair from base 16 to base 10. For #4F98FB: 4F is 4 x 16 + 15 = 79, 98 is 9 x 16 + 8 = 152, FB is 15 x 16 + 11 = 251, so the colour is rgb(79, 152, 251). The picker does this for you.

How do I get the hex code of a colour on my screen?

Click the small colour square next to the text box to open your browser's colour picker. Some browsers include an eyedropper there that can sample a colour from the screen; if yours does not, take a screenshot and use an eyedropper in any image editor, then paste the code here.

Start for free or see how the We.Inc AI website builder works. The free plan gives you up to 3 template sites on a we.inc address, with no AI and no custom domain. AI building starts at $20 a month.