What are OKLCH colors?

Quote:

    colors are much more accurate in terms of 
    how humans perceive them and it makes 
    working with them much easier

This is an aim, which I am not sure fully addressed. Think of the reason why can't I get oklch or any other method of color definition in HTML to produce the "gold color" as we humans think of it.

The fundamental reason you can't get a truly convincing "gold" color using a single value in oklch, rgb, or any other color definition is because gold is a material, not a color.

What our brain perceives as "gold" is not a single, flat hue. It's a complex interplay of light, reflection, and texture.

Point is, even with sophisticated CSS involved with linear gradient it is still a challenge

See demo at https://jsfiddle.net/oyw9fjda/

---

    <style>
    .flat-gold {
      width: 200px;
      height: 200px;
      /* Using Oklch for a perceptually uniform yellow */
      background: oklch(85% 0.11 85);
    }

    .gradient-gold {
      width: 200px;
      height: 200px;
      background: linear-gradient(
        135deg,
        oklch(60% 0.1 65),   /* Dark, desaturated shadow (brownish) */
        oklch(85% 0.11 85) 45%, /* Rich mid-tone gold */
        oklch(98% 0.1 90) 50%, /* Sharp, bright highlight (almost white-yellow) */
        oklch(85% 0.11 85) 55%, /* Back to the mid-tone */
        oklch(70% 0.1 75)       /* Softer shadow on the other side */
      );
    }

    .conic-gold {
      width: 200px;
      height: 200px;
      border-radius: 50%; /* Often looks best on a circle */
      background: conic-gradient(
        from 90deg,
        #B38728, /* Darker Start */
        #FEE9A0, /* Bright Highlight */
        #D4AF37, /* Mid-tone */
        #FEE9A0, /* Another Highlight */
        #B38728  /* Darker End */
      );
    }

    .premium-gold {
      width: 200px;
      height: 200px;
      background-color: #B38728; /* Fallback color */
      background-image:
        /* Layer 1: Sharp highlight on top */
        linear-gradient(
          175deg,
          rgba(255, 253, 240, 0.6) 0%,
          rgba(255, 215, 0, 0.2) 40%,
          rgba(136, 96, 0, 0.5) 90%
        ),
        /* Layer 2: Base metallic gradient */
        linear-gradient(
          105deg,
          transparent 35%,
          #FEE9A0 48%,
          #D4AF37 52%,
          transparent 65%
        );
      border: 2px solid oklch(60% 0.1 65);
      box-shadow: inset 0 0 10px rgba(0,0,0,0.4);
    }
    </style>

    <div class="flat-gold"></div>
    <hr />
    <div class="gradient-gold"></div>
    <hr />
    <div class="conic-gold"></div>
    <hr />
    <div class="premium-gold"></div>