What colors are in the Coastal Fog palette?

The Coastal Fog palette has 5 colors: #1E2A2E, #3D555C, #6E9CA3, #BCD6D9, #F0F6F6.

Where can I use this palette?

It's a Neutral palette — well suited to dashboards, minimal ui, corporate sites, dark-mode surfaces.

Is the Coastal Fog palette accessible?

Its darkest and lightest colors have a contrast ratio of 13.48:1. 5 color pairs in it meet WCAG AA for text.

How do I use this palette in CSS?

Copy the CSS custom properties (:root variables) from the Export section, or grab any single hex with one click.

Can I export the Coastal Fog palette?

Yes — export to CSS, SCSS, Tailwind config or JSON, or copy all hex codes at once.

Text #1E2A2E Gunmetal Gray Accent #3D555C Dark Slate Gray Primary #6E9CA3 Cadet Blue Secondary #BCD6D9 Light Blue Surface #F0F6F6 White Smoke

Coastal Fog

Calm Wellness & spa apps 5 colors

Cool greys wash over a single muted teal — the quiet a booking screen needs. The teal shows up only on the primary action, so nothing competes with the calm.

Open in generator All palettes

Text Gunmetal Gray — #1E2A2E

Accent Dark Slate Gray — #3D555C

Primary Cadet Blue — #6E9CA3

Secondary Light Blue — #BCD6D9

Surface White Smoke — #F0F6F6

Contrast matrix

Text on Surface 13.48 AAA

Primary on Surface 2.77 Fail

Text on Secondary 9.65 AAA

Surface on Primary 2.77 Fail

Accent on Text 1.86 Fail

Ratios are WCAG 2 contrast between the roles as assigned above. AA needs 4.5:1 for body text, 3:1 for large text.

Export tokens

:root {
  --text: #1E2A2E;
  --accent: #3D555C;
  --primary: #6E9CA3;
  --secondary: #BCD6D9;
  --surface: #F0F6F6;
}

$coastal-fog-text: #1E2A2E;
$coastal-fog-accent: #3D555C;
$coastal-fog-primary: #6E9CA3;
$coastal-fog-secondary: #BCD6D9;
$coastal-fog-surface: #F0F6F6;

// tailwind.config.js — theme.extend.colors
colors: {
  'coastal-fog': {
    'text': '#1E2A2E',
    'accent': '#3D555C',
    'primary': '#6E9CA3',
    'secondary': '#BCD6D9',
    'surface': '#F0F6F6',
  },
}

{
    "coastal-fog": {
        "text": {
            "value": "#1E2A2E",
            "type": "color"
        },
        "accent": {
            "value": "#3D555C",
            "type": "color"
        },
        "primary": {
            "value": "#6E9CA3",
            "type": "color"
        },
        "secondary": {
            "value": "#BCD6D9",
            "type": "color"
        },
        "surface": {
            "value": "#F0F6F6",
            "type": "color"
        }
    }
}

{
    "text": "#1E2A2E",
    "accent": "#3D555C",
    "primary": "#6E9CA3",
    "secondary": "#BCD6D9",
    "surface": "#F0F6F6"
}

/* Paste into Canva → Brand Kit → Brand Colors */
#1E2A2E
#3D555C
#6E9CA3
#BCD6D9
#F0F6F6

Download for Procreate

How the roles work

SurfaceThe lightest color — page and card backgrounds.

TextThe darkest color — body text and high-contrast UI.

PrimaryThe most chromatic middle — buttons, links, the one color that pushes.

AccentThe second most chromatic — badges, highlights, states.

SecondaryEverything else — fills, borders, supporting surfaces.

Coastal Fog

Contrast matrix

Export tokens

How the roles work

Related palettes