Coyote to Puffy Cloud Color Palette

About this palette

Coyote to Puffy Cloud is a 5-color cool, vintage palette: #D69A6F (Coyote), #BF7837 (Molten Caramel), #00434F (Cold and Dark), #005E71 (Deep Lagoon), #D8E0FF (Puffy Cloud). It mixes orange, turquoise, blue tones and feels cool overall. The strongest text pairing is #00434F on #D8E0FF with a contrast ratio of 8.37:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Coyote	rgb(214, 154, 111)	hsl(25, 56%, 64%)
Molten Caramel	rgb(191, 120, 55)	hsl(29, 55%, 48%)
Cold and Dark	rgb(0, 67, 79)	hsl(189, 100%, 15%)
Deep Lagoon	rgb(0, 94, 113)	hsl(190, 100%, 22%)
Puffy Cloud	rgb(216, 224, 255)	hsl(228, 100%, 92%)

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.37:1 Very good#00434F on #D8E0FF
Aa8.37:1 Very good#D8E0FF on #00434F
Aa5.64:1 Good#005E71 on #D8E0FF
Aa5.64:1 Good#D8E0FF on #005E71
Aa4.55:1 Good#D69A6F on #00434F
Aa4.55:1 Good#00434F on #D69A6F
Aa3.11:1 Poor#BF7837 on #00434F
Aa3.11:1 Poor#00434F on #BF7837

Color blindness preview

CSS variables

/* Coyote to Puffy Cloud — https://swatchly.xyz/palette/d69a6f-bf7837-00434f-005e71-d8e0ff */
:root {
  --coyote: #d69a6f;
  --molten-caramel: #bf7837;
  --cold-and-dark: #00434f;
  --deep-lagoon: #005e71;
  --puffy-cloud: #d8e0ff;
}

Tailwind CSS v4

/* Coyote to Puffy Cloud — https://swatchly.xyz/palette/d69a6f-bf7837-00434f-005e71-d8e0ff */
@theme {
  --color-coyote: #d69a6f;
  --color-coyote-50: #fff6f0;
  --color-coyote-100: #ffebdd;
  --color-coyote-200: #ffd3b4;
  --color-coyote-300: #eebb98;
  --color-coyote-400: #d69a6f;
  --color-coyote-500: #b77d53;
  --color-coyote-600: #996238;
  --color-coyote-700: #7d4b23;
  --color-coyote-800: #643814;
  --color-coyote-900: #4e290a;
  --color-coyote-950: #321803;
  --color-molten-caramel: #bf7837;
  --color-molten-caramel-50: #fff4eb;
  --color-molten-caramel-100: #ffe8d7;
  --color-molten-caramel-200: #ffd0aa;
  --color-molten-caramel-300: #f5b581;
  --color-molten-caramel-400: #d99458;
  --color-molten-caramel-500: #bf7837;
  --color-molten-caramel-600: #a05d16;
  --color-molten-caramel-700: #834700;
  --color-molten-caramel-800: #673700;
  --color-molten-caramel-900: #502900;
  --color-molten-caramel-950: #331800;
  --color-cold-and-dark: #00434f;
  --color-cold-and-dark-50: #e4faff;
  --color-cold-and-dark-100: #cff2fb;
  --color-cold-and-dark-200: #b6e0ea;
  --color-cold-and-dark-300: #98c9d5;
  --color-cold-and-dark-400: #72a9b6;
  --color-cold-and-dark-500: #548c99;
  --color-cold-and-dark-600: #39707c;
  --color-cold-and-dark-700: #255762;
  --color-cold-and-dark-800: #00434f;
  --color-cold-and-dark-900: #0e323a;
  --color-cold-and-dark-950: #051f24;
  --color-deep-lagoon: #005e71;
  --color-deep-lagoon-50: #e6f9ff;
  --color-deep-lagoon-100: #cbf3ff;
  --color-deep-lagoon-200: #ace1f1;
  --color-deep-lagoon-300: #8dccde;
  --color-deep-lagoon-400: #66adc1;
  --color-deep-lagoon-500: #4691a5;
  --color-deep-lagoon-600: #2a7589;
  --color-deep-lagoon-700: #005e71;
  --color-deep-lagoon-800: #024959;
  --color-deep-lagoon-900: #003945;
  --color-deep-lagoon-950: #00232c;
  --color-puffy-cloud: #d8e0ff;
  --color-puffy-cloud-50: #e7ecff;
  --color-puffy-cloud-100: #d8e0ff;
  --color-puffy-cloud-200: #c8cee6;
  --color-puffy-cloud-300: #b3b9d4;
  --color-puffy-cloud-400: #949cb8;
  --color-puffy-cloud-500: #7b829e;
  --color-puffy-cloud-600: #626983;
  --color-puffy-cloud-700: #4e546c;
  --color-puffy-cloud-800: #3c4156;
  --color-puffy-cloud-900: #2e3243;
  --color-puffy-cloud-950: #1b1e2b;
}