Start generating

Cold Lips to Secret of Mana color palette

849AEFCold Lips715D00Coffee Adept4F3B00PineappleCCDAFFIcy Plains4B66F2Secret of Mana
Open in generator Export PNG, PDF, ASE…

About this palette

Cold Lips to Secret of Mana is a 5-color cool palette: #849AEF (Cold Lips), #715D00 (Coffee Adept), #4F3B00 (Pineapple), #CCDAFF (Icy Plains), #4B66F2 (Secret of Mana). It mixes blue, brown tones and feels cool overall. The strongest text pairing is #4F3B00 on #CCDAFF with a contrast ratio of 7.68:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Cold Lipsrgb(132, 154, 239)hsl(228, 77%, 73%)
Coffee Adeptrgb(113, 93, 0)hsl(49, 100%, 22%)
Pineapplergb(79, 59, 0)hsl(45, 100%, 15%)
Icy Plainsrgb(204, 218, 255)hsl(224, 100%, 90%)
Secret of Manargb(75, 102, 242)hsl(230, 87%, 62%)

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.68:1 Very good#4F3B00 on #CCDAFF
  • Aa7.68:1 Very good#CCDAFF on #4F3B00
  • Aa4.60:1 Good#715D00 on #CCDAFF
  • Aa4.60:1 Good#CCDAFF on #715D00
  • Aa4.01:1 Poor#849AEF on #4F3B00
  • Aa4.01:1 Poor#4F3B00 on #849AEF
  • Aa3.36:1 Poor#CCDAFF on #4B66F2
  • Aa3.36:1 Poor#4B66F2 on #CCDAFF

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Cold Lips to Secret of Mana — https://swatchly.xyz/palette/849aef-715d00-4f3b00-ccdaff-4b66f2 */
:root {
  --cold-lips: #849aef;
  --coffee-adept: #715d00;
  --pineapple: #4f3b00;
  --icy-plains: #ccdaff;
  --secret-of-mana: #4b66f2;
}

Tailwind CSS v4

/* Cold Lips to Secret of Mana — https://swatchly.xyz/palette/849aef-715d00-4f3b00-ccdaff-4b66f2 */
@theme {
  --color-cold-lips: #849aef;
  --color-cold-lips-50: #f1f4ff;
  --color-cold-lips-100: #e3eaff;
  --color-cold-lips-200: #c8d5ff;
  --color-cold-lips-300: #a9bcff;
  --color-cold-lips-400: #849aef;
  --color-cold-lips-500: #6a7ed1;
  --color-cold-lips-600: #5264b2;
  --color-cold-lips-700: #3e4e95;
  --color-cold-lips-800: #2f3b7a;
  --color-cold-lips-900: #232d62;
  --color-cold-lips-950: #141b41;
  --color-coffee-adept: #715d00;
  --color-coffee-adept-50: #fff5d3;
  --color-coffee-adept-100: #f8ebbd;
  --color-coffee-adept-200: #e9d9a3;
  --color-coffee-adept-300: #d6c486;
  --color-coffee-adept-400: #baa65f;
  --color-coffee-adept-500: #a08c40;
  --color-coffee-adept-600: #877324;
  --color-coffee-adept-700: #715d00;
  --color-coffee-adept-800: #594900;
  --color-coffee-adept-900: #453700;
  --color-coffee-adept-950: #2c2200;
  --color-pineapple: #4f3b00;
  --color-pineapple-50: #fff4dc;
  --color-pineapple-100: #f8eac9;
  --color-pineapple-200: #e7d6af;
  --color-pineapple-300: #d2be91;
  --color-pineapple-400: #b39d6b;
  --color-pineapple-500: #97814e;
  --color-pineapple-600: #7b6634;
  --color-pineapple-700: #624f21;
  --color-pineapple-800: #4f3b00;
  --color-pineapple-900: #3b2e0b;
  --color-pineapple-950: #251b04;
  --color-icy-plains: #ccdaff;
  --color-icy-plains-50: #f4f7ff;
  --color-icy-plains-100: #e7eeff;
  --color-icy-plains-200: #ccdaff;
  --color-icy-plains-300: #b7c3e2;
  --color-icy-plains-400: #96a3c4;
  --color-icy-plains-500: #7a87a9;
  --color-icy-plains-600: #606c8c;
  --color-icy-plains-700: #4a5572;
  --color-icy-plains-800: #38415b;
  --color-icy-plains-900: #2a3247;
  --color-icy-plains-950: #191f2e;
  --color-secret-of-mana: #4b66f2;
  --color-secret-of-mana-50: #f1f5ff;
  --color-secret-of-mana-100: #e7edff;
  --color-secret-of-mana-200: #cfdbff;
  --color-secret-of-mana-300: #b2c6ff;
  --color-secret-of-mana-400: #89a5ff;
  --color-secret-of-mana-500: #6785ff;
  --color-secret-of-mana-600: #4b66f2;
  --color-secret-of-mana-700: #374ccf;
  --color-secret-of-mana-800: #2836ac;
  --color-secret-of-mana-900: #1c268b;
  --color-secret-of-mana-950: #0f145e;
}

Similar palettes