Start generating

Peach to Cacao Nibs color palette

FEAF7CPeach74B3D4Milky Waves204F60Shadow of NightBC6743Oak Palace3587A9Underwater Moonlight7C4324Cacao Nibs
Open in generator Export PNG, PDF, ASE…

About this palette

Peach to Cacao Nibs is a 6-color vintage palette: #FEAF7C (Peach), #74B3D4 (Milky Waves), #204F60 (Shadow of Night), #BC6743 (Oak Palace), #3587A9 (Underwater Moonlight), #7C4324 (Cacao Nibs). It mixes orange, blue, brown tones and feels balanced overall. The strongest text pairing is #FEAF7C on #204F60 with a contrast ratio of 4.95:1, and 1 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Peachrgb(254, 175, 124)hsl(24, 98%, 74%)
Milky Wavesrgb(116, 179, 212)hsl(201, 53%, 64%)
Shadow of Nightrgb(32, 79, 96)hsl(196, 50%, 25%)
Oak Palacergb(188, 103, 67)hsl(18, 47%, 50%)
Underwater Moonlightrgb(53, 135, 169)hsl(198, 52%, 44%)
Cacao Nibsrgb(124, 67, 36)hsl(21, 55%, 31%)

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.

  • Aa4.95:1 Good#FEAF7C on #204F60
  • Aa4.95:1 Good#204F60 on #FEAF7C
  • Aa4.33:1 Poor#FEAF7C on #7C4324
  • Aa4.33:1 Poor#7C4324 on #FEAF7C
  • Aa3.89:1 Poor#74B3D4 on #204F60
  • Aa3.89:1 Poor#204F60 on #74B3D4
  • Aa3.40:1 Poor#74B3D4 on #7C4324
  • Aa3.40:1 Poor#7C4324 on #74B3D4

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Peach to Cacao Nibs — https://swatchly.xyz/palette/feaf7c-74b3d4-204f60-bc6743-3587a9-7c4324 */
:root {
  --peach: #feaf7c;
  --milky-waves: #74b3d4;
  --shadow-of-night: #204f60;
  --oak-palace: #bc6743;
  --underwater-moonlight: #3587a9;
  --cacao-nibs: #7c4324;
}

Tailwind CSS v4

/* Peach to Cacao Nibs — https://swatchly.xyz/palette/feaf7c-74b3d4-204f60-bc6743-3587a9-7c4324 */
@theme {
  --color-peach: #feaf7c;
  --color-peach-50: #fff4ee;
  --color-peach-100: #ffe8da;
  --color-peach-200: #ffceb0;
  --color-peach-300: #feaf7c;
  --color-peach-400: #d99061;
  --color-peach-500: #bd7341;
  --color-peach-600: #9f5825;
  --color-peach-700: #82430f;
  --color-peach-800: #693100;
  --color-peach-900: #522500;
  --color-peach-950: #351500;
  --color-milky-waves: #74b3d4;
  --color-milky-waves-50: #f0faff;
  --color-milky-waves-100: #def3ff;
  --color-milky-waves-200: #b8e5fd;
  --color-milky-waves-300: #9dd0ec;
  --color-milky-waves-400: #74b3d4;
  --color-milky-waves-500: #5795b5;
  --color-milky-waves-600: #3b7998;
  --color-milky-waves-700: #25607c;
  --color-milky-waves-800: #154b63;
  --color-milky-waves-900: #09394d;
  --color-milky-waves-950: #032331;
  --color-shadow-of-night: #204f60;
  --color-shadow-of-night-50: #e8f8ff;
  --color-shadow-of-night-100: #d3f1fe;
  --color-shadow-of-night-200: #badeed;
  --color-shadow-of-night-300: #a1cada;
  --color-shadow-of-night-400: #7eacbe;
  --color-shadow-of-night-500: #6391a4;
  --color-shadow-of-night-600: #4a788a;
  --color-shadow-of-night-700: #366172;
  --color-shadow-of-night-800: #204f60;
  --color-shadow-of-night-900: #1b3d49;
  --color-shadow-of-night-950: #0d2630;
  --color-oak-palace: #bc6743;
  --color-oak-palace-50: #fff1eb;
  --color-oak-palace-100: #ffe3d7;
  --color-oak-palace-200: #ffc6af;
  --color-oak-palace-300: #f7a787;
  --color-oak-palace-400: #d98461;
  --color-oak-palace-500: #bc6743;
  --color-oak-palace-600: #9e4e2b;
  --color-oak-palace-700: #823a19;
  --color-oak-palace-800: #6a2a0c;
  --color-oak-palace-900: #541f04;
  --color-oak-palace-950: #381101;
  --color-underwater-moonlight: #3587a9;
  --color-underwater-moonlight-50: #e6f7ff;
  --color-underwater-moonlight-100: #cbeeff;
  --color-underwater-moonlight-200: #a1dcf8;
  --color-underwater-moonlight-300: #80c5e5;
  --color-underwater-moonlight-400: #57a4c6;
  --color-underwater-moonlight-500: #3587a9;
  --color-underwater-moonlight-600: #196d8d;
  --color-underwater-moonlight-700: #005774;
  --color-underwater-moonlight-800: #00455c;
  --color-underwater-moonlight-900: #003549;
  --color-underwater-moonlight-950: #00222f;
  --color-cacao-nibs: #7c4324;
  --color-cacao-nibs-50: #fff2ec;
  --color-cacao-nibs-100: #ffe5d9;
  --color-cacao-nibs-200: #fdcbb2;
  --color-cacao-nibs-300: #ebb296;
  --color-cacao-nibs-400: #ce9171;
  --color-cacao-nibs-500: #b27455;
  --color-cacao-nibs-600: #945a3c;
  --color-cacao-nibs-700: #7c4324;
  --color-cacao-nibs-800: #61341b;
  --color-cacao-nibs-900: #4d2611;
  --color-cacao-nibs-950: #321607;
}

Similar palettes