Start generating

Royal Neptune to Holographic Lavender color palette

103C48Royal Neptune7F653CAutumn GoldA18869Gramps ShoehornA4D0E2Vive le VentE6E2FFHolographic Lavender
Open in generator Export PNG, PDF, ASE…

About this palette

Royal Neptune to Holographic Lavender is a 5-color muted, cool, vintage palette: #103C48 (Royal Neptune), #7F653C (Autumn Gold), #A18869 (Gramps Shoehorn), #A4D0E2 (Vive le Vent), #E6E2FF (Holographic Lavender). It mixes blue, brown, orange, purple tones and feels cool overall. The strongest text pairing is #103C48 on #E6E2FF with a contrast ratio of 9.47:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Royal Neptunergb(16, 60, 72)hsl(193, 64%, 17%)
Autumn Goldrgb(127, 101, 60)hsl(37, 36%, 37%)
Gramps Shoehornrgb(161, 136, 105)hsl(33, 23%, 52%)
Vive le Ventrgb(164, 208, 226)hsl(197, 52%, 76%)
Holographic Lavenderrgb(230, 226, 255)hsl(248, 100%, 94%)

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.

  • Aa9.47:1 Very good#103C48 on #E6E2FF
  • Aa9.47:1 Very good#E6E2FF on #103C48
  • Aa7.21:1 Very good#103C48 on #A4D0E2
  • Aa7.21:1 Very good#A4D0E2 on #103C48
  • Aa4.36:1 Poor#7F653C on #E6E2FF
  • Aa4.36:1 Poor#E6E2FF on #7F653C
  • Aa3.54:1 Poor#103C48 on #A18869
  • Aa3.54:1 Poor#A18869 on #103C48

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Royal Neptune to Holographic Lavender — https://swatchly.xyz/palette/103c48-7f653c-a18869-a4d0e2-e6e2ff */
:root {
  --royal-neptune: #103c48;
  --autumn-gold: #7f653c;
  --gramps-shoehorn: #a18869;
  --vive-le-vent: #a4d0e2;
  --holographic-lavender: #e6e2ff;
}

Tailwind CSS v4

/* Royal Neptune to Holographic Lavender — https://swatchly.xyz/palette/103c48-7f653c-a18869-a4d0e2-e6e2ff */
@theme {
  --color-royal-neptune: #103c48;
  --color-royal-neptune-50: #e6f9ff;
  --color-royal-neptune-100: #d5f1fa;
  --color-royal-neptune-200: #bddee9;
  --color-royal-neptune-300: #a2c8d4;
  --color-royal-neptune-400: #80aab7;
  --color-royal-neptune-500: #648f9d;
  --color-royal-neptune-600: #4b7582;
  --color-royal-neptune-700: #385e6a;
  --color-royal-neptune-800: #284b55;
  --color-royal-neptune-900: #103c48;
  --color-royal-neptune-950: #0f252c;
  --color-autumn-gold: #7f653c;
  --color-autumn-gold-50: #fff3e2;
  --color-autumn-gold-100: #fae8cd;
  --color-autumn-gold-200: #e9d3b3;
  --color-autumn-gold-300: #d4bc97;
  --color-autumn-gold-400: #b69c73;
  --color-autumn-gold-500: #9b8056;
  --color-autumn-gold-600: #7f653c;
  --color-autumn-gold-700: #664f2b;
  --color-autumn-gold-800: #513d1d;
  --color-autumn-gold-900: #402f13;
  --color-autumn-gold-950: #281c08;
  --color-gramps-shoehorn: #a18869;
  --color-gramps-shoehorn-50: #fff5e8;
  --color-gramps-shoehorn-100: #fbebd7;
  --color-gramps-shoehorn-200: #ebd8c0;
  --color-gramps-shoehorn-300: #d8c2a7;
  --color-gramps-shoehorn-400: #bba385;
  --color-gramps-shoehorn-500: #a18869;
  --color-gramps-shoehorn-600: #846c4f;
  --color-gramps-shoehorn-700: #6b553a;
  --color-gramps-shoehorn-800: #544129;
  --color-gramps-shoehorn-900: #41311d;
  --color-gramps-shoehorn-950: #291e0f;
  --color-vive-le-vent: #a4d0e2;
  --color-vive-le-vent-50: #f1fbff;
  --color-vive-le-vent-100: #dcf5ff;
  --color-vive-le-vent-200: #c4e3f0;
  --color-vive-le-vent-300: #a4d0e2;
  --color-vive-le-vent-400: #86aebf;
  --color-vive-le-vent-500: #6892a3;
  --color-vive-le-vent-600: #4d7686;
  --color-vive-le-vent-700: #385d6c;
  --color-vive-le-vent-800: #274855;
  --color-vive-le-vent-900: #1b3742;
  --color-vive-le-vent-950: #0e222a;
  --color-holographic-lavender: #e6e2ff;
  --color-holographic-lavender-50: #f1efff;
  --color-holographic-lavender-100: #e6e2ff;
  --color-holographic-lavender-200: #d3d0e6;
  --color-holographic-lavender-300: #bebad2;
  --color-holographic-lavender-400: #9f9bb5;
  --color-holographic-lavender-500: #85819b;
  --color-holographic-lavender-600: #6b6780;
  --color-holographic-lavender-700: #555268;
  --color-holographic-lavender-800: #423f53;
  --color-holographic-lavender-900: #333041;
  --color-holographic-lavender-950: #1f1d29;
}

Similar palettes