Nordic Fog palette

Colors in Nordic Fog: HEX, RGB, HSL & OKLCH

• bg

  #F4F1EC

  #F4F1EC color page →

  RGB

  rgb(244 241 236)

  HSL

  hsl(37 27% 94%)

  OKLCH

  oklch(0.959 0.007 80.7)

  WCAG contrast: on white 1.12:1 (Fail) · on black 18.63:1 (AAA)

• surface

  #D9E2EC

  #D9E2EC color page →

  RGB

  rgb(217 226 236)

  HSL

  hsl(212 33% 89%)

  OKLCH

  oklch(0.909 0.017 250.9)

  WCAG contrast: on white 1.30:1 (Fail) · on black 16.04:1 (AAA)

• muted

  #7B8C9E

  #7B8C9E color page →

  RGB

  rgb(123 140 158)

  HSL

  hsl(211 15% 55%)

  OKLCH

  oklch(0.633 0.034 249.9)

  WCAG contrast: on white 3.44:1 (Fail) · on black 6.08:1 (AA)

• text

  #3D4F5F

  #3D4F5F color page →

  RGB

  rgb(61 79 95)

  HSL

  hsl(208 22% 31%)

  OKLCH

  oklch(0.419 0.035 245.6)

  WCAG contrast: on white 8.46:1 (AAA) · on black 2.48:1 (Fail)

• accent

  #C4A484

  #C4A484 color page →

  RGB

  rgb(196 164 132)

  HSL

  hsl(30 35% 64%)

  OKLCH

  oklch(0.739 0.058 66.7)

  WCAG contrast: on white 2.33:1 (Fail) · on black 8.99:1 (AAA)

Export Nordic Fog: CSS variables, Tailwind & JSON

:root {
  --bg: #f4f1ec;
  --surface: #d9e2ec;
  --muted: #7b8c9e;
  --text: #3d4f5f;
  --accent: #c4a484;
}

@theme {
  --color-bg: #f4f1ec;
  --color-surface: #d9e2ec;
  --color-muted: #7b8c9e;
  --color-text: #3d4f5f;
  --color-accent: #c4a484;
}

{
  "nordic-fog": {
    "bg": {
      "$type": "color",
      "$value": "#f4f1ec"
    },
    "surface": {
      "$type": "color",
      "$value": "#d9e2ec"
    },
    "muted": {
      "$type": "color",
      "$value": "#7b8c9e"
    },
    "text": {
      "$type": "color",
      "$value": "#3d4f5f"
    },
    "accent": {
      "$type": "color",
      "$value": "#c4a484"
    }
  }
}