Start generating

Délicieux au Chocolat to Veiling Waterfalls color palette

392516Délicieux au Chocolat1F598BOceanic MotionA9691CInca GoldE79955Pumpkin PieCCE9FFVeiling Waterfalls
Open in generator Export PNG, PDF, ASE…

About this palette

Délicieux au Chocolat to Veiling Waterfalls is a 5-color warm, earthy, vintage palette: #392516 (Délicieux au Chocolat), #1F598B (Oceanic Motion), #A9691C (Inca Gold), #E79955 (Pumpkin Pie), #CCE9FF (Veiling Waterfalls). It mixes brown, blue, orange tones and feels warm overall. The strongest text pairing is #392516 on #CCE9FF with a contrast ratio of 11.49:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Délicieux au Chocolatrgb(57, 37, 22)hsl(26, 44%, 15%)
Oceanic Motionrgb(31, 89, 139)hsl(208, 64%, 33%)
Inca Goldrgb(169, 105, 28)hsl(33, 72%, 39%)
Pumpkin Piergb(231, 153, 85)hsl(28, 75%, 62%)
Veiling Waterfallsrgb(204, 233, 255)hsl(206, 100%, 90%)

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.

  • Aa11.49:1 Very good#392516 on #CCE9FF
  • Aa11.49:1 Very good#CCE9FF on #392516
  • Aa6.27:1 Good#392516 on #E79955
  • Aa6.27:1 Good#E79955 on #392516
  • Aa5.83:1 Good#1F598B on #CCE9FF
  • Aa5.83:1 Good#CCE9FF on #1F598B
  • Aa3.53:1 Poor#A9691C on #CCE9FF
  • Aa3.53:1 Poor#CCE9FF on #A9691C

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Délicieux au Chocolat to Veiling Waterfalls — https://swatchly.xyz/palette/392516-1f598b-a9691c-e79955-cce9ff */
:root {
  --d-licieux-au-chocolat: #392516;
  --oceanic-motion: #1f598b;
  --inca-gold: #a9691c;
  --pumpkin-pie: #e79955;
  --veiling-waterfalls: #cce9ff;
}

Tailwind CSS v4

/* Délicieux au Chocolat to Veiling Waterfalls — https://swatchly.xyz/palette/392516-1f598b-a9691c-e79955-cce9ff */
@theme {
  --color-d-licieux-au-chocolat: #392516;
  --color-d-licieux-au-chocolat-50: #fff2ea;
  --color-d-licieux-au-chocolat-100: #f9e8dc;
  --color-d-licieux-au-chocolat-200: #e7d3c5;
  --color-d-licieux-au-chocolat-300: #d3bcac;
  --color-d-licieux-au-chocolat-400: #b39a89;
  --color-d-licieux-au-chocolat-500: #967d6c;
  --color-d-licieux-au-chocolat-600: #786251;
  --color-d-licieux-au-chocolat-700: #5e4a3c;
  --color-d-licieux-au-chocolat-800: #48372b;
  --color-d-licieux-au-chocolat-900: #392516;
  --color-d-licieux-au-chocolat-950: #201610;
  --color-oceanic-motion: #1f598b;
  --color-oceanic-motion-50: #eef6ff;
  --color-oceanic-motion-100: #dcedff;
  --color-oceanic-motion-200: #b9dcff;
  --color-oceanic-motion-300: #95c6f7;
  --color-oceanic-motion-400: #70a7dc;
  --color-oceanic-motion-500: #538bc1;
  --color-oceanic-motion-600: #3970a3;
  --color-oceanic-motion-700: #1f598b;
  --color-oceanic-motion-800: #17456e;
  --color-oceanic-motion-900: #0c3557;
  --color-oceanic-motion-950: #042139;
  --color-inca-gold: #a9691c;
  --color-inca-gold-50: #fff0e2;
  --color-inca-gold-100: #ffe0c4;
  --color-inca-gold-200: #fbc590;
  --color-inca-gold-300: #e7aa6d;
  --color-inca-gold-400: #c88741;
  --color-inca-gold-500: #a9691c;
  --color-inca-gold-600: #8c5200;
  --color-inca-gold-700: #704100;
  --color-inca-gold-800: #593200;
  --color-inca-gold-900: #462700;
  --color-inca-gold-950: #2e1700;
  --color-pumpkin-pie: #e79955;
  --color-pumpkin-pie-50: #fff8f2;
  --color-pumpkin-pie-100: #ffeee1;
  --color-pumpkin-pie-200: #ffd7b8;
  --color-pumpkin-pie-300: #fcbc87;
  --color-pumpkin-pie-400: #e79955;
  --color-pumpkin-pie-500: #c67b36;
  --color-pumpkin-pie-600: #a75e0f;
  --color-pumpkin-pie-700: #864900;
  --color-pumpkin-pie-800: #693700;
  --color-pumpkin-pie-900: #502900;
  --color-pumpkin-pie-950: #321700;
  --color-veiling-waterfalls: #cce9ff;
  --color-veiling-waterfalls-50: #e2f2ff;
  --color-veiling-waterfalls-100: #cce9ff;
  --color-veiling-waterfalls-200: #c0d5e6;
  --color-veiling-waterfalls-300: #a8c0d3;
  --color-veiling-waterfalls-400: #88a2b6;
  --color-veiling-waterfalls-500: #6d889c;
  --color-veiling-waterfalls-600: #556e81;
  --color-veiling-waterfalls-700: #41586a;
  --color-veiling-waterfalls-800: #314554;
  --color-veiling-waterfalls-900: #243542;
  --color-veiling-waterfalls-950: #14212a;
}

Similar palettes