Garlic Toast to 3AM Breakup color palette

CBDB8CGarlic Toast 3C2B84Galactic Civilization DE762AHoly Cannoli 007196Blue Fjord 2A09003AM Breakup

Open in generator Export PNG, PDF, ASE…

About this palette

Garlic Toast to 3AM Breakup is a 5-color cool palette: #CBDB8C (Garlic Toast), #3C2B84 (Galactic Civilization), #DE762A (Holy Cannoli), #007196 (Blue Fjord), #2A0900 (3AM Breakup). It mixes green, purple, orange, blue, black tones and feels cool overall. The strongest text pairing is #CBDB8C on #2A0900 with a contrast ratio of 12.35:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Garlic Toast	rgb(203, 219, 140)	hsl(72, 52%, 70%)
Galactic Civilization	rgb(60, 43, 132)	hsl(251, 51%, 34%)
Holy Cannoli	rgb(222, 118, 42)	hsl(25, 73%, 52%)
Blue Fjord	rgb(0, 113, 150)	hsl(195, 100%, 29%)
3AM Breakup	rgb(42, 9, 0)	hsl(13, 100%, 8%)

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.35:1 Super#CBDB8C on #2A0900
Aa12.35:1 Super#2A0900 on #CBDB8C
Aa7.51:1 Very good#CBDB8C on #3C2B84
Aa7.51:1 Very good#3C2B84 on #CBDB8C
Aa5.92:1 Good#DE762A on #2A0900
Aa5.92:1 Good#2A0900 on #DE762A
Aa3.70:1 Poor#CBDB8C on #007196
Aa3.70:1 Poor#007196 on #CBDB8C

Color blindness preview

CSS variables

/* Garlic Toast to 3AM Breakup — https://swatchly.xyz/palette/cbdb8c-3c2b84-de762a-007196-2a0900 */
:root {
  --garlic-toast: #cbdb8c;
  --galactic-civilization: #3c2b84;
  --holy-cannoli: #de762a;
  --blue-fjord: #007196;
  --c-3am-breakup: #2a0900;
}

Tailwind CSS v4

/* Garlic Toast to 3AM Breakup — https://swatchly.xyz/palette/cbdb8c-3c2b84-de762a-007196-2a0900 */
@theme {
  --color-garlic-toast: #cbdb8c;
  --color-garlic-toast-50: #edf7ca;
  --color-garlic-toast-100: #e1edba;
  --color-garlic-toast-200: #cbdb8c;
  --color-garlic-toast-300: #b6c481;
  --color-garlic-toast-400: #98a65c;
  --color-garlic-toast-500: #7e8c3f;
  --color-garlic-toast-600: #657225;
  --color-garlic-toast-700: #505b11;
  --color-garlic-toast-800: #3f4802;
  --color-garlic-toast-900: #303700;
  --color-garlic-toast-950: #1d2200;
  --color-galactic-civilization: #3c2b84;
  --color-galactic-civilization-50: #f4f4ff;
  --color-galactic-civilization-100: #e9e9ff;
  --color-galactic-civilization-200: #d3d2ff;
  --color-galactic-civilization-300: #bab7ff;
  --color-galactic-civilization-400: #9992f1;
  --color-galactic-civilization-500: #7e75d4;
  --color-galactic-civilization-600: #6459b4;
  --color-galactic-civilization-700: #4e4395;
  --color-galactic-civilization-800: #3c2b84;
  --color-galactic-civilization-900: #2d2460;
  --color-galactic-civilization-950: #1b153f;
  --color-holy-cannoli: #de762a;
  --color-holy-cannoli-50: #ffede3;
  --color-holy-cannoli-100: #ffddca;
  --color-holy-cannoli-200: #ffbf99;
  --color-holy-cannoli-300: #fc9c5f;
  --color-holy-cannoli-400: #de762a;
  --color-holy-cannoli-500: #c05d00;
  --color-holy-cannoli-600: #9c4a00;
  --color-holy-cannoli-700: #7e3a00;
  --color-holy-cannoli-800: #642d00;
  --color-holy-cannoli-900: #502300;
  --color-holy-cannoli-950: #351500;
  --color-blue-fjord: #007196;
  --color-blue-fjord-50: #eaf8ff;
  --color-blue-fjord-100: #d2f0ff;
  --color-blue-fjord-200: #a1e0ff;
  --color-blue-fjord-300: #80c9ec;
  --color-blue-fjord-400: #55aad0;
  --color-blue-fjord-500: #318db3;
  --color-blue-fjord-600: #007196;
  --color-blue-fjord-700: #005a78;
  --color-blue-fjord-800: #00465f;
  --color-blue-fjord-900: #00364a;
  --color-blue-fjord-950: #002230;
  --color-c-3am-breakup: #2a0900;
  --color-c-3am-breakup-50: #fff2ed;
  --color-c-3am-breakup-100: #ffe5db;
  --color-c-3am-breakup-200: #f2cfc1;
  --color-c-3am-breakup-300: #dfb7a8;
  --color-c-3am-breakup-400: #c19686;
  --color-c-3am-breakup-500: #a37968;
  --color-c-3am-breakup-600: #855d4d;
  --color-c-3am-breakup-700: #694538;
  --color-c-3am-breakup-800: #503227;
  --color-c-3am-breakup-900: #3b231a;
  --color-c-3am-breakup-950: #2a0900;
}