Steady Muted Blue Brief palette

Colors in Steady Muted Blue Brief: HEX, RGB, HSL & OKLCH

• bg

  #DDF0FF

  #DDF0FF color page →

  RGB

  rgb(221 240 255)

  HSL

  hsl(206 100% 93%)

  OKLCH

  oklch(0.946 0.029 241.6)

  WCAG contrast: on white 1.16:1 (Fail) · on black 17.98:1 (AAA)

• surface

  #80BFD5

  #80BFD5 color page →

  RGB

  rgb(128 191 213)

  HSL

  hsl(196 50% 67%)

  OKLCH

  oklch(0.77 0.072 221.9)

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

• primary

  #3173A7

  #3173A7 color page →

  RGB

  rgb(49 115 167)

  HSL

  hsl(206 55% 42%)

  OKLCH

  oklch(0.537 0.106 245.5)

  WCAG contrast: on white 5.07:1 (AA) · on black 4.14:1 (Fail)

• accent

  #00475A

  #00475A color page →

  RGB

  rgb(0 71 90)

  HSL

  hsl(193 100% 18%)

  OKLCH

  oklch(0.369 0.069 223.2)

  WCAG contrast: on white 10.24:1 (AAA) · on black 2.04:1 (Fail)

• text

  #09121D

  #09121D color page →

  RGB

  rgb(9 18 29)

  HSL

  hsl(213 53% 7%)

  OKLCH

  oklch(0.179 0.027 254)

  WCAG contrast: on white 18.81:1 (AAA) · on black 1.11:1 (Fail)

Export Steady Muted Blue Brief: CSS variables, Tailwind & JSON

:root {
  --bg: #ddf0ff;
  --surface: #80bfd5;
  --primary: #3173a7;
  --accent: #00475a;
  --text: #09121d;
}

@theme {
  --color-bg: #ddf0ff;
  --color-surface: #80bfd5;
  --color-primary: #3173a7;
  --color-accent: #00475a;
  --color-text: #09121d;
}

{
  "steady-muted-blue-brief-22u": {
    "bg": {
      "$type": "color",
      "$value": "#ddf0ff"
    },
    "surface": {
      "$type": "color",
      "$value": "#80bfd5"
    },
    "primary": {
      "$type": "color",
      "$value": "#3173a7"
    },
    "accent": {
      "$type": "color",
      "$value": "#00475a"
    },
    "text": {
      "$type": "color",
      "$value": "#09121d"
    }
  }
}