Start generating

Brandy Bear to Dark Knight color palette

A4570DBrandy Bear16A6CDGummy Dolphins474400Alligator Gladiator76B5D0Milky WavesDAD4FFIcy Plains1A182DDark Knight
Open in generator Export PNG, PDF, ASE…

About this palette

Brandy Bear to Dark Knight is a 6-color cool palette: #A4570D (Brandy Bear), #16A6CD (Gummy Dolphins), #474400 (Alligator Gladiator), #76B5D0 (Milky Waves), #DAD4FF (Icy Plains), #1A182D (Dark Knight). It mixes brown, blue, purple tones and feels cool overall. The strongest text pairing is #DAD4FF on #1A182D with a contrast ratio of 12.24:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Brandy Bearrgb(164, 87, 13)hsl(29, 85%, 35%)
Gummy Dolphinsrgb(22, 166, 205)hsl(193, 81%, 45%)
Alligator Gladiatorrgb(71, 68, 0)hsl(57, 100%, 14%)
Milky Wavesrgb(118, 181, 208)hsl(198, 49%, 64%)
Icy Plainsrgb(218, 212, 255)hsl(248, 100%, 92%)
Dark Knightrgb(26, 24, 45)hsl(246, 30%, 14%)

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.24:1 Super#DAD4FF on #1A182D
  • Aa12.24:1 Super#1A182D on #DAD4FF
  • Aa7.66:1 Very good#76B5D0 on #1A182D
  • Aa7.66:1 Very good#1A182D on #76B5D0
  • Aa7.09:1 Very good#474400 on #DAD4FF
  • Aa7.09:1 Very good#DAD4FF on #474400
  • Aa6.08:1 Good#16A6CD on #1A182D
  • Aa6.08:1 Good#1A182D on #16A6CD

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Brandy Bear to Dark Knight — https://swatchly.xyz/palette/a4570d-16a6cd-474400-76b5d0-dad4ff-1a182d */
:root {
  --brandy-bear: #a4570d;
  --gummy-dolphins: #16a6cd;
  --alligator-gladiator: #474400;
  --milky-waves: #76b5d0;
  --icy-plains: #dad4ff;
  --dark-knight: #1a182d;
}

Tailwind CSS v4

/* Brandy Bear to Dark Knight — https://swatchly.xyz/palette/a4570d-16a6cd-474400-76b5d0-dad4ff-1a182d */
@theme {
  --color-brandy-bear: #a4570d;
  --color-brandy-bear-50: #fff2ea;
  --color-brandy-bear-100: #ffe6d6;
  --color-brandy-bear-200: #ffcdaa;
  --color-brandy-bear-300: #f8b07d;
  --color-brandy-bear-400: #dc8e53;
  --color-brandy-bear-500: #c17232;
  --color-brandy-bear-600: #a4570d;
  --color-brandy-bear-700: #854300;
  --color-brandy-bear-800: #693400;
  --color-brandy-bear-900: #512700;
  --color-brandy-bear-950: #351700;
  --color-gummy-dolphins: #16a6cd;
  --color-gummy-dolphins-50: #def6ff;
  --color-gummy-dolphins-100: #c0eeff;
  --color-gummy-dolphins-200: #86defe;
  --color-gummy-dolphins-300: #5dc7ea;
  --color-gummy-dolphins-400: #16a6cd;
  --color-gummy-dolphins-500: #008bad;
  --color-gummy-dolphins-600: #00708c;
  --color-gummy-dolphins-700: #005971;
  --color-gummy-dolphins-800: #00475a;
  --color-gummy-dolphins-900: #003747;
  --color-gummy-dolphins-950: #00242f;
  --color-alligator-gladiator: #474400;
  --color-alligator-gladiator-50: #f8f8d6;
  --color-alligator-gladiator-100: #eeeec8;
  --color-alligator-gladiator-200: #dcdbad;
  --color-alligator-gladiator-300: #c5c490;
  --color-alligator-gladiator-400: #a7a56b;
  --color-alligator-gladiator-500: #8b894e;
  --color-alligator-gladiator-600: #716e34;
  --color-alligator-gladiator-700: #5a5721;
  --color-alligator-gladiator-800: #474400;
  --color-alligator-gladiator-900: #36340a;
  --color-alligator-gladiator-950: #212003;
  --color-milky-waves: #76b5d0;
  --color-milky-waves-50: #f0faff;
  --color-milky-waves-100: #def5ff;
  --color-milky-waves-200: #bae6fa;
  --color-milky-waves-300: #9fd2e8;
  --color-milky-waves-400: #76b5d0;
  --color-milky-waves-500: #5997b1;
  --color-milky-waves-600: #3c7a94;
  --color-milky-waves-700: #266178;
  --color-milky-waves-800: #164c60;
  --color-milky-waves-900: #0a3a4a;
  --color-milky-waves-950: #03232f;
  --color-icy-plains: #dad4ff;
  --color-icy-plains-50: #f7f6ff;
  --color-icy-plains-100: #edebff;
  --color-icy-plains-200: #dad4ff;
  --color-icy-plains-300: #c3bee2;
  --color-icy-plains-400: #a39dc4;
  --color-icy-plains-500: #8781a9;
  --color-icy-plains-600: #6d678c;
  --color-icy-plains-700: #565072;
  --color-icy-plains-800: #433e5b;
  --color-icy-plains-900: #332f47;
  --color-icy-plains-950: #1f1c2e;
  --color-dark-knight: #1a182d;
  --color-dark-knight-50: #f4f4ff;
  --color-dark-knight-100: #e9e9fc;
  --color-dark-knight-200: #d6d5eb;
  --color-dark-knight-300: #bfbed7;
  --color-dark-knight-400: #9f9eb9;
  --color-dark-knight-500: #83829d;
  --color-dark-knight-600: #686780;
  --color-dark-knight-700: #515067;
  --color-dark-knight-800: #3e3d50;
  --color-dark-knight-900: #2e2d3d;
  --color-dark-knight-950: #1a182d;
}

Similar palettes