Copacabana to Jazz color palette

036B91Copacabana 88C3DADolphin F3D3A0Igniting B69A6BVeranda Gold B65958Her Velour 602529Jazz

About this palette

Copacabana to Jazz is a 6-color warm, vintage palette: #036B91 (Copacabana), #88C3DA (Dolphin), #F3D3A0 (Igniting), #B69A6B (Veranda Gold), #B65958 (Her Velour), #602529 (Jazz). It mixes blue, yellow, red, brown tones and feels warm overall. The strongest text pairing is #F3D3A0 on #602529 with a contrast ratio of 8.16:1, and 2 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Copacabana	rgb(3, 107, 145)	hsl(196, 96%, 29%)
Dolphin	rgb(136, 195, 218)	hsl(197, 53%, 69%)
Igniting	rgb(243, 211, 160)	hsl(37, 78%, 79%)
Veranda Gold	rgb(182, 154, 107)	hsl(38, 34%, 57%)
Her Velour	rgb(182, 89, 88)	hsl(1, 39%, 53%)
Jazz	rgb(96, 37, 41)	hsl(356, 44%, 26%)

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.16:1 Very good#F3D3A0 on #602529
Aa8.16:1 Very good#602529 on #F3D3A0
Aa6.06:1 Good#88C3DA on #602529
Aa6.06:1 Good#602529 on #88C3DA
Aa4.36:1 Poor#B69A6B on #602529
Aa4.36:1 Poor#602529 on #B69A6B
Aa4.16:1 Poor#036B91 on #F3D3A0
Aa4.16:1 Poor#F3D3A0 on #036B91

Color blindness preview

CSS variables

/* Copacabana to Jazz — https://swatchly.xyz/palette/036b91-88c3da-f3d3a0-b69a6b-b65958-602529 */
:root {
  --copacabana: #036b91;
  --dolphin: #88c3da;
  --igniting: #f3d3a0;
  --veranda-gold: #b69a6b;
  --her-velour: #b65958;
  --jazz: #602529;
}

Tailwind CSS v4

/* Copacabana to Jazz — https://swatchly.xyz/palette/036b91-88c3da-f3d3a0-b69a6b-b65958-602529 */
@theme {
  --color-copacabana: #036b91;
  --color-copacabana-50: #eaf8ff;
  --color-copacabana-100: #d1efff;
  --color-copacabana-200: #a1ddfe;
  --color-copacabana-300: #7fc6eb;
  --color-copacabana-400: #55a5cd;
  --color-copacabana-500: #3288af;
  --color-copacabana-600: #036b91;
  --color-copacabana-700: #005574;
  --color-copacabana-800: #00425c;
  --color-copacabana-900: #003348;
  --color-copacabana-950: #00202f;
  --color-dolphin: #88c3da;
  --color-dolphin-50: #def5ff;
  --color-dolphin-100: #c6edfc;
  --color-dolphin-200: #acd9eb;
  --color-dolphin-300: #88c3da;
  --color-dolphin-400: #6ca4ba;
  --color-dolphin-500: #508aa0;
  --color-dolphin-600: #387185;
  --color-dolphin-700: #265a6d;
  --color-dolphin-800: #184858;
  --color-dolphin-900: #0f3846;
  --color-dolphin-950: #05232d;
  --color-igniting: #f3d3a0;
  --color-igniting-50: #fff4e3;
  --color-igniting-100: #fde9ca;
  --color-igniting-200: #f3d3a0;
  --color-igniting-300: #d8bd93;
  --color-igniting-400: #ba9d6e;
  --color-igniting-500: #9f8151;
  --color-igniting-600: #836738;
  --color-igniting-700: #6a5124;
  --color-igniting-800: #543e17;
  --color-igniting-900: #422f0d;
  --color-igniting-950: #2a1d05;
  --color-veranda-gold: #b69a6b;
  --color-veranda-gold-50: #fff2de;
  --color-veranda-gold-100: #fae7c8;
  --color-veranda-gold-200: #e8d2ae;
  --color-veranda-gold-300: #d3bb91;
  --color-veranda-gold-400: #b69a6b;
  --color-veranda-gold-500: #9a7f51;
  --color-veranda-gold-600: #7f6539;
  --color-veranda-gold-700: #675026;
  --color-veranda-gold-800: #523e19;
  --color-veranda-gold-900: #402f0f;
  --color-veranda-gold-950: #291d06;
  --color-her-velour: #b65958;
  --color-her-velour-50: #ffeeed;
  --color-her-velour-100: #ffdddb;
  --color-her-velour-200: #ffbdba;
  --color-her-velour-300: #f59c98;
  --color-her-velour-400: #d67775;
  --color-her-velour-500: #b65958;
  --color-her-velour-600: #994242;
  --color-her-velour-700: #7e3031;
  --color-her-velour-800: #662324;
  --color-her-velour-900: #52191a;
  --color-her-velour-950: #370d0e;
  --color-jazz: #602529;
  --color-jazz-50: #fff1f1;
  --color-jazz-100: #ffe4e3;
  --color-jazz-200: #ffc7c7;
  --color-jazz-300: #ecadad;
  --color-jazz-400: #cd8a8a;
  --color-jazz-500: #b06c6e;
  --color-jazz-600: #905254;
  --color-jazz-700: #733c3e;
  --color-jazz-800: #602529;
  --color-jazz-900: #461f21;
  --color-jazz-950: #2d1113;
}