Here are some of the ways you can apply CSS to create colours:
A set of predefined keywords, like white, red or royalblue. The most common way beginners give an element colour, but limited to a fixed list of names.
background-color: royalblue;See full list of colour names.
A hexadecimal value representing red, green and blue. Compact and everywhere, but not easy to read or adjust by eye.
background-color: #2764d7;Hex can also be written as a 3-character shorthand. Each character is doubled to make the full 6-digit value, so #06f expands to #0066ff.
Red, green and blue written out as separate numbers. Easier to reason about than hex, though it still doesn't match how we perceive colour.
background-color: rgb(39, 100, 215);The same as RGB, with an added alpha value for transparency.
background-color: rgba(39, 100, 215, 0.7);Hue, saturation and lightness. More intuitive to adjust than RGB, but its lightness value doesn't line up with how bright a colour actually looks.
background-color: hsl(217, 69%, 50%);The same as HSL, with an added alpha value for transparency.
background-color: hsla(217, 69%, 50%, 0.7);Hue, whiteness and blackness. Built by mixing a hue with white and black, which some people find a more natural way to think about colour.
background-color: hwb(217 15% 16%);Based on the CIE Lab colour space. Designed for perceptual uniformity, but predates modern wide-gamut displays.
background-color: lab(48% -4 -45);The cylindrical form of LAB, using lightness, chroma and hue instead of LAB's harder-to-read coordinates.
background-color: lch(48% 45 264);A newer, more accurate take on perceptual uniformity than LAB. It's the colour space that OKLCH is built on.
background-color: oklab(50% -0.03 -0.14);The cylindrical form of Oklab. More perceptually accurate than HSL, and able to describe colours beyond the sRGB gamut.
background-color: oklch(50% 0.14 264);The same as OKLCH, with an added alpha value for transparency.
background-color: oklch(50% 0.14 264 / 50%);