Aqua Obscura to Court-Bouillon color palette

136B6FAqua Obscura 777EB3Orbital 602E36Chocolate Truffle 75ADADTurquoise Fantasies D2D09DCourt-Bouillon

Open in generator Export PNG, PDF, ASE…

About this palette

Aqua Obscura to Court-Bouillon is a 5-color cool, vintage palette: #136B6F (Aqua Obscura), #777EB3 (Orbital), #602E36 (Chocolate Truffle), #75ADAD (Turquoise Fantasies), #D2D09D (Court-Bouillon). It mixes turquoise, purple, brown, yellow tones and feels cool overall. The strongest text pairing is #602E36 on #D2D09D with a contrast ratio of 6.82:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Aqua Obscura	rgb(19, 107, 111)	hsl(183, 71%, 25%)
Orbital	rgb(119, 126, 179)	hsl(233, 28%, 58%)
Chocolate Truffle	rgb(96, 46, 54)	hsl(350, 35%, 28%)
Turquoise Fantasies	rgb(117, 173, 173)	hsl(180, 25%, 57%)
Court-Bouillon	rgb(210, 208, 157)	hsl(58, 37%, 72%)

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.

Aa6.82:1 Good#602E36 on #D2D09D
Aa6.82:1 Good#D2D09D on #602E36
Aa4.29:1 Poor#602E36 on #75ADAD
Aa4.29:1 Poor#75ADAD on #602E36
Aa3.94:1 Poor#136B6F on #D2D09D
Aa3.94:1 Poor#D2D09D on #136B6F

Color blindness preview

CSS variables

/* Aqua Obscura to Court-Bouillon — https://swatchly.xyz/palette/136b6f-777eb3-602e36-75adad-d2d09d */
:root {
  --aqua-obscura: #136b6f;
  --orbital: #777eb3;
  --chocolate-truffle: #602e36;
  --turquoise-fantasies: #75adad;
  --court-bouillon: #d2d09d;
}

Tailwind CSS v4

/* Aqua Obscura to Court-Bouillon — https://swatchly.xyz/palette/136b6f-777eb3-602e36-75adad-d2d09d */
@theme {
  --color-aqua-obscura: #136b6f;
  --color-aqua-obscura-50: #d9fdff;
  --color-aqua-obscura-100: #c7f5f8;
  --color-aqua-obscura-200: #aee5e8;
  --color-aqua-obscura-300: #92d2d5;
  --color-aqua-obscura-400: #6cb5b8;
  --color-aqua-obscura-500: #4d9b9f;
  --color-aqua-obscura-600: #328185;
  --color-aqua-obscura-700: #136b6f;
  --color-aqua-obscura-800: #055458;
  --color-aqua-obscura-900: #004144;
  --color-aqua-obscura-950: #00292b;
  --color-orbital: #777eb3;
  --color-orbital-50: #f2f4ff;
  --color-orbital-100: #e5e8ff;
  --color-orbital-200: #ccd2fe;
  --color-orbital-300: #b3bbec;
  --color-orbital-400: #939acf;
  --color-orbital-500: #777eb3;
  --color-orbital-600: #5e6496;
  --color-orbital-700: #494f7c;
  --color-orbital-800: #393d64;
  --color-orbital-900: #2b2e50;
  --color-orbital-950: #1a1c34;
  --color-chocolate-truffle: #602e36;
  --color-chocolate-truffle-50: #fff1f2;
  --color-chocolate-truffle-100: #ffe3e6;
  --color-chocolate-truffle-200: #f9cace;
  --color-chocolate-truffle-300: #e6b0b6;
  --color-chocolate-truffle-400: #c88f95;
  --color-chocolate-truffle-500: #ac727a;
  --color-chocolate-truffle-600: #8e585f;
  --color-chocolate-truffle-700: #73434a;
  --color-chocolate-truffle-800: #602e36;
  --color-chocolate-truffle-900: #48252a;
  --color-chocolate-truffle-950: #2e1519;
  --color-turquoise-fantasies: #75adad;
  --color-turquoise-fantasies-50: #ddfcfc;
  --color-turquoise-fantasies-100: #d0f3f3;
  --color-turquoise-fantasies-200: #b7e1e0;
  --color-turquoise-fantasies-300: #9bcbcb;
  --color-turquoise-fantasies-400: #75adad;
  --color-turquoise-fantasies-500: #5a9191;
  --color-turquoise-fantasies-600: #407676;
  --color-turquoise-fantasies-700: #2c5f5f;
  --color-turquoise-fantasies-800: #1d4a4b;
  --color-turquoise-fantasies-900: #133a3a;
  --color-turquoise-fantasies-950: #082424;
  --color-court-bouillon: #d2d09d;
  --color-court-bouillon-50: #f1f0d1;
  --color-court-bouillon-100: #e6e4c2;
  --color-court-bouillon-200: #d2d09d;
  --color-court-bouillon-300: #bdbb8f;
  --color-court-bouillon-400: #a09e6e;
  --color-court-bouillon-500: #868454;
  --color-court-bouillon-600: #6d6b3d;
  --color-court-bouillon-700: #58562b;
  --color-court-bouillon-800: #46441e;
  --color-court-bouillon-900: #363414;
  --color-court-bouillon-950: #222009;
}