Peach and Quiet to Dark Color Palette

About this palette

Peach and Quiet to Dark is a 5-color muted, warm, earthy, vintage palette: #FFCAB6 (Peach and Quiet), #CBA18B (Cashmere Clay), #6A7FA1 (Bay View), #514A29 (Jungle King), #132432 (Dark). It mixes orange, blue, brown tones and feels warm overall. The strongest text pairing is #FFCAB6 on #132432 with a contrast ratio of 10.84:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Peach and Quiet	rgb(255, 202, 182)	hsl(16, 100%, 86%)
Cashmere Clay	rgb(203, 161, 139)	hsl(21, 38%, 67%)
Bay View	rgb(106, 127, 161)	hsl(217, 23%, 52%)
Jungle King	rgb(81, 74, 41)	hsl(50, 33%, 24%)
Dark	rgb(19, 36, 50)	hsl(207, 45%, 14%)

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.

Aa10.84:1 Very good#FFCAB6 on #132432
Aa10.84:1 Very good#132432 on #FFCAB6
Aa6.79:1 Good#CBA18B on #132432
Aa6.79:1 Good#132432 on #CBA18B
Aa6.09:1 Good#FFCAB6 on #514A29
Aa6.09:1 Good#514A29 on #FFCAB6
Aa3.89:1 Poor#6A7FA1 on #132432
Aa3.89:1 Poor#132432 on #6A7FA1

Color blindness preview

CSS variables

/* Peach and Quiet to Dark — https://swatchly.xyz/palette/ffcab6-cba18b-6a7fa1-514a29-132432 */
:root {
  --peach-and-quiet: #ffcab6;
  --cashmere-clay: #cba18b;
  --bay-view: #6a7fa1;
  --jungle-king: #514a29;
  --dark: #132432;
}

Tailwind CSS v4

/* Peach and Quiet to Dark — https://swatchly.xyz/palette/ffcab6-cba18b-6a7fa1-514a29-132432 */
@theme {
  --color-peach-and-quiet: #ffcab6;
  --color-peach-and-quiet-50: #fff2ed;
  --color-peach-and-quiet-100: #ffe5db;
  --color-peach-and-quiet-200: #ffcab6;
  --color-peach-and-quiet-300: #e2b6a5;
  --color-peach-and-quiet-400: #c59583;
  --color-peach-and-quiet-500: #a97967;
  --color-peach-and-quiet-600: #8d5f4e;
  --color-peach-and-quiet-700: #734a3a;
  --color-peach-and-quiet-800: #5c382a;
  --color-peach-and-quiet-900: #482a1e;
  --color-peach-and-quiet-950: #2e1911;
  --color-cashmere-clay: #cba18b;
  --color-cashmere-clay-50: #fff7f3;
  --color-cashmere-clay-100: #ffece2;
  --color-cashmere-clay-200: #f6d7c7;
  --color-cashmere-clay-300: #e4c1af;
  --color-cashmere-clay-400: #cba18b;
  --color-cashmere-clay-500: #ac846f;
  --color-cashmere-clay-600: #8e6854;
  --color-cashmere-clay-700: #73503e;
  --color-cashmere-clay-800: #5b3d2d;
  --color-cashmere-clay-900: #472d20;
  --color-cashmere-clay-950: #2c1a11;
  --color-bay-view: #6a7fa1;
  --color-bay-view-50: #edf4ff;
  --color-bay-view-100: #dce9ff;
  --color-bay-view-200: #c2d4f1;
  --color-bay-view-300: #a8bcdc;
  --color-bay-view-400: #869cbe;
  --color-bay-view-500: #6a7fa1;
  --color-bay-view-600: #526686;
  --color-bay-view-700: #3f516d;
  --color-bay-view-800: #303f58;
  --color-bay-view-900: #243146;
  --color-bay-view-950: #151e2e;
  --color-jungle-king: #514a29;
  --color-jungle-king-50: #faf6e1;
  --color-jungle-king-100: #f0ecd4;
  --color-jungle-king-200: #ded8bd;
  --color-jungle-king-300: #cac3a4;
  --color-jungle-king-400: #aca583;
  --color-jungle-king-500: #928b68;
  --color-jungle-king-600: #797250;
  --color-jungle-king-700: #635c3d;
  --color-jungle-king-800: #514a29;
  --color-jungle-king-900: #3e3921;
  --color-jungle-king-950: #282412;
  --color-dark: #132432;
  --color-dark-50: #edf7ff;
  --color-dark-100: #e0edf9;
  --color-dark-200: #cadae8;
  --color-dark-300: #b1c4d3;
  --color-dark-400: #91a4b6;
  --color-dark-500: #768a9b;
  --color-dark-600: #5c7080;
  --color-dark-700: #485968;
  --color-dark-800: #374754;
  --color-dark-900: #2a3742;
  --color-dark-950: #132432;
}