Classic Fresh Blue of Bel Air Ribbon palette

Colors in Classic Fresh Blue of Bel Air Ribbon: HEX, RGB, HSL & OKLCH

• bg

  #DBF2FF

  #DBF2FF color page →

  RGB

  rgb(219 242 255)

  HSL

  hsl(202 100% 93%)

  OKLCH

  oklch(0.948 0.03 232.4)

  WCAG contrast: on white 1.15:1 (Fail) · on black 18.15:1 (AAA)

• surface

  #82BFFA

  #82BFFA color page →

  RGB

  rgb(130 191 250)

  HSL

  hsl(210 92% 75%)

  OKLCH

  oklch(0.786 0.106 248.5)

  WCAG contrast: on white 1.94:1 (Fail) · on black 10.78:1 (AAA)

• muted

  #009FFA

  #009FFA color page →

  RGB

  rgb(0 159 250)

  HSL

  hsl(202 100% 49%)

  OKLCH

  oklch(0.679 0.172 245.3)

  WCAG contrast: on white 2.86:1 (Fail) · on black 7.33:1 (AAA)

• primary

  #0073CA

  #0073CA color page →

  RGB

  rgb(0 115 202)

  HSL

  hsl(206 100% 40%)

  OKLCH

  oklch(0.55 0.16 250.9)

  WCAG contrast: on white 4.87:1 (AA) · on black 4.30:1 (Fail)

• accent

  #003B68

  #003B68 color page →

  RGB

  rgb(0 59 104)

  HSL

  hsl(206 100% 20%)

  OKLCH

  oklch(0.345 0.095 249)

  WCAG contrast: on white 11.50:1 (AAA) · on black 1.82:1 (Fail)

• text

  #0D141B

  #0D141B color page →

  RGB

  rgb(13 20 27)

  HSL

  hsl(210 35% 8%)

  OKLCH

  oklch(0.188 0.018 248.8)

  WCAG contrast: on white 18.53:1 (AAA) · on black 1.13:1 (Fail)

Export Classic Fresh Blue of Bel Air Ribbon: CSS variables, Tailwind & JSON

:root {
  --bg: #dbf2ff;
  --surface: #82bffa;
  --muted: #009ffa;
  --primary: #0073ca;
  --accent: #003b68;
  --text: #0d141b;
}

@theme {
  --color-bg: #dbf2ff;
  --color-surface: #82bffa;
  --color-muted: #009ffa;
  --color-primary: #0073ca;
  --color-accent: #003b68;
  --color-text: #0d141b;
}

{
  "classic-fresh-blue-of-bel-air-ribbon-1ne": {
    "bg": {
      "$type": "color",
      "$value": "#dbf2ff"
    },
    "surface": {
      "$type": "color",
      "$value": "#82bffa"
    },
    "muted": {
      "$type": "color",
      "$value": "#009ffa"
    },
    "primary": {
      "$type": "color",
      "$value": "#0073ca"
    },
    "accent": {
      "$type": "color",
      "$value": "#003b68"
    },
    "text": {
      "$type": "color",
      "$value": "#0d141b"
    }
  }
}