Start generating

Hazelnut to Vive le Vent color palette

A2725FHazelnut004B6FSea PaintFFE5D2Blossom4DA6D7Cousteau90552DAncient ChestA7D0E6Vive le Vent
Open in generator Export PNG, PDF, ASE…

About this palette

Hazelnut to Vive le Vent is a 6-color vintage palette: #A2725F (Hazelnut), #004B6F (Sea Paint), #FFE5D2 (Blossom), #4DA6D7 (Cousteau), #90552D (Ancient Chest), #A7D0E6 (Vive le Vent). It mixes orange, blue, brown tones and feels balanced overall. The strongest text pairing is #004B6F on #FFE5D2 with a contrast ratio of 7.78:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Hazelnutrgb(162, 114, 95)hsl(17, 26%, 50%)
Sea Paintrgb(0, 75, 111)hsl(199, 100%, 22%)
Blossomrgb(255, 229, 210)hsl(25, 100%, 91%)
Cousteaurgb(77, 166, 215)hsl(201, 63%, 57%)
Ancient Chestrgb(144, 85, 45)hsl(24, 52%, 37%)
Vive le Ventrgb(167, 208, 230)hsl(201, 56%, 78%)

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.

  • Aa7.78:1 Very good#004B6F on #FFE5D2
  • Aa7.78:1 Very good#FFE5D2 on #004B6F
  • Aa5.73:1 Good#004B6F on #A7D0E6
  • Aa5.73:1 Good#A7D0E6 on #004B6F
  • Aa4.94:1 Good#FFE5D2 on #90552D
  • Aa4.94:1 Good#90552D on #FFE5D2
  • Aa3.64:1 Poor#90552D on #A7D0E6
  • Aa3.64:1 Poor#A7D0E6 on #90552D

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Hazelnut to Vive le Vent — https://swatchly.xyz/palette/a2725f-004b6f-ffe5d2-4da6d7-90552d-a7d0e6 */
:root {
  --hazelnut: #a2725f;
  --sea-paint: #004b6f;
  --blossom: #ffe5d2;
  --cousteau: #4da6d7;
  --ancient-chest: #90552d;
  --vive-le-vent: #a7d0e6;
}

Tailwind CSS v4

/* Hazelnut to Vive le Vent — https://swatchly.xyz/palette/a2725f-004b6f-ffe5d2-4da6d7-90552d-a7d0e6 */
@theme {
  --color-hazelnut: #a2725f;
  --color-hazelnut-50: #fff0eb;
  --color-hazelnut-100: #ffe1d6;
  --color-hazelnut-200: #f2c9b9;
  --color-hazelnut-300: #deb09e;
  --color-hazelnut-400: #bf8f7b;
  --color-hazelnut-500: #a2725f;
  --color-hazelnut-600: #865a48;
  --color-hazelnut-700: #6e4535;
  --color-hazelnut-800: #583527;
  --color-hazelnut-900: #46281c;
  --color-hazelnut-950: #2d180f;
  --color-sea-paint: #004b6f;
  --color-sea-paint-50: #ecf7ff;
  --color-sea-paint-100: #d8efff;
  --color-sea-paint-200: #b0defe;
  --color-sea-paint-300: #94c9ed;
  --color-sea-paint-400: #6fabd2;
  --color-sea-paint-500: #528fb7;
  --color-sea-paint-600: #38759b;
  --color-sea-paint-700: #245e81;
  --color-sea-paint-800: #004b6f;
  --color-sea-paint-900: #0a3a54;
  --color-sea-paint-950: #032437;
  --color-blossom: #ffe5d2;
  --color-blossom-50: #fff2e8;
  --color-blossom-100: #ffe5d2;
  --color-blossom-200: #e6d3c5;
  --color-blossom-300: #d1bcac;
  --color-blossom-400: #b39c8b;
  --color-blossom-500: #988170;
  --color-blossom-600: #7d6756;
  --color-blossom-700: #655142;
  --color-blossom-800: #503e31;
  --color-blossom-900: #3e2f24;
  --color-blossom-950: #271d15;
  --color-cousteau: #4da6d7;
  --color-cousteau-50: #e7f6ff;
  --color-cousteau-100: #d0edff;
  --color-cousteau-200: #a3dcff;
  --color-cousteau-300: #7bc6f2;
  --color-cousteau-400: #4da6d7;
  --color-cousteau-500: #2e8bbb;
  --color-cousteau-600: #07719e;
  --color-cousteau-700: #005a7f;
  --color-cousteau-800: #004665;
  --color-cousteau-900: #003750;
  --color-cousteau-950: #002234;
  --color-ancient-chest: #90552d;
  --color-ancient-chest-50: #fff2eb;
  --color-ancient-chest-100: #ffe4d4;
  --color-ancient-chest-200: #fcc9aa;
  --color-ancient-chest-300: #e9af8c;
  --color-ancient-chest-400: #cb8d66;
  --color-ancient-chest-500: #ae7048;
  --color-ancient-chest-600: #90552d;
  --color-ancient-chest-700: #75421e;
  --color-ancient-chest-800: #5e3111;
  --color-ancient-chest-900: #4b2509;
  --color-ancient-chest-950: #301503;
  --color-vive-le-vent: #a7d0e6;
  --color-vive-le-vent-50: #f3fbff;
  --color-vive-le-vent-100: #e1f4ff;
  --color-vive-le-vent-200: #c7e3f3;
  --color-vive-le-vent-300: #a7d0e6;
  --color-vive-le-vent-400: #89aec2;
  --color-vive-le-vent-500: #6b91a6;
  --color-vive-le-vent-600: #4f7589;
  --color-vive-le-vent-700: #3a5d6f;
  --color-vive-le-vent-800: #294857;
  --color-vive-le-vent-900: #1d3643;
  --color-vive-le-vent-950: #0f222b;
}

Similar palettes