Cloisonné to Cotton Boll Color Palette

About this palette

Cloisonné to Cotton Boll is a 5-color vintage palette: #006EAE (Cloisonné), #BE8300 (Gothic Gold), #5D3E00 (Pineapple), #6FC0FF (Cooler Than Ever), #E2F2FF (Cotton Boll). It mixes blue, yellow, brown, white tones and feels balanced overall. The strongest text pairing is #5D3E00 on #E2F2FF with a contrast ratio of 8.53:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cloisonné	rgb(0, 110, 174)	hsl(202, 100%, 34%)
Gothic Gold	rgb(190, 131, 0)	hsl(41, 100%, 37%)
Pineapple	rgb(93, 62, 0)	hsl(40, 100%, 18%)
Cooler Than Ever	rgb(111, 192, 255)	hsl(206, 100%, 72%)
Cotton Boll	rgb(226, 242, 255)	hsl(207, 100%, 94%)

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.53:1 Very good#5D3E00 on #E2F2FF
Aa8.53:1 Very good#E2F2FF on #5D3E00
Aa4.95:1 Good#5D3E00 on #6FC0FF
Aa4.95:1 Good#6FC0FF on #5D3E00
Aa4.78:1 Good#006EAE on #E2F2FF
Aa4.78:1 Good#E2F2FF on #006EAE

Color blindness preview

CSS variables

/* Cloisonné to Cotton Boll — https://swatchly.xyz/palette/006eae-be8300-5d3e00-6fc0ff-e2f2ff */
:root {
  --cloisonn: #006eae;
  --gothic-gold: #be8300;
  --pineapple: #5d3e00;
  --cooler-than-ever: #6fc0ff;
  --cotton-boll: #e2f2ff;
}

Tailwind CSS v4

/* Cloisonné to Cotton Boll — https://swatchly.xyz/palette/006eae-be8300-5d3e00-6fc0ff-e2f2ff */
@theme {
  --color-cloisonn: #006eae;
  --color-cloisonn-50: #edf7ff;
  --color-cloisonn-100: #daedff;
  --color-cloisonn-200: #b3dcff;
  --color-cloisonn-300: #83c7ff;
  --color-cloisonn-400: #54a7e8;
  --color-cloisonn-500: #308acc;
  --color-cloisonn-600: #006eae;
  --color-cloisonn-700: #00578b;
  --color-cloisonn-800: #00446e;
  --color-cloisonn-900: #003457;
  --color-cloisonn-950: #002038;
  --color-gothic-gold: #be8300;
  --color-gothic-gold-50: #fff6e8;
  --color-gothic-gold-100: #ffecd0;
  --color-gothic-gold-200: #ffd698;
  --color-gothic-gold-300: #f1be70;
  --color-gothic-gold-400: #d79e40;
  --color-gothic-gold-500: #be8300;
  --color-gothic-gold-600: #996900;
  --color-gothic-gold-700: #7a5300;
  --color-gothic-gold-800: #5f4000;
  --color-gothic-gold-900: #493000;
  --color-gothic-gold-950: #2e1d00;
  --color-pineapple: #5d3e00;
  --color-pineapple-50: #fff3e3;
  --color-pineapple-100: #ffe8c6;
  --color-pineapple-200: #eed3ab;
  --color-pineapple-300: #dbbc8f;
  --color-pineapple-400: #be9c6a;
  --color-pineapple-500: #a3814d;
  --color-pineapple-600: #886734;
  --color-pineapple-700: #6f5121;
  --color-pineapple-800: #5d3e00;
  --color-pineapple-900: #463009;
  --color-pineapple-950: #2d1d03;
  --color-cooler-than-ever: #6fc0ff;
  --color-cooler-than-ever-50: #e4f3ff;
  --color-cooler-than-ever-100: #cee9ff;
  --color-cooler-than-ever-200: #a4d6ff;
  --color-cooler-than-ever-300: #6fc0ff;
  --color-cooler-than-ever-400: #53a1dd;
  --color-cooler-than-ever-500: #3487c3;
  --color-cooler-than-ever-600: #166da6;
  --color-cooler-than-ever-700: #005789;
  --color-cooler-than-ever-800: #00456e;
  --color-cooler-than-ever-900: #003657;
  --color-cooler-than-ever-950: #002139;
  --color-cotton-boll: #e2f2ff;
  --color-cotton-boll-50: #f3faff;
  --color-cotton-boll-100: #e2f2ff;
  --color-cotton-boll-200: #d1dde6;
  --color-cotton-boll-300: #b9c6d0;
  --color-cotton-boll-400: #97a6b1;
  --color-cotton-boll-500: #7b8a95;
  --color-cotton-boll-600: #616e79;
  --color-cotton-boll-700: #4b5761;
  --color-cotton-boll-800: #39444d;
  --color-cotton-boll-900: #2b343b;
  --color-cotton-boll-950: #1a2025;
}