Mediterranean Blue Drift palette

Colors in Mediterranean Blue Drift: HEX, RGB, HSL & OKLCH

• bg

  #DFF6FF

  #DFF6FF color page →

  RGB

  rgb(223 246 255)

  HSL

  hsl(197 100% 94%)

  OKLCH

  oklch(0.959 0.027 223.2)

  WCAG contrast: on white 1.11:1 (Fail) · on black 18.76:1 (AAA)

• surface

  #6BB8CD

  #6BB8CD color page →

  RGB

  rgb(107 184 205)

  HSL

  hsl(193 49% 61%)

  OKLCH

  oklch(0.741 0.082 217.4)

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

• primary

  #3281AD

  #3281AD color page →

  RGB

  rgb(50 129 173)

  HSL

  hsl(201 55% 44%)

  OKLCH

  oklch(0.575 0.102 236.9)

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

• accent

  #004C5D

  #004C5D color page →

  RGB

  rgb(0 76 93)

  HSL

  hsl(191 100% 18%)

  OKLCH

  oklch(0.385 0.07 219.4)

  WCAG contrast: on white 9.58:1 (AAA) · on black 2.19:1 (Fail)

• text

  #010A16

  #010A16 color page →

  RGB

  rgb(1 10 22)

  HSL

  hsl(214 91% 5%)

  OKLCH

  oklch(0.141 0.033 247.6)

  WCAG contrast: on white 19.88:1 (AAA) · on black 1.05:1 (Fail)

Export Mediterranean Blue Drift: CSS variables, Tailwind & JSON

:root {
  --bg: #dff6ff;
  --surface: #6bb8cd;
  --primary: #3281ad;
  --accent: #004c5d;
  --text: #010a16;
}

@theme {
  --color-bg: #dff6ff;
  --color-surface: #6bb8cd;
  --color-primary: #3281ad;
  --color-accent: #004c5d;
  --color-text: #010a16;
}

{
  "mediterranean-blue-drift-3jf": {
    "bg": {
      "$type": "color",
      "$value": "#dff6ff"
    },
    "surface": {
      "$type": "color",
      "$value": "#6bb8cd"
    },
    "primary": {
      "$type": "color",
      "$value": "#3281ad"
    },
    "accent": {
      "$type": "color",
      "$value": "#004c5d"
    },
    "text": {
      "$type": "color",
      "$value": "#010a16"
    }
  }
}