Classic Bleu Ciel Canvas palette

Colors in Classic Bleu Ciel Canvas: HEX, RGB, HSL & OKLCH

• bg

  #DCEFF6

  #DCEFF6 color page →

  RGB

  rgb(220 239 246)

  HSL

  hsl(196 59% 91%)

  OKLCH

  oklch(0.94 0.022 221.8)

  WCAG contrast: on white 1.18:1 (Fail) · on black 17.72:1 (AAA)

• surface

  #82BECC

  #82BECC color page →

  RGB

  rgb(130 190 204)

  HSL

  hsl(191 42% 65%)

  OKLCH

  oklch(0.765 0.065 213.9)

  WCAG contrast: on white 2.06:1 (Fail) · on black 10.18:1 (AAA)

• primary

  #007BA2

  #007BA2 color page →

  RGB

  rgb(0 123 162)

  HSL

  hsl(194 100% 32%)

  OKLCH

  oklch(0.545 0.108 229.2)

  WCAG contrast: on white 4.82:1 (AA) · on black 4.35:1 (Fail)

• accent

  #00545B

  #00545B color page →

  RGB

  rgb(0 84 91)

  HSL

  hsl(185 100% 18%)

  OKLCH

  oklch(0.407 0.069 204.6)

  WCAG contrast: on white 8.68:1 (AAA) · on black 2.41:1 (Fail)

• text

  #000D1A

  #000D1A color page →

  RGB

  rgb(0 13 26)

  HSL

  hsl(210 100% 5%)

  OKLCH

  oklch(0.153 0.037 243.1)

  WCAG contrast: on white 19.58:1 (AAA) · on black 1.07:1 (Fail)

Export Classic Bleu Ciel Canvas: CSS variables, Tailwind & JSON

:root {
  --bg: #dceff6;
  --surface: #82becc;
  --primary: #007ba2;
  --accent: #00545b;
  --text: #000d1a;
}

@theme {
  --color-bg: #dceff6;
  --color-surface: #82becc;
  --color-primary: #007ba2;
  --color-accent: #00545b;
  --color-text: #000d1a;
}

{
  "classic-bleu-ciel-canvas-61x": {
    "bg": {
      "$type": "color",
      "$value": "#dceff6"
    },
    "surface": {
      "$type": "color",
      "$value": "#82becc"
    },
    "primary": {
      "$type": "color",
      "$value": "#007ba2"
    },
    "accent": {
      "$type": "color",
      "$value": "#00545b"
    },
    "text": {
      "$type": "color",
      "$value": "#000d1a"
    }
  }
}