Meatloaf to Breaking the Ice color palette

673100Meatloaf 644097Poppy Pompadour 8878B6Aster 50AFD2Frozen Wave C1C678Soda Pop BAE1FABreaking the Ice

Open in generator Export PNG, PDF, ASE…

About this palette

Meatloaf to Breaking the Ice is a 6-color cool palette: #673100 (Meatloaf), #644097 (Poppy Pompadour), #8878B6 (Aster), #50AFD2 (Frozen Wave), #C1C678 (Soda Pop), #BAE1FA (Breaking the Ice). It mixes brown, purple, blue, yellow tones and feels cool overall. The strongest text pairing is #673100 on #BAE1FA with a contrast ratio of 7.56:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Meatloaf	rgb(103, 49, 0)	hsl(29, 100%, 20%)
Poppy Pompadour	rgb(100, 64, 151)	hsl(265, 40%, 42%)
Aster	rgb(136, 120, 182)	hsl(255, 30%, 59%)
Frozen Wave	rgb(80, 175, 210)	hsl(196, 59%, 57%)
Soda Pop	rgb(193, 198, 120)	hsl(64, 41%, 62%)
Breaking the Ice	rgb(186, 225, 250)	hsl(203, 86%, 85%)

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.56:1 Very good#673100 on #BAE1FA
Aa7.56:1 Very good#BAE1FA on #673100
Aa5.76:1 Good#673100 on #C1C678
Aa5.76:1 Good#C1C678 on #673100
Aa5.60:1 Good#644097 on #BAE1FA
Aa5.60:1 Good#BAE1FA on #644097
Aa4.27:1 Poor#644097 on #C1C678
Aa4.27:1 Poor#C1C678 on #644097

Color blindness preview

CSS variables

/* Meatloaf to Breaking the Ice — https://swatchly.xyz/palette/673100-644097-8878b6-50afd2-c1c678-bae1fa */
:root {
  --meatloaf: #673100;
  --poppy-pompadour: #644097;
  --aster: #8878b6;
  --frozen-wave: #50afd2;
  --soda-pop: #c1c678;
  --breaking-the-ice: #bae1fa;
}

Tailwind CSS v4

/* Meatloaf to Breaking the Ice — https://swatchly.xyz/palette/673100-644097-8878b6-50afd2-c1c678-bae1fa */
@theme {
  --color-meatloaf: #673100;
  --color-meatloaf-50: #fff2eb;
  --color-meatloaf-100: #ffe6d6;
  --color-meatloaf-200: #fdccac;
  --color-meatloaf-300: #ebb38f;
  --color-meatloaf-400: #ce926a;
  --color-meatloaf-500: #b2764d;
  --color-meatloaf-600: #955c34;
  --color-meatloaf-700: #7a4621;
  --color-meatloaf-800: #673100;
  --color-meatloaf-900: #4d2709;
  --color-meatloaf-950: #321703;
  --color-poppy-pompadour: #644097;
  --color-poppy-pompadour-50: #f7f3ff;
  --color-poppy-pompadour-100: #eee7ff;
  --color-poppy-pompadour-200: #deceff;
  --color-poppy-pompadour-300: #cdb1ff;
  --color-poppy-pompadour-400: #af8ee8;
  --color-poppy-pompadour-500: #9572cd;
  --color-poppy-pompadour-600: #7a58af;
  --color-poppy-pompadour-700: #644097;
  --color-poppy-pompadour-800: #4e3178;
  --color-poppy-pompadour-900: #3d2460;
  --color-poppy-pompadour-950: #261440;
  --color-aster: #8878b6;
  --color-aster-50: #f5f3ff;
  --color-aster-100: #ebe6ff;
  --color-aster-200: #d9ceff;
  --color-aster-300: #c3b5ee;
  --color-aster-400: #a394d2;
  --color-aster-500: #8878b6;
  --color-aster-600: #6e5e99;
  --color-aster-700: #58497e;
  --color-aster-800: #453866;
  --color-aster-900: #352a51;
  --color-aster-950: #211935;
  --color-frozen-wave: #50afd2;
  --color-frozen-wave-50: #e9f8ff;
  --color-frozen-wave-100: #d1f1ff;
  --color-frozen-wave-200: #a1e3fe;
  --color-frozen-wave-300: #80cdec;
  --color-frozen-wave-400: #50afd2;
  --color-frozen-wave-500: #3093b5;
  --color-frozen-wave-600: #007798;
  --color-frozen-wave-700: #005f79;
  --color-frozen-wave-800: #004a5f;
  --color-frozen-wave-900: #00394a;
  --color-frozen-wave-950: #002330;
  --color-soda-pop: #c1c678;
  --color-soda-pop-50: #f5f9ce;
  --color-soda-pop-100: #ebefbf;
  --color-soda-pop-200: #d7dca2;
  --color-soda-pop-300: #c1c678;
  --color-soda-pop-400: #a2a65c;
  --color-soda-pop-500: #878b3e;
  --color-soda-pop-600: #6d7023;
  --color-soda-pop-700: #57590d;
  --color-soda-pop-800: #444600;
  --color-soda-pop-900: #343600;
  --color-soda-pop-950: #202100;
  --color-breaking-the-ice: #bae1fa;
  --color-breaking-the-ice-50: #f0f9ff;
  --color-breaking-the-ice-100: #ddf1ff;
  --color-breaking-the-ice-200: #bae1fa;
  --color-breaking-the-ice-300: #a9c9dd;
  --color-breaking-the-ice-400: #85a9c0;
  --color-breaking-the-ice-500: #698da4;
  --color-breaking-the-ice-600: #4f7288;
  --color-breaking-the-ice-700: #3a5a6e;
  --color-breaking-the-ice-800: #2a4657;
  --color-breaking-the-ice-900: #1e3644;
  --color-breaking-the-ice-950: #10212c;
}