True Baby Blue Orchard palette

Colors in True Baby Blue Orchard: HEX, RGB, HSL & OKLCH

• bg

  #F2F7F8

  #F2F7F8 color page →

  RGB

  rgb(242 247 248)

  HSL

  hsl(190 30% 96%)

  OKLCH

  oklch(0.973 0.005 211)

  WCAG contrast: on white 1.08:1 (Fail) · on black 19.43:1 (AAA)

• surface

  #C0EFF5

  #C0EFF5 color page →

  RGB

  rgb(192 239 245)

  HSL

  hsl(187 73% 86%)

  OKLCH

  oklch(0.921 0.049 205.9)

  WCAG contrast: on white 1.24:1 (Fail) · on black 16.90:1 (AAA)

• primary

  #9FCDF4

  #9FCDF4 color page →

  RGB

  rgb(159 205 244)

  HSL

  hsl(208 79% 79%)

  OKLCH

  oklch(0.829 0.073 244.4)

  WCAG contrast: on white 1.67:1 (Fail) · on black 12.51:1 (AAA)

• accent

  #A0CDC0

  #A0CDC0 color page →

  RGB

  rgb(160 205 192)

  HSL

  hsl(163 31% 72%)

  OKLCH

  oklch(0.813 0.051 175.4)

  WCAG contrast: on white 1.75:1 (Fail) · on black 11.98:1 (AAA)

• text

  #263C3F

  #263C3F color page →

  RGB

  rgb(38 60 63)

  HSL

  hsl(187 25% 20%)

  OKLCH

  oklch(0.339 0.028 206.7)

  WCAG contrast: on white 11.66:1 (AAA) · on black 1.80:1 (Fail)

Export True Baby Blue Orchard: CSS variables, Tailwind & JSON

:root {
  --bg: #f2f7f8;
  --surface: #c0eff5;
  --primary: #9fcdf4;
  --accent: #a0cdc0;
  --text: #263c3f;
}

@theme {
  --color-bg: #f2f7f8;
  --color-surface: #c0eff5;
  --color-primary: #9fcdf4;
  --color-accent: #a0cdc0;
  --color-text: #263c3f;
}

{
  "true-baby-blue-orchard-se": {
    "bg": {
      "$type": "color",
      "$value": "#f2f7f8"
    },
    "surface": {
      "$type": "color",
      "$value": "#c0eff5"
    },
    "primary": {
      "$type": "color",
      "$value": "#9fcdf4"
    },
    "accent": {
      "$type": "color",
      "$value": "#a0cdc0"
    },
    "text": {
      "$type": "color",
      "$value": "#263c3f"
    }
  }
}