Steady Mellow Mango Glacier palette

Colors in Steady Mellow Mango Glacier: HEX, RGB, HSL & OKLCH

• bg

  #FFEEE7

  #FFEEE7 color page →

  RGB

  rgb(255 238 231)

  HSL

  hsl(18 100% 95%)

  OKLCH

  oklch(0.961 0.021 43.9)

  WCAG contrast: on white 1.12:1 (Fail) · on black 18.63:1 (AAA)

• surface

  #CF4600

  #CF4600 color page →

  RGB

  rgb(207 70 0)

  HSL

  hsl(20 100% 41%)

  OKLCH

  oklch(0.581 0.184 39.6)

  WCAG contrast: on white 4.63:1 (AA) · on black 4.52:1 (AA)

• primary

  #007F70

  #007F70 color page →

  RGB

  rgb(0 127 112)

  HSL

  hsl(173 100% 25%)

  OKLCH

  oklch(0.535 0.097 180.7)

  WCAG contrast: on white 4.91:1 (AA) · on black 4.26:1 (Fail)

• accent

  #0065B9

  #0065B9 color page →

  RGB

  rgb(0 101 185)

  HSL

  hsl(207 100% 36%)

  OKLCH

  oklch(0.506 0.154 252.5)

  WCAG contrast: on white 5.89:1 (AA) · on black 3.56:1 (Fail)

• text

  #1E0B04

  #1E0B04 color page →

  RGB

  rgb(30 11 4)

  HSL

  hsl(16 76% 7%)

  OKLCH

  oklch(0.177 0.037 44.1)

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

Export Steady Mellow Mango Glacier: CSS variables, Tailwind & JSON

:root {
  --bg: #ffeee7;
  --surface: #cf4600;
  --primary: #007f70;
  --accent: #0065b9;
  --text: #1e0b04;
}

@theme {
  --color-bg: #ffeee7;
  --color-surface: #cf4600;
  --color-primary: #007f70;
  --color-accent: #0065b9;
  --color-text: #1e0b04;
}

{
  "steady-mellow-mango-glacier-4le": {
    "bg": {
      "$type": "color",
      "$value": "#ffeee7"
    },
    "surface": {
      "$type": "color",
      "$value": "#cf4600"
    },
    "primary": {
      "$type": "color",
      "$value": "#007f70"
    },
    "accent": {
      "$type": "color",
      "$value": "#0065b9"
    },
    "text": {
      "$type": "color",
      "$value": "#1e0b04"
    }
  }
}