Steady Endless River Canvas palette

Colors in Steady Endless River Canvas: HEX, RGB, HSL & OKLCH

• bg

  #DDE2EC

  #DDE2EC color page →

  RGB

  rgb(221 226 236)

  HSL

  hsl(220 28% 90%)

  OKLCH

  oklch(0.912 0.015 264.5)

  WCAG contrast: on white 1.29:1 (Fail) · on black 16.16:1 (AAA)

• surface

  #9FB1D5

  #9FB1D5 color page →

  RGB

  rgb(159 177 213)

  HSL

  hsl(220 39% 73%)

  OKLCH

  oklch(0.759 0.056 264.2)

  WCAG contrast: on white 2.15:1 (Fail) · on black 9.72:1 (AAA)

• primary

  #5A7EB2

  #5A7EB2 color page →

  RGB

  rgb(90 126 178)

  HSL

  hsl(215 36% 53%)

  OKLCH

  oklch(0.588 0.09 257.5)

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

• accent

  #2F4268

  #2F4268 color page →

  RGB

  rgb(47 66 104)

  HSL

  hsl(220 38% 30%)

  OKLCH

  oklch(0.382 0.07 263.3)

  WCAG contrast: on white 9.99:1 (AAA) · on black 2.10:1 (Fail)

• text

  #040F20

  #040F20 color page →

  RGB

  rgb(4 15 32)

  HSL

  hsl(216 78% 7%)

  OKLCH

  oklch(0.168 0.04 256.6)

  WCAG contrast: on white 19.18:1 (AAA) · on black 1.09:1 (Fail)

Export Steady Endless River Canvas: CSS variables, Tailwind & JSON

:root {
  --bg: #dde2ec;
  --surface: #9fb1d5;
  --primary: #5a7eb2;
  --accent: #2f4268;
  --text: #040f20;
}

@theme {
  --color-bg: #dde2ec;
  --color-surface: #9fb1d5;
  --color-primary: #5a7eb2;
  --color-accent: #2f4268;
  --color-text: #040f20;
}

{
  "steady-endless-river-canvas-3kf": {
    "bg": {
      "$type": "color",
      "$value": "#dde2ec"
    },
    "surface": {
      "$type": "color",
      "$value": "#9fb1d5"
    },
    "primary": {
      "$type": "color",
      "$value": "#5a7eb2"
    },
    "accent": {
      "$type": "color",
      "$value": "#2f4268"
    },
    "text": {
      "$type": "color",
      "$value": "#040f20"
    }
  }
}