Sea Glass Teal to Moelleux au Chocolat color palette

9CE8D7Sea Glass Teal C49F7DFrench Oak 008F79Go Go Green 6F529DPassion Flower 563200Moelleux au Chocolat

Open in generator Export PNG, PDF, ASE…

About this palette

Sea Glass Teal to Moelleux au Chocolat is a 5-color cool, vintage palette: #9CE8D7 (Sea Glass Teal), #C49F7D (French Oak), #008F79 (Go Go Green), #6F529D (Passion Flower), #563200 (Moelleux au Chocolat). It mixes turquoise, orange, purple, brown tones and feels cool overall. The strongest text pairing is #9CE8D7 on #563200 with a contrast ratio of 8.07:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Sea Glass Teal	rgb(156, 232, 215)	hsl(167, 62%, 76%)
French Oak	rgb(196, 159, 125)	hsl(29, 38%, 63%)
Go Go Green	rgb(0, 143, 121)	hsl(171, 100%, 28%)
Passion Flower	rgb(111, 82, 157)	hsl(263, 31%, 47%)
Moelleux au Chocolat	rgb(86, 50, 0)	hsl(35, 100%, 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.07:1 Very good#9CE8D7 on #563200
Aa8.07:1 Very good#563200 on #9CE8D7
Aa4.65:1 Good#C49F7D on #563200
Aa4.65:1 Good#563200 on #C49F7D
Aa4.43:1 Poor#9CE8D7 on #6F529D
Aa4.43:1 Poor#6F529D on #9CE8D7

Color blindness preview

CSS variables

/* Sea Glass Teal to Moelleux au Chocolat — https://swatchly.xyz/palette/9ce8d7-c49f7d-008f79-6f529d-563200 */
:root {
  --sea-glass-teal: #9ce8d7;
  --french-oak: #c49f7d;
  --go-go-green: #008f79;
  --passion-flower: #6f529d;
  --moelleux-au-chocolat: #563200;
}

Tailwind CSS v4

/* Sea Glass Teal to Moelleux au Chocolat — https://swatchly.xyz/palette/9ce8d7-c49f7d-008f79-6f529d-563200 */
@theme {
  --color-sea-glass-teal: #9ce8d7;
  --color-sea-glass-teal-50: #d6fff5;
  --color-sea-glass-teal-100: #c8f6eb;
  --color-sea-glass-teal-200: #9ce8d7;
  --color-sea-glass-teal-300: #90cfc1;
  --color-sea-glass-teal-400: #69b1a1;
  --color-sea-glass-teal-500: #4a9586;
  --color-sea-glass-teal-600: #2f7a6c;
  --color-sea-glass-teal-700: #196256;
  --color-sea-glass-teal-800: #084e43;
  --color-sea-glass-teal-900: #003c33;
  --color-sea-glass-teal-950: #002620;
  --color-french-oak: #c49f7d;
  --color-french-oak-50: #fff5ec;
  --color-french-oak-100: #ffead7;
  --color-french-oak-200: #f2d6bc;
  --color-french-oak-300: #dfbfa2;
  --color-french-oak-400: #c49f7d;
  --color-french-oak-500: #a68362;
  --color-french-oak-600: #896747;
  --color-french-oak-700: #6f5133;
  --color-french-oak-800: #583e24;
  --color-french-oak-900: #452e18;
  --color-french-oak-950: #2b1b0c;
  --color-go-go-green: #008f79;
  --color-go-go-green-50: #d0fff2;
  --color-go-go-green-100: #b5f7e6;
  --color-go-go-green-200: #94e4d0;
  --color-go-go-green-300: #6fcdb7;
  --color-go-go-green-400: #3dad96;
  --color-go-go-green-500: #008f79;
  --color-go-go-green-600: #007361;
  --color-go-go-green-700: #005c4d;
  --color-go-go-green-800: #00483c;
  --color-go-go-green-900: #00392f;
  --color-go-go-green-950: #00241d;
  --color-passion-flower: #6f529d;
  --color-passion-flower-50: #f7f3ff;
  --color-passion-flower-100: #ede5ff;
  --color-passion-flower-200: #dccaff;
  --color-passion-flower-300: #c7aef6;
  --color-passion-flower-400: #a78bd9;
  --color-passion-flower-500: #8b6ebb;
  --color-passion-flower-600: #6f529d;
  --color-passion-flower-700: #593f80;
  --color-passion-flower-800: #462f68;
  --color-passion-flower-900: #362353;
  --color-passion-flower-950: #221437;
  --color-moelleux-au-chocolat: #563200;
  --color-moelleux-au-chocolat-50: #fff3e7;
  --color-moelleux-au-chocolat-100: #ffe6ce;
  --color-moelleux-au-chocolat-200: #f2d1b0;
  --color-moelleux-au-chocolat-300: #ddb891;
  --color-moelleux-au-chocolat-400: #bf966c;
  --color-moelleux-au-chocolat-500: #a2794e;
  --color-moelleux-au-chocolat-600: #845e34;
  --color-moelleux-au-chocolat-700: #694721;
  --color-moelleux-au-chocolat-800: #563200;
  --color-moelleux-au-chocolat-900: #3f270b;
  --color-moelleux-au-chocolat-950: #281704;
}