Start generating

Subtle Breeze to Royal Neptune color palette

B2CED1Subtle BreezeF2D2D2Ballet8E7470Gotham614540Death by Chocolate73ABB9Blue Eye Samurai163B41Royal Neptune
Open in generator Export PNG, PDF, ASE…

About this palette

Subtle Breeze to Royal Neptune is a 6-color muted palette: #B2CED1 (Subtle Breeze), #F2D2D2 (Ballet), #8E7470 (Gotham), #614540 (Death by Chocolate), #73ABB9 (Blue Eye Samurai), #163B41 (Royal Neptune). It mixes gray, pink, brown, blue, turquoise tones and feels balanced overall. The strongest text pairing is #F2D2D2 on #163B41 with a contrast ratio of 8.60:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Subtle Breezergb(178, 206, 209)hsl(186, 25%, 76%)
Balletrgb(242, 210, 210)hsl(0, 55%, 89%)
Gothamrgb(142, 116, 112)hsl(8, 12%, 50%)
Death by Chocolatergb(97, 69, 64)hsl(9, 20%, 32%)
Blue Eye Samurairgb(115, 171, 185)hsl(192, 33%, 59%)
Royal Neptunergb(22, 59, 65)hsl(188, 49%, 17%)

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.

  • Aa8.60:1 Very good#F2D2D2 on #163B41
  • Aa8.60:1 Very good#163B41 on #F2D2D2
  • Aa7.28:1 Very good#B2CED1 on #163B41
  • Aa7.28:1 Very good#163B41 on #B2CED1
  • Aa6.13:1 Good#F2D2D2 on #614540
  • Aa6.13:1 Good#614540 on #F2D2D2
  • Aa5.19:1 Good#B2CED1 on #614540
  • Aa5.19:1 Good#614540 on #B2CED1

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Subtle Breeze to Royal Neptune — https://swatchly.xyz/palette/b2ced1-f2d2d2-8e7470-614540-73abb9-163b41 */
:root {
  --subtle-breeze: #b2ced1;
  --ballet: #f2d2d2;
  --gotham: #8e7470;
  --death-by-chocolate: #614540;
  --blue-eye-samurai: #73abb9;
  --royal-neptune: #163b41;
}

Tailwind CSS v4

/* Subtle Breeze to Royal Neptune — https://swatchly.xyz/palette/b2ced1-f2d2d2-8e7470-614540-73abb9-163b41 */
@theme {
  --color-subtle-breeze: #b2ced1;
  --color-subtle-breeze-50: #edfcfe;
  --color-subtle-breeze-100: #e3f4f5;
  --color-subtle-breeze-200: #cee2e4;
  --color-subtle-breeze-300: #b2ced1;
  --color-subtle-breeze-400: #93adaf;
  --color-subtle-breeze-500: #769093;
  --color-subtle-breeze-600: #5b7477;
  --color-subtle-breeze-700: #455c5f;
  --color-subtle-breeze-800: #33474a;
  --color-subtle-breeze-900: #253638;
  --color-subtle-breeze-950: #152223;
  --color-ballet: #f2d2d2;
  --color-ballet-50: #fff5f5;
  --color-ballet-100: #fce9e9;
  --color-ballet-200: #f2d2d2;
  --color-ballet-300: #d7bcbc;
  --color-ballet-400: #b89c9c;
  --color-ballet-500: #9c7f80;
  --color-ballet-600: #806565;
  --color-ballet-700: #674f4f;
  --color-ballet-800: #513c3c;
  --color-ballet-900: #3f2d2e;
  --color-ballet-950: #281b1c;
  --color-gotham: #8e7470;
  --color-gotham-50: #ffefec;
  --color-gotham-100: #f5e2df;
  --color-gotham-200: #e2cbc8;
  --color-gotham-300: #cbb2ae;
  --color-gotham-400: #ab918d;
  --color-gotham-500: #8e7470;
  --color-gotham-600: #745c59;
  --color-gotham-700: #5e4845;
  --color-gotham-800: #4b3835;
  --color-gotham-900: #3b2b29;
  --color-gotham-950: #261b19;
  --color-death-by-chocolate: #614540;
  --color-death-by-chocolate-50: #fff2ef;
  --color-death-by-chocolate-100: #fbe6e1;
  --color-death-by-chocolate-200: #e9cfca;
  --color-death-by-chocolate-300: #d3b6b1;
  --color-death-by-chocolate-400: #b4948f;
  --color-death-by-chocolate-500: #977872;
  --color-death-by-chocolate-600: #795d57;
  --color-death-by-chocolate-700: #614540;
  --color-death-by-chocolate-800: #4b3632;
  --color-death-by-chocolate-900: #3b2925;
  --color-death-by-chocolate-950: #251816;
  --color-blue-eye-samurai: #73abb9;
  --color-blue-eye-samurai-50: #e4f9ff;
  --color-blue-eye-samurai-100: #cff2fb;
  --color-blue-eye-samurai-200: #b5dfea;
  --color-blue-eye-samurai-300: #9acad6;
  --color-blue-eye-samurai-400: #73abb9;
  --color-blue-eye-samurai-500: #588f9d;
  --color-blue-eye-samurai-600: #3e7481;
  --color-blue-eye-samurai-700: #2b5d69;
  --color-blue-eye-samurai-800: #1c4953;
  --color-blue-eye-samurai-900: #113941;
  --color-blue-eye-samurai-950: #07232a;
  --color-royal-neptune: #163b41;
  --color-royal-neptune-50: #e4fafe;
  --color-royal-neptune-100: #d8f1f5;
  --color-royal-neptune-200: #c0dee3;
  --color-royal-neptune-300: #a6c8ce;
  --color-royal-neptune-400: #85a9b0;
  --color-royal-neptune-500: #698f95;
  --color-royal-neptune-600: #50747a;
  --color-royal-neptune-700: #3c5d63;
  --color-royal-neptune-800: #2c4a4f;
  --color-royal-neptune-900: #163b41;
  --color-royal-neptune-950: #122427;
}

Similar palettes