Steady Mediterranean Blue Quartz palette

Colors in Steady Mediterranean Blue Quartz: HEX, RGB, HSL & OKLCH

• bg

  #DDEBF2

  #DDEBF2 color page →

  RGB

  rgb(221 235 242)

  HSL

  hsl(200 45% 91%)

  OKLCH

  oklch(0.932 0.018 229)

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

• surface

  #0083BC

  #0083BC color page →

  RGB

  rgb(0 131 188)

  HSL

  hsl(198 100% 37%)

  OKLCH

  oklch(0.579 0.128 237.8)

  WCAG contrast: on white 4.22:1 (Fail) · on black 4.97:1 (AA)

• primary

  #A15216

  #A15216 color page →

  RGB

  rgb(161 82 22)

  HSL

  hsl(26 76% 36%)

  OKLCH

  oklch(0.526 0.125 52)

  WCAG contrast: on white 5.62:1 (AA) · on black 3.73:1 (Fail)

• accent

  #193241

  #193241 color page →

  RGB

  rgb(25 50 65)

  HSL

  hsl(203 44% 18%)

  OKLCH

  oklch(0.304 0.041 236.6)

  WCAG contrast: on white 13.34:1 (AAA) · on black 1.57:1 (Fail)

• text

  #03070C

  #03070C color page →

  RGB

  rgb(3 7 12)

  HSL

  hsl(213 60% 3%)

  OKLCH

  oklch(0.125 0.016 245.5)

  WCAG contrast: on white 20.20:1 (AAA) · on black 1.03:1 (Fail)

Export Steady Mediterranean Blue Quartz: CSS variables, Tailwind & JSON

:root {
  --bg: #ddebf2;
  --surface: #0083bc;
  --primary: #a15216;
  --accent: #193241;
  --text: #03070c;
}

@theme {
  --color-bg: #ddebf2;
  --color-surface: #0083bc;
  --color-primary: #a15216;
  --color-accent: #193241;
  --color-text: #03070c;
}

{
  "steady-mediterranean-blue-quartz-668": {
    "bg": {
      "$type": "color",
      "$value": "#ddebf2"
    },
    "surface": {
      "$type": "color",
      "$value": "#0083bc"
    },
    "primary": {
      "$type": "color",
      "$value": "#a15216"
    },
    "accent": {
      "$type": "color",
      "$value": "#193241"
    },
    "text": {
      "$type": "color",
      "$value": "#03070c"
    }
  }
}