Start generating

Italian Roast to Paradisiacal Getaway color palette

240F18Italian Roast5B2343Soul Anchor746800Alligator459CB0Rainy MoodCDB52EOld Gold84E0F5Paradisiacal Getaway
Open in generator Export PNG, PDF, ASE…

About this palette

Italian Roast to Paradisiacal Getaway is a 6-color warm, vintage palette: #240F18 (Italian Roast), #5B2343 (Soul Anchor), #746800 (Alligator), #459CB0 (Rainy Mood), #CDB52E (Old Gold), #84E0F5 (Paradisiacal Getaway). It mixes red, brown, blue, yellow, turquoise tones and feels warm overall. The strongest text pairing is #240F18 on #84E0F5 with a contrast ratio of 12.07:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Italian Roastrgb(36, 15, 24)hsl(334, 41%, 10%)
Soul Anchorrgb(91, 35, 67)hsl(326, 44%, 25%)
Alligatorrgb(116, 104, 0)hsl(54, 100%, 23%)
Rainy Moodrgb(69, 156, 176)hsl(191, 44%, 48%)
Old Goldrgb(205, 181, 46)hsl(51, 63%, 49%)
Paradisiacal Getawayrgb(132, 224, 245)hsl(191, 85%, 74%)

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.

  • Aa12.07:1 Super#240F18 on #84E0F5
  • Aa12.07:1 Super#84E0F5 on #240F18
  • Aa8.86:1 Very good#240F18 on #CDB52E
  • Aa8.86:1 Very good#CDB52E on #240F18
  • Aa7.90:1 Very good#5B2343 on #84E0F5
  • Aa7.90:1 Very good#84E0F5 on #5B2343
  • Aa5.80:1 Good#5B2343 on #CDB52E
  • Aa5.80:1 Good#CDB52E on #5B2343

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Italian Roast to Paradisiacal Getaway — https://swatchly.xyz/palette/240f18-5b2343-746800-459cb0-cdb52e-84e0f5 */
:root {
  --italian-roast: #240f18;
  --soul-anchor: #5b2343;
  --alligator: #746800;
  --rainy-mood: #459cb0;
  --old-gold: #cdb52e;
  --paradisiacal-getaway: #84e0f5;
}

Tailwind CSS v4

/* Italian Roast to Paradisiacal Getaway — https://swatchly.xyz/palette/240f18-5b2343-746800-459cb0-cdb52e-84e0f5 */
@theme {
  --color-italian-roast: #240f18;
  --color-italian-roast-50: #fff1f6;
  --color-italian-roast-100: #f9e5ec;
  --color-italian-roast-200: #e8d0d9;
  --color-italian-roast-300: #d3b9c2;
  --color-italian-roast-400: #b599a3;
  --color-italian-roast-500: #987b86;
  --color-italian-roast-600: #7a606a;
  --color-italian-roast-700: #604952;
  --color-italian-roast-800: #49353d;
  --color-italian-roast-900: #36262c;
  --color-italian-roast-950: #240f18;
  --color-soul-anchor: #5b2343;
  --color-soul-anchor-50: #fff1f7;
  --color-soul-anchor-100: #ffe2f0;
  --color-soul-anchor-200: #fac6e0;
  --color-soul-anchor-300: #e8adca;
  --color-soul-anchor-400: #cc8dad;
  --color-soul-anchor-500: #b27293;
  --color-soul-anchor-600: #97597a;
  --color-soul-anchor-700: #7e4564;
  --color-soul-anchor-800: #683651;
  --color-soul-anchor-900: #5b2343;
  --color-soul-anchor-950: #39182a;
  --color-alligator: #746800;
  --color-alligator-50: #fdf7ca;
  --color-alligator-100: #f3ecb9;
  --color-alligator-200: #e0d89a;
  --color-alligator-300: #cac179;
  --color-alligator-400: #aba04f;
  --color-alligator-500: #8f842c;
  --color-alligator-600: #746800;
  --color-alligator-700: #5c5200;
  --color-alligator-800: #484000;
  --color-alligator-900: #383100;
  --color-alligator-950: #231e00;
  --color-rainy-mood: #459cb0;
  --color-rainy-mood-50: #e9faff;
  --color-rainy-mood-100: #d2f6ff;
  --color-rainy-mood-200: #ade7f6;
  --color-rainy-mood-300: #8fd3e5;
  --color-rainy-mood-400: #67b6c9;
  --color-rainy-mood-500: #459cb0;
  --color-rainy-mood-600: #237f92;
  --color-rainy-mood-700: #016677;
  --color-rainy-mood-800: #004f5d;
  --color-rainy-mood-900: #003c48;
  --color-rainy-mood-950: #00252d;
  --color-old-gold: #cdb52e;
  --color-old-gold-50: #fdf0ac;
  --color-old-gold-100: #f3e497;
  --color-old-gold-200: #e1ce70;
  --color-old-gold-300: #cdb52e;
  --color-old-gold-400: #ae9800;
  --color-old-gold-500: #927e00;
  --color-old-gold-600: #766600;
  --color-old-gold-700: #5f5200;
  --color-old-gold-800: #4b4100;
  --color-old-gold-900: #3c3300;
  --color-old-gold-950: #251f00;
  --color-paradisiacal-getaway: #84e0f5;
  --color-paradisiacal-getaway-50: #d6f7ff;
  --color-paradisiacal-getaway-100: #b7f0fe;
  --color-paradisiacal-getaway-200: #84e0f5;
  --color-paradisiacal-getaway-300: #7ac9db;
  --color-paradisiacal-getaway-400: #52abbf;
  --color-paradisiacal-getaway-500: #2f91a4;
  --color-paradisiacal-getaway-600: #067689;
  --color-paradisiacal-getaway-700: #005f6f;
  --color-paradisiacal-getaway-800: #004b58;
  --color-paradisiacal-getaway-900: #003a44;
  --color-paradisiacal-getaway-950: #00242c;
}

Similar palettes