True Sail On Garden palette

Colors in True Sail On Garden: HEX, RGB, HSL & OKLCH

• bg

  #EBF6FF

  #EBF6FF color page →

  RGB

  rgb(235 246 255)

  HSL

  hsl(207 100% 96%)

  OKLCH

  oklch(0.968 0.017 242.4)

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

• surface

  #72B6D4

  #72B6D4 color page →

  RGB

  rgb(114 182 212)

  HSL

  hsl(198 53% 64%)

  OKLCH

  oklch(0.742 0.081 227.9)

  WCAG contrast: on white 2.24:1 (Fail) · on black 9.35:1 (AAA)

• primary

  #4577B9

  #4577B9 color page →

  RGB

  rgb(69 119 185)

  HSL

  hsl(214 46% 50%)

  OKLCH

  oklch(0.565 0.116 256)

  WCAG contrast: on white 4.57:1 (AA) · on black 4.59:1 (AA)

• accent

  #004B69

  #004B69 color page →

  RGB

  rgb(0 75 105)

  HSL

  hsl(197 100% 21%)

  OKLCH

  oklch(0.389 0.081 233.7)

  WCAG contrast: on white 9.50:1 (AAA) · on black 2.21:1 (Fail)

• text

  #031124

  #031124 color page →

  RGB

  rgb(3 17 36)

  HSL

  hsl(215 85% 8%)

  OKLCH

  oklch(0.177 0.045 254.3)

  WCAG contrast: on white 18.92:1 (AAA) · on black 1.10:1 (Fail)

Export True Sail On Garden: CSS variables, Tailwind & JSON

:root {
  --bg: #ebf6ff;
  --surface: #72b6d4;
  --primary: #4577b9;
  --accent: #004b69;
  --text: #031124;
}

@theme {
  --color-bg: #ebf6ff;
  --color-surface: #72b6d4;
  --color-primary: #4577b9;
  --color-accent: #004b69;
  --color-text: #031124;
}

{
  "true-sail-on-garden-762": {
    "bg": {
      "$type": "color",
      "$value": "#ebf6ff"
    },
    "surface": {
      "$type": "color",
      "$value": "#72b6d4"
    },
    "primary": {
      "$type": "color",
      "$value": "#4577b9"
    },
    "accent": {
      "$type": "color",
      "$value": "#004b69"
    },
    "text": {
      "$type": "color",
      "$value": "#031124"
    }
  }
}