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.