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.
| 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
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.
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.
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 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.
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.
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.
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.
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.
Related: Color Contrast Checker, Font Pairing Tool, Favicon Generator, Email Signature Generator.
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.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.