Deeply Embarrassed Harbor palette

Colors in Deeply Embarrassed Harbor: HEX, RGB, HSL & OKLCH

• bg

  #FFF1EB

  #FFF1EB color page →

  RGB

  rgb(255 241 235)

  HSL

  hsl(18 100% 96%)

  OKLCH

  oklch(0.968 0.017 44.8)

  WCAG contrast: on white 1.10:1 (Fail) · on black 19.03:1 (AAA)

• surface

  #FED3C4

  #FED3C4 color page →

  RGB

  rgb(254 211 196)

  HSL

  hsl(16 97% 88%)

  OKLCH

  oklch(0.9 0.053 40.1)

  WCAG contrast: on white 1.36:1 (Fail) · on black 15.32:1 (AAA)

• primary

  #E2BE94

  #E2BE94 color page →

  RGB

  rgb(226 190 148)

  HSL

  hsl(32 57% 73%)

  OKLCH

  oklch(0.823 0.069 70.9)

  WCAG contrast: on white 1.74:1 (Fail) · on black 12.02:1 (AAA)

• accent

  #EBAFB6

  #EBAFB6 color page →

  RGB

  rgb(235 175 182)

  HSL

  hsl(353 60% 80%)

  OKLCH

  oklch(0.811 0.071 11)

  WCAG contrast: on white 1.85:1 (Fail) · on black 11.33:1 (AAA)

• text

  #4D3128

  #4D3128 color page →

  RGB

  rgb(77 49 40)

  HSL

  hsl(15 32% 23%)

  OKLCH

  oklch(0.344 0.044 38.6)

  WCAG contrast: on white 11.76:1 (AAA) · on black 1.78:1 (Fail)

Export Deeply Embarrassed Harbor: CSS variables, Tailwind & JSON

:root {
  --bg: #fff1eb;
  --surface: #fed3c4;
  --primary: #e2be94;
  --accent: #ebafb6;
  --text: #4d3128;
}

@theme {
  --color-bg: #fff1eb;
  --color-surface: #fed3c4;
  --color-primary: #e2be94;
  --color-accent: #ebafb6;
  --color-text: #4d3128;
}

{
  "deeply-embarrassed-harbor-5zq": {
    "bg": {
      "$type": "color",
      "$value": "#fff1eb"
    },
    "surface": {
      "$type": "color",
      "$value": "#fed3c4"
    },
    "primary": {
      "$type": "color",
      "$value": "#e2be94"
    },
    "accent": {
      "$type": "color",
      "$value": "#ebafb6"
    },
    "text": {
      "$type": "color",
      "$value": "#4d3128"
    }
  }
}