True Gingerbread Crumble Noir palette

Colors in True Gingerbread Crumble Noir: HEX, RGB, HSL & OKLCH

• bg

  #F6E8D5

  #F6E8D5 color page →

  RGB

  rgb(246 232 213)

  HSL

  hsl(35 65% 90%)

  OKLCH

  oklch(0.937 0.029 75.7)

  WCAG contrast: on white 1.20:1 (Fail) · on black 17.42:1 (AAA)

• surface

  #CAA480

  #CAA480 color page →

  RGB

  rgb(202 164 128)

  HSL

  hsl(29 41% 65%)

  OKLCH

  oklch(0.744 0.066 65)

  WCAG contrast: on white 2.29:1 (Fail) · on black 9.13:1 (AAA)

• primary

  #A2633C

  #A2633C color page →

  RGB

  rgb(162 99 60)

  HSL

  hsl(23 46% 44%)

  OKLCH

  oklch(0.561 0.098 51.4)

  WCAG contrast: on white 4.78:1 (AA) · on black 4.38:1 (Fail)

• accent

  #663126

  #663126 color page →

  RGB

  rgb(102 49 38)

  HSL

  hsl(10 46% 27%)

  OKLCH

  oklch(0.381 0.079 33)

  WCAG contrast: on white 10.33:1 (AAA) · on black 2.03:1 (Fail)

• text

  #28160E

  #28160E color page →

  RGB

  rgb(40 22 14)

  HSL

  hsl(18 48% 11%)

  OKLCH

  oklch(0.222 0.033 44.6)

  WCAG contrast: on white 17.33:1 (AAA) · on black 1.21:1 (Fail)

Export True Gingerbread Crumble Noir: CSS variables, Tailwind & JSON

:root {
  --bg: #f6e8d5;
  --surface: #caa480;
  --primary: #a2633c;
  --accent: #663126;
  --text: #28160e;
}

@theme {
  --color-bg: #f6e8d5;
  --color-surface: #caa480;
  --color-primary: #a2633c;
  --color-accent: #663126;
  --color-text: #28160e;
}

{
  "true-gingerbread-crumble-noir-2d2": {
    "bg": {
      "$type": "color",
      "$value": "#f6e8d5"
    },
    "surface": {
      "$type": "color",
      "$value": "#caa480"
    },
    "primary": {
      "$type": "color",
      "$value": "#a2633c"
    },
    "accent": {
      "$type": "color",
      "$value": "#663126"
    },
    "text": {
      "$type": "color",
      "$value": "#28160e"
    }
  }
}