Renga Brick

CSS

:root {
  --renga-brick: #b55233;
  --renga-brick-rgb: 181 82 51;
  --renga-brick-oklch: oklch(0.558 0.137 37.9);
}

.element {
  color: var(--renga-brick);
  background-color: hsl(14 56% 45%);
  border-color: oklch(0.558 0.137 37.9);
}

Tailwind CSS v4

@theme {
  --color-renga-brick: #b55233;
  --color-renga-brick-50: #ffe9d8;
  --color-renga-brick-100: #ffd9c6;
  --color-renga-brick-200: #ffc1a8;
  --color-renga-brick-300: #f39f82;
  --color-renga-brick-400: #e28061;
  --color-renga-brick-500: #d0603d;
  --color-renga-brick-600: #af5235;
  --color-renga-brick-700: #8d412a;
  --color-renga-brick-800: #692e1f;
  --color-renga-brick-900: #4a1f14;
  --color-renga-brick-950: #300e06;
}

SCSS

$renga-brick: #b55233;
$renga-brick-rgb: 181, 82, 51;
$renga-brick-light: mix(#fff, $renga-brick, 20%);
$renga-brick-dark: mix(#000, $renga-brick, 20%);

.element {
  color: $renga-brick;
  box-shadow: 0 0 0 2px rgba($renga-brick, 0.35);
}