CSS color Property - Playground Example

<!DOCTYPE html><html><head><style type="text/css">/* Example styles demonstrating the color property */
.example {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  padding: 24px;
  background: #f8f9fb;
  border-radius: 8px;
  max-width: 520px;
}

h1 {
  font-size: 18px;
  margin: 0 0 12px 0;
  color: #2c3e50;
}

.hex {
  color: #3498db;
  margin: 6px 0;
}

.rgb {
  color: rgb(46, 204, 113);
  margin: 6px 0;
}

.rgba {
  color: rgba(231, 76, 60, 0.85);
  margin: 6px 0;
}

.named {
  color: tomato;
  margin: 6px 0;
}

.currentcolor {
  color: #8e44ad;
  margin: 6px 0;
}

.badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 12px;
  color: #fff;
  background-color: currentColor;
  border-radius: 999px;
  margin-left: 8px;
}

.btn {
  margin-top: 12px;
  padding: 8px 14px;
  background: #34495e;
  color: #ffffff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
</style></head><body><div class="example">
  <h1>CSS color property  -  examples</h1>
  <p class="hex">Hex color: #3498db</p>
  <p class="rgb">RGB color: rgb(46, 204, 113)</p>
  <p class="rgba">RGBA color: rgba(231, 76, 60, 0.85)</p>
  <p class="named">Named color: tomato</p>
  <p class="currentcolor">CurrentColor example: <span class="badge">Badge</span></p>
  <button class="btn">Button text</button>
</div></body></html>