Earthbound to Cotton Boll Color Palette

About this palette

Earthbound to Cotton Boll is a 5-color muted palette: #A68D7E (Earthbound), #283F4D (Depths of the Nile), #78655A (Bear Hug), #B0C7D7 (Cloudy Valley), #E3F0FC (Cotton Boll). It mixes orange, blue, gray, white tones and feels balanced overall. The strongest text pairing is #283F4D on #E3F0FC with a contrast ratio of 9.50:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Earthbound	rgb(166, 141, 126)	hsl(23, 18%, 57%)
Depths of the Nile	rgb(40, 63, 77)	hsl(203, 32%, 23%)
Bear Hug	rgb(120, 101, 90)	hsl(22, 14%, 41%)
Cloudy Valley	rgb(176, 199, 215)	hsl(205, 33%, 77%)
Cotton Boll	rgb(227, 240, 252)	hsl(209, 81%, 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.

Aa9.50:1 Very good#283F4D on #E3F0FC
Aa9.50:1 Very good#E3F0FC on #283F4D
Aa6.29:1 Good#283F4D on #B0C7D7
Aa6.29:1 Good#B0C7D7 on #283F4D
Aa4.76:1 Good#78655A on #E3F0FC
Aa4.76:1 Good#E3F0FC on #78655A
Aa3.53:1 Poor#A68D7E on #283F4D
Aa3.53:1 Poor#283F4D on #A68D7E

Color blindness preview

CSS variables

/* Earthbound to Cotton Boll — https://swatchly.xyz/palette/a68d7e-283f4d-78655a-b0c7d7-e3f0fc */
:root {
  --earthbound: #a68d7e;
  --depths-of-the-nile: #283f4d;
  --bear-hug: #78655a;
  --cloudy-valley: #b0c7d7;
  --cotton-boll: #e3f0fc;
}

Tailwind CSS v4

/* Earthbound to Cotton Boll — https://swatchly.xyz/palette/a68d7e-283f4d-78655a-b0c7d7-e3f0fc */
@theme {
  --color-earthbound: #a68d7e;
  --color-earthbound-50: #fff5f0;
  --color-earthbound-100: #fcece3;
  --color-earthbound-200: #eddacf;
  --color-earthbound-300: #dbc5b8;
  --color-earthbound-400: #bfa799;
  --color-earthbound-500: #a68d7e;
  --color-earthbound-600: #887062;
  --color-earthbound-700: #6e584b;
  --color-earthbound-800: #564338;
  --color-earthbound-900: #433229;
  --color-earthbound-950: #291e17;
  --color-depths-of-the-nile: #283f4d;
  --color-depths-of-the-nile-50: #ebf7ff;
  --color-depths-of-the-nile-100: #ddeef9;
  --color-depths-of-the-nile-200: #c7dbe8;
  --color-depths-of-the-nile-300: #adc3d2;
  --color-depths-of-the-nile-400: #8aa3b3;
  --color-depths-of-the-nile-500: #6d8696;
  --color-depths-of-the-nile-600: #536b7a;
  --color-depths-of-the-nile-700: #3e5360;
  --color-depths-of-the-nile-800: #283f4d;
  --color-depths-of-the-nile-900: #213039;
  --color-depths-of-the-nile-950: #121d23;
  --color-bear-hug: #78655a;
  --color-bear-hug-50: #fff2eb;
  --color-bear-hug-100: #f5e8e0;
  --color-bear-hug-200: #e3d3ca;
  --color-bear-hug-300: #cebbb1;
  --color-bear-hug-400: #af9b90;
  --color-bear-hug-500: #938074;
  --color-bear-hug-600: #78655a;
  --color-bear-hug-700: #604f46;
  --color-bear-hug-800: #4c3d35;
  --color-bear-hug-900: #3b2f28;
  --color-bear-hug-950: #251c17;
  --color-cloudy-valley: #b0c7d7;
  --color-cloudy-valley-50: #eef8ff;
  --color-cloudy-valley-100: #e1eff9;
  --color-cloudy-valley-200: #cbdce8;
  --color-cloudy-valley-300: #b0c7d7;
  --color-cloudy-valley-400: #92a7b6;
  --color-cloudy-valley-500: #758b9a;
  --color-cloudy-valley-600: #5b707e;
  --color-cloudy-valley-700: #465966;
  --color-cloudy-valley-800: #354550;
  --color-cloudy-valley-900: #27353e;
  --color-cloudy-valley-950: #172127;
  --color-cotton-boll: #e3f0fc;
  --color-cotton-boll-50: #f2f9ff;
  --color-cotton-boll-100: #e3f0fc;
  --color-cotton-boll-200: #d2dbe4;
  --color-cotton-boll-300: #bac4ce;
  --color-cotton-boll-400: #99a4af;
  --color-cotton-boll-500: #7d8993;
  --color-cotton-boll-600: #636e78;
  --color-cotton-boll-700: #4d5760;
  --color-cotton-boll-800: #3b444c;
  --color-cotton-boll-900: #2c343b;
  --color-cotton-boll-950: #1b2025;
}