Color Values: Names, Hex, RGB, HSL, and OKLCH

A color in CSS can be written in at least five ways: a name, a hex code, rgb(), hsl(), or oklch(). The browser accepts all of them in any property that takes a color, such as color for text and background-color for the area behind it. This chapter styles one small travel card, and this lesson gives each line of that card its color in a different format.

The running example

Here is the full page. Save it as an .html file and open it in a browser.

<!DOCTYPE html>
<html>
<head>
  <title>Card Colors</title>
  <style>
    .card {
      background-color: #fff8e7;