🎨

Expressive Code Color Chips

A plugin to add color previews to your CSS code examples

.chips {
  /* CSS named colors */
  color: red;
  /* Hexadecimal colors */
  background-color: #fff;
  /* HSL color functions */
  border-color: hsl(0, 0%, 0%);
  /* System colors */
  outline-color: SelectedItem;
  /* Transparent colors */
  background: linear-gradient(rgba(0, 0, 255, 0.25), rgba(0, 0, 255, 0.75));
  /* And more… */
  --more: oklch(70% 0.1 72);
}