Fleur de Sel Caramel to Veiling Waterfalls Color Palette

About this palette

Fleur de Sel Caramel to Veiling Waterfalls is a 4-color palette: #E08400 (Fleur de Sel Caramel), #1B1E0D (Nightmare), #3E4A91 (Galaxy Express), #D5E3FF (Veiling Waterfalls). It mixes orange, gray, blue tones and feels cool overall. The strongest text pairing is #1B1E0D on #D5E3FF with a contrast ratio of 13.13:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Fleur de Sel Caramel	rgb(224, 132, 0)	hsl(35, 100%, 44%)
Nightmare	rgb(27, 30, 13)	hsl(71, 40%, 8%)
Galaxy Express	rgb(62, 74, 145)	hsl(231, 40%, 41%)
Veiling Waterfalls	rgb(213, 227, 255)	hsl(220, 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.

Aa13.13:1 Super#1B1E0D on #D5E3FF
Aa13.13:1 Super#D5E3FF on #1B1E0D
Aa6.27:1 Good#3E4A91 on #D5E3FF
Aa6.27:1 Good#D5E3FF on #3E4A91
Aa6.03:1 Good#E08400 on #1B1E0D
Aa6.03:1 Good#1B1E0D on #E08400

Color blindness preview

CSS variables

/* Fleur de Sel Caramel to Veiling Waterfalls — https://swatchly.xyz/palette/e08400-1b1e0d-3e4a91-d5e3ff */
:root {
  --fleur-de-sel-caramel: #e08400;
  --nightmare: #1b1e0d;
  --galaxy-express: #3e4a91;
  --veiling-waterfalls: #d5e3ff;
}

Tailwind CSS v4

/* Fleur de Sel Caramel to Veiling Waterfalls — https://swatchly.xyz/palette/e08400-1b1e0d-3e4a91-d5e3ff */
@theme {
  --color-fleur-de-sel-caramel: #e08400;
  --color-fleur-de-sel-caramel-50: #fff1e5;
  --color-fleur-de-sel-caramel-100: #ffe3cb;
  --color-fleur-de-sel-caramel-200: #ffc897;
  --color-fleur-de-sel-caramel-300: #fba956;
  --color-fleur-de-sel-caramel-400: #e08400;
  --color-fleur-de-sel-caramel-500: #bb6d00;
  --color-fleur-de-sel-caramel-600: #985800;
  --color-fleur-de-sel-caramel-700: #794500;
  --color-fleur-de-sel-caramel-800: #603500;
  --color-fleur-de-sel-caramel-900: #4b2900;
  --color-fleur-de-sel-caramel-950: #311800;
  --color-nightmare: #1b1e0d;
  --color-nightmare-50: #f4f7ea;
  --color-nightmare-100: #eaeddf;
  --color-nightmare-200: #d6dac9;
  --color-nightmare-300: #bfc3b1;
  --color-nightmare-400: #a0a490;
  --color-nightmare-500: #848874;
  --color-nightmare-600: #696d5a;
  --color-nightmare-700: #525644;
  --color-nightmare-800: #3f4233;
  --color-nightmare-900: #2f3225;
  --color-nightmare-950: #1b1e0d;
  --color-galaxy-express: #3e4a91;
  --color-galaxy-express-50: #f2f5ff;
  --color-galaxy-express-100: #e5eaff;
  --color-galaxy-express-200: #cad5ff;
  --color-galaxy-express-300: #abbbff;
  --color-galaxy-express-400: #899ae6;
  --color-galaxy-express-500: #6d7dc9;
  --color-galaxy-express-600: #5462aa;
  --color-galaxy-express-700: #3e4a91;
  --color-galaxy-express-800: #303a72;
  --color-galaxy-express-900: #242b5b;
  --color-galaxy-express-950: #141a3c;
  --color-veiling-waterfalls: #d5e3ff;
  --color-veiling-waterfalls-50: #e6eeff;
  --color-veiling-waterfalls-100: #d5e3ff;
  --color-veiling-waterfalls-200: #c6d1e6;
  --color-veiling-waterfalls-300: #b0bcd3;
  --color-veiling-waterfalls-400: #919eb7;
  --color-veiling-waterfalls-500: #77849d;
  --color-veiling-waterfalls-600: #5f6b83;
  --color-veiling-waterfalls-700: #4b556b;
  --color-veiling-waterfalls-800: #394255;
  --color-veiling-waterfalls-900: #2b3343;
  --color-veiling-waterfalls-950: #1a1f2b;
}