Copper to Dark Denim color palette

B6712DCopper 643300Brown F4CBB4Bellini 98C3E8Sail to the Sea 2BA7EFCerulean 005991Dark Denim

About this palette

Copper to Dark Denim is a 6-color vintage palette: #B6712D (Copper), #643300 (Brown), #F4CBB4 (Bellini), #98C3E8 (Sail to the Sea), #2BA7EF (Cerulean), #005991 (Dark Denim). It mixes orange, brown, blue tones and feels balanced overall. The strongest text pairing is #643300 on #F4CBB4 with a contrast ratio of 6.97:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Copper	rgb(182, 113, 45)	hsl(30, 60%, 45%)
Brown	rgb(100, 51, 0)	hsl(31, 100%, 20%)
Bellini	rgb(244, 203, 180)	hsl(22, 74%, 83%)
Sail to the Sea	rgb(152, 195, 232)	hsl(208, 63%, 75%)
Cerulean	rgb(43, 167, 239)	hsl(202, 86%, 55%)
Dark Denim	rgb(0, 89, 145)	hsl(203, 100%, 28%)

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.97:1 Good#643300 on #F4CBB4
Aa6.97:1 Good#F4CBB4 on #643300
Aa5.61:1 Good#643300 on #98C3E8
Aa5.61:1 Good#98C3E8 on #643300
Aa4.95:1 Good#F4CBB4 on #005991
Aa4.95:1 Good#005991 on #F4CBB4
Aa3.98:1 Poor#98C3E8 on #005991
Aa3.98:1 Poor#005991 on #98C3E8

Color blindness preview

CSS variables

/* Copper to Dark Denim — https://swatchly.xyz/palette/b6712d-643300-f4cbb4-98c3e8-2ba7ef-005991 */
:root {
  --copper: #b6712d;
  --brown: #643300;
  --bellini: #f4cbb4;
  --sail-to-the-sea: #98c3e8;
  --cerulean: #2ba7ef;
  --dark-denim: #005991;
}

Tailwind CSS v4

/* Copper to Dark Denim — https://swatchly.xyz/palette/b6712d-643300-f4cbb4-98c3e8-2ba7ef-005991 */
@theme {
  --color-copper: #b6712d;
  --color-copper-50: #fff2e8;
  --color-copper-100: #ffe5cf;
  --color-copper-200: #ffca9e;
  --color-copper-300: #efb079;
  --color-copper-400: #d28e4f;
  --color-copper-500: #b6712d;
  --color-copper-600: #99570b;
  --color-copper-700: #7b4400;
  --color-copper-800: #613400;
  --color-copper-900: #4c2800;
  --color-copper-950: #311800;
  --color-brown: #643300;
  --color-brown-50: #fff2ea;
  --color-brown-100: #ffe6d4;
  --color-brown-200: #facdad;
  --color-brown-300: #e7b590;
  --color-brown-400: #ca946a;
  --color-brown-500: #af784d;
  --color-brown-600: #915d34;
  --color-brown-700: #774821;
  --color-brown-800: #643300;
  --color-brown-900: #4b280a;
  --color-brown-950: #301803;
  --color-bellini: #f4cbb4;
  --color-bellini-50: #fff0e7;
  --color-bellini-100: #fde3d4;
  --color-bellini-200: #f4cbb4;
  --color-bellini-300: #d9b6a3;
  --color-bellini-400: #bc9782;
  --color-bellini-500: #a17c66;
  --color-bellini-600: #85624e;
  --color-bellini-700: #6c4d3a;
  --color-bellini-800: #573b2b;
  --color-bellini-900: #442d1f;
  --color-bellini-950: #2c1b11;
  --color-sail-to-the-sea: #98c3e8;
  --color-sail-to-the-sea-50: #eaf5ff;
  --color-sail-to-the-sea-100: #d6ecff;
  --color-sail-to-the-sea-200: #b8d9f6;
  --color-sail-to-the-sea-300: #98c3e8;
  --color-sail-to-the-sea-400: #7ba4c6;
  --color-sail-to-the-sea-500: #6089ab;
  --color-sail-to-the-sea-600: #476f8f;
  --color-sail-to-the-sea-700: #345876;
  --color-sail-to-the-sea-800: #25455f;
  --color-sail-to-the-sea-900: #1a354b;
  --color-sail-to-the-sea-950: #0d2131;
  --color-cerulean: #2ba7ef;
  --color-cerulean-50: #e9f6ff;
  --color-cerulean-100: #d4edff;
  --color-cerulean-200: #abdbff;
  --color-cerulean-300: #75c7ff;
  --color-cerulean-400: #2ba7ef;
  --color-cerulean-500: #008bce;
  --color-cerulean-600: #0070a7;
  --color-cerulean-700: #005986;
  --color-cerulean-800: #00466a;
  --color-cerulean-900: #003654;
  --color-cerulean-950: #002237;
  --color-dark-denim: #005991;
  --color-dark-denim-50: #edf6ff;
  --color-dark-denim-100: #dbeeff;
  --color-dark-denim-200: #b6dcff;
  --color-dark-denim-300: #8bc8fd;
  --color-dark-denim-400: #63a8e3;
  --color-dark-denim-500: #448cc7;
  --color-dark-denim-600: #2871a9;
  --color-dark-denim-700: #005991;
  --color-dark-denim-800: #014572;
  --color-dark-denim-900: #00355a;
  --color-dark-denim-950: #00213b;
}