Steady Soothing Sapphire Ribbon palette

Colors in Steady Soothing Sapphire Ribbon: HEX, RGB, HSL & OKLCH

• bg

  #E4EFFA

  #E4EFFA color page →

  RGB

  rgb(228 239 250)

  HSL

  hsl(210 69% 94%)

  OKLCH

  oklch(0.947 0.019 248)

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

• surface

  #66BADD

  #66BADD color page →

  RGB

  rgb(102 186 221)

  HSL

  hsl(198 64% 63%)

  OKLCH

  oklch(0.749 0.096 227.3)

  WCAG contrast: on white 2.18:1 (Fail) · on black 9.63:1 (AAA)

• primary

  #3982CD

  #3982CD color page →

  RGB

  rgb(57 130 205)

  HSL

  hsl(210 60% 51%)

  OKLCH

  oklch(0.597 0.136 251.7)

  WCAG contrast: on white 4.00:1 (Fail) · on black 5.24:1 (AA)

• accent

  #27407E

  #27407E color page →

  RGB

  rgb(39 64 126)

  HSL

  hsl(223 53% 32%)

  OKLCH

  oklch(0.387 0.109 265.2)

  WCAG contrast: on white 9.90:1 (AAA) · on black 2.12:1 (Fail)

• text

  #001A31

  #001A31 color page →

  RGB

  rgb(0 26 49)

  HSL

  hsl(208 100% 10%)

  OKLCH

  oklch(0.212 0.056 247.4)

  WCAG contrast: on white 17.61:1 (AAA) · on black 1.19:1 (Fail)

Export Steady Soothing Sapphire Ribbon: CSS variables, Tailwind & JSON

:root {
  --bg: #e4effa;
  --surface: #66badd;
  --primary: #3982cd;
  --accent: #27407e;
  --text: #001a31;
}

@theme {
  --color-bg: #e4effa;
  --color-surface: #66badd;
  --color-primary: #3982cd;
  --color-accent: #27407e;
  --color-text: #001a31;
}

{
  "steady-soothing-sapphire-ribbon-4ae": {
    "bg": {
      "$type": "color",
      "$value": "#e4effa"
    },
    "surface": {
      "$type": "color",
      "$value": "#66badd"
    },
    "primary": {
      "$type": "color",
      "$value": "#3982cd"
    },
    "accent": {
      "$type": "color",
      "$value": "#27407e"
    },
    "text": {
      "$type": "color",
      "$value": "#001a31"
    }
  }
}