Start generating

In Good Taste to Castro color palette

B4D3A1In Good Taste005FB9Wing Commander4E9F48Golf Course7F2538Paprika78ABFFFennel Flower461E21Castro
Open in generator Export PNG, PDF, ASE…

About this palette

In Good Taste to Castro is a 6-color cool palette: #B4D3A1 (In Good Taste), #005FB9 (Wing Commander), #4E9F48 (Golf Course), #7F2538 (Paprika), #78ABFF (Fennel Flower), #461E21 (Castro). It mixes green, blue, red, brown tones and feels cool overall. The strongest text pairing is #B4D3A1 on #461E21 with a contrast ratio of 8.70:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
In Good Tastergb(180, 211, 161)hsl(97, 36%, 73%)
Wing Commanderrgb(0, 95, 185)hsl(209, 100%, 36%)
Golf Coursergb(78, 159, 72)hsl(116, 38%, 45%)
Paprikargb(127, 37, 56)hsl(347, 55%, 32%)
Fennel Flowerrgb(120, 171, 255)hsl(217, 100%, 74%)
Castrorgb(70, 30, 33)hsl(356, 40%, 20%)

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.

  • Aa8.70:1 Very good#B4D3A1 on #461E21
  • Aa8.70:1 Very good#461E21 on #B4D3A1
  • Aa6.18:1 Good#78ABFF on #461E21
  • Aa6.18:1 Good#461E21 on #78ABFF
  • Aa5.74:1 Good#B4D3A1 on #7F2538
  • Aa5.74:1 Good#7F2538 on #B4D3A1
  • Aa4.34:1 Poor#4E9F48 on #461E21
  • Aa4.34:1 Poor#461E21 on #4E9F48

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* In Good Taste to Castro — https://swatchly.xyz/palette/b4d3a1-005fb9-4e9f48-7f2538-78abff-461e21 */
:root {
  --in-good-taste: #b4d3a1;
  --wing-commander: #005fb9;
  --golf-course: #4e9f48;
  --paprika: #7f2538;
  --fennel-flower: #78abff;
  --castro: #461e21;
}

Tailwind CSS v4

/* In Good Taste to Castro — https://swatchly.xyz/palette/b4d3a1-005fb9-4e9f48-7f2538-78abff-461e21 */
@theme {
  --color-in-good-taste: #b4d3a1;
  --color-in-good-taste-50: #eeffe4;
  --color-in-good-taste-100: #e4f7d9;
  --color-in-good-taste-200: #cfe6c2;
  --color-in-good-taste-300: #b4d3a1;
  --color-in-good-taste-400: #95b183;
  --color-in-good-taste-500: #789566;
  --color-in-good-taste-600: #5d784b;
  --color-in-good-taste-700: #476036;
  --color-in-good-taste-800: #354b26;
  --color-in-good-taste-900: #27391a;
  --color-in-good-taste-950: #17240e;
  --color-wing-commander: #005fb9;
  --color-wing-commander-50: #eff6ff;
  --color-wing-commander-100: #dbebff;
  --color-wing-commander-200: #b6d6ff;
  --color-wing-commander-300: #8bbeff;
  --color-wing-commander-400: #4f9bf8;
  --color-wing-commander-500: #2d7dd9;
  --color-wing-commander-600: #005fb9;
  --color-wing-commander-700: #004b95;
  --color-wing-commander-800: #003a76;
  --color-wing-commander-900: #002d5e;
  --color-wing-commander-950: #001b3e;
  --color-golf-course: #4e9f48;
  --color-golf-course-50: #e3ffe0;
  --color-golf-course-100: #cbfcc5;
  --color-golf-course-200: #b0ecaa;
  --color-golf-course-300: #93d88d;
  --color-golf-course-400: #6dba67;
  --color-golf-course-500: #4e9f48;
  --color-golf-course-600: #32822d;
  --color-golf-course-700: #1b6917;
  --color-golf-course-800: #0a5307;
  --color-golf-course-900: #014000;
  --color-golf-course-950: #002900;
  --color-paprika: #7f2538;
  --color-paprika-50: #fff1f2;
  --color-paprika-100: #ffe3e6;
  --color-paprika-200: #ffc7cc;
  --color-paprika-300: #fea6b0;
  --color-paprika-400: #e48491;
  --color-paprika-500: #c96876;
  --color-paprika-600: #ad4f5e;
  --color-paprika-700: #923b4a;
  --color-paprika-800: #7f2538;
  --color-paprika-900: #611e2b;
  --color-paprika-950: #41101a;
  --color-fennel-flower: #78abff;
  --color-fennel-flower-50: #f5f9ff;
  --color-fennel-flower-100: #e8f1ff;
  --color-fennel-flower-200: #ccdfff;
  --color-fennel-flower-300: #aacbff;
  --color-fennel-flower-400: #78abff;
  --color-fennel-flower-500: #5c8dde;
  --color-fennel-flower-600: #4170be;
  --color-fennel-flower-700: #2c579f;
  --color-fennel-flower-800: #1d4281;
  --color-fennel-flower-900: #123266;
  --color-fennel-flower-950: #071d43;
  --color-castro: #461e21;
  --color-castro-50: #fff1f1;
  --color-castro-100: #ffe4e4;
  --color-castro-200: #f4cccd;
  --color-castro-300: #e1b4b5;
  --color-castro-400: #c29293;
  --color-castro-500: #a57576;
  --color-castro-600: #875a5c;
  --color-castro-700: #6c4445;
  --color-castro-800: #543233;
  --color-castro-900: #461e21;
  --color-castro-950: #271415;
}

Similar palettes