HEX, RGB, HSL and OKLCH: which code to use
Every colour on a screen is a mix of red, green and blue light. The four codes above are four ways of writing the same colour down, and each suits a different job.
HEX
A HEX code such as #1B998B is the amounts of red, green and blue written as three two-digit numbers in base 16, from 00 (none) to FF (full). It is the shortest form, and the one that design tools, brand guidelines and style sheets pass around. Use it when you hand a colour to someone else.
RGB
rgb(27, 153, 139) is the same three amounts in ordinary numbers, from 0 to 255. It says nothing that HEX does not, but it is easier to read, and it is the form to reach for when a colour needs to be partly transparent: a fourth value sets how much of what is behind it shows through.
HSL
hsl(173, 70%, 35%) describes the colour the way people talk about one: its hue (an angle on the colour wheel, where 0 is red, 120 is green and 240 is blue), how saturated it is and how light. That makes it the handy form for adjusting by hand. Raise the last number for a lighter version of a button, lower the middle one to calm it down. Its weakness is that its lightness is not the lightness the eye sees: a yellow and a blue with the same value look nothing alike.
OKLCH
oklch(61.6% 0.104 183.2) fixes that. It is a newer way of writing a colour, built on how people perceive it: lightness, chroma (how vivid it is) and hue. Two colours with the same OKLCH lightness do look equally light, so a set of tints or a row of status colours worked out in OKLCH comes out even. Every current browser reads it in a style sheet. Use it where colours are worked out with sums, in a design system or a palette, and keep HEX for handing over.
Colours that go together
The suggestions come from turning the hue around the colour wheel while the saturation and lightness stay as they are. The complementary colour sits opposite, 180 degrees away, and gives the strongest contrast of hue, which suits a single accent. Analogous colours sit 30 degrees to each side and make calm, related schemes. A triad is three colours a third of the wheel apart: lively, and hard to balance, so let one of them lead. Tints are your colour with white mixed in and shades are your colour with black. They are the usual source of hover states, borders and backgrounds.
Reading the contrast figures
A contrast ratio compares how light two colours are, from 1:1 (the same) to 21:1 (black on white). The Web Content Accessibility Guidelines ask for at least 4.5:1 between normal text and its background, and 3:1 for large text. If neither black nor white reaches 4.5:1 on a colour, keep that colour for decoration and put the words somewhere else.
The limits of this page: it opens one image at a time, of up to 20 MB and 64 megapixels, and an image longer than 4,096 pixels on a side is scaled down to that before it is shown and measured.