Start generating

North Atlantic to Bridal Scent color palette

577C7CNorth Atlantic6B9D97Emerald OasisCBAA9DFrappé3E536CInto the Stratosphere182A39Oceanic NoirE8D3CCBridal Scent
Open in generator Export PNG, PDF, ASE…

About this palette

North Atlantic to Bridal Scent is a 6-color muted, cool palette: #577C7C (North Atlantic), #6B9D97 (Emerald Oasis), #CBAA9D (Frappé), #3E536C (Into the Stratosphere), #182A39 (Oceanic Noir), #E8D3CC (Bridal Scent). It mixes turquoise, orange, blue, gray tones and feels cool overall. The strongest text pairing is #182A39 on #E8D3CC with a contrast ratio of 10.23:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
North Atlanticrgb(87, 124, 124)hsl(180, 18%, 41%)
Emerald Oasisrgb(107, 157, 151)hsl(173, 20%, 52%)
Frappérgb(203, 170, 157)hsl(17, 31%, 71%)
Into the Stratospherergb(62, 83, 108)hsl(213, 27%, 33%)
Oceanic Noirrgb(24, 42, 57)hsl(207, 41%, 16%)
Bridal Scentrgb(232, 211, 204)hsl(15, 38%, 85%)

Accessible color pairs

Pairs with at least 3:1 contrast (large text and UI components); 4.5:1 or more passes WCAG AA for body text.

  • Aa10.23:1 Very good#182A39 on #E8D3CC
  • Aa10.23:1 Very good#E8D3CC on #182A39
  • Aa6.84:1 Good#CBAA9D on #182A39
  • Aa6.84:1 Good#182A39 on #CBAA9D
  • Aa5.50:1 Good#3E536C on #E8D3CC
  • Aa5.50:1 Good#E8D3CC on #3E536C
  • Aa4.82:1 Good#6B9D97 on #182A39
  • Aa4.82:1 Good#182A39 on #6B9D97

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* North Atlantic to Bridal Scent — https://swatchly.xyz/palette/577c7c-6b9d97-cbaa9d-3e536c-182a39-e8d3cc */
:root {
  --north-atlantic: #577c7c;
  --emerald-oasis: #6b9d97;
  --frapp: #cbaa9d;
  --into-the-stratosphere: #3e536c;
  --oceanic-noir: #182a39;
  --bridal-scent: #e8d3cc;
}

Tailwind CSS v4

/* North Atlantic to Bridal Scent — https://swatchly.xyz/palette/577c7c-6b9d97-cbaa9d-3e536c-182a39-e8d3cc */
@theme {
  --color-north-atlantic: #577c7c;
  --color-north-atlantic-50: #e4fafa;
  --color-north-atlantic-100: #daf2f2;
  --color-north-atlantic-200: #c5e1e1;
  --color-north-atlantic-300: #accdcd;
  --color-north-atlantic-400: #8bb0af;
  --color-north-atlantic-500: #709695;
  --color-north-atlantic-600: #577c7c;
  --color-north-atlantic-700: #416363;
  --color-north-atlantic-800: #2f4e4e;
  --color-north-atlantic-900: #223c3c;
  --color-north-atlantic-950: #122525;
  --color-emerald-oasis: #6b9d97;
  --color-emerald-oasis-50: #e3fefa;
  --color-emerald-oasis-100: #d9f7f3;
  --color-emerald-oasis-200: #c3e7e2;
  --color-emerald-oasis-300: #aad3ce;
  --color-emerald-oasis-400: #87b6b0;
  --color-emerald-oasis-500: #6b9d97;
  --color-emerald-oasis-600: #4f807a;
  --color-emerald-oasis-700: #386661;
  --color-emerald-oasis-800: #27504b;
  --color-emerald-oasis-900: #1a3d39;
  --color-emerald-oasis-950: #0c2623;
  --color-frapp: #cbaa9d;
  --color-frapp-50: #fee8e0;
  --color-frapp-100: #f3dbd2;
  --color-frapp-200: #e0c4b9;
  --color-frapp-300: #cbaa9d;
  --color-frapp-400: #ad8e81;
  --color-frapp-500: #947569;
  --color-frapp-600: #7a5e52;
  --color-frapp-700: #644a40;
  --color-frapp-800: #513a31;
  --color-frapp-900: #412e26;
  --color-frapp-950: #291b16;
  --color-into-the-stratosphere: #3e536c;
  --color-into-the-stratosphere-50: #eef6ff;
  --color-into-the-stratosphere-100: #deedff;
  --color-into-the-stratosphere-200: #c6d9ef;
  --color-into-the-stratosphere-300: #adc2db;
  --color-into-the-stratosphere-400: #8ba2bd;
  --color-into-the-stratosphere-500: #6f85a1;
  --color-into-the-stratosphere-600: #556a84;
  --color-into-the-stratosphere-700: #3e536c;
  --color-into-the-stratosphere-800: #304154;
  --color-into-the-stratosphere-900: #243242;
  --color-into-the-stratosphere-950: #141e2a;
  --color-oceanic-noir: #182a39;
  --color-oceanic-noir-50: #edf7ff;
  --color-oceanic-noir-100: #dfedfa;
  --color-oceanic-noir-200: #c9dae9;
  --color-oceanic-noir-300: #b1c4d4;
  --color-oceanic-noir-400: #90a4b6;
  --color-oceanic-noir-500: #768b9d;
  --color-oceanic-noir-600: #5e7283;
  --color-oceanic-noir-700: #4a5d6d;
  --color-oceanic-noir-800: #3a4b59;
  --color-oceanic-noir-900: #2e3d49;
  --color-oceanic-noir-950: #182a39;
  --color-bridal-scent: #e8d3cc;
  --color-bridal-scent-50: #fff3ef;
  --color-bridal-scent-100: #f6e9e4;
  --color-bridal-scent-200: #e8d3cc;
  --color-bridal-scent-300: #cfbdb7;
  --color-bridal-scent-400: #b09d97;
  --color-bridal-scent-500: #95827b;
  --color-bridal-scent-600: #796761;
  --color-bridal-scent-700: #61514c;
  --color-bridal-scent-800: #4d3f3a;
  --color-bridal-scent-900: #3c302c;
  --color-bridal-scent-950: #261d1a;
}

Similar palettes