Cruising to Indian Pale Ale color palette

008896Cruising 8F8900Captain Kirk FC545ARed Mana 00BF33Whole Nine Yards D5A000Mustard Musketeers DDBA00Indian Pale Ale

Open in generator Export PNG, PDF, ASE…

About this palette

Cruising to Indian Pale Ale is a 6-color vibrant, warm, neon palette: #008896 (Cruising), #8F8900 (Captain Kirk), #FC545A (Red Mana), #00BF33 (Whole Nine Yards), #D5A000 (Mustard Musketeers), #DDBA00 (Indian Pale Ale). It mixes turquoise, yellow, red, green tones and feels warm overall. The strongest text pairing is #008896 on #DDBA00 with a contrast ratio of 2.24:1, and 0 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cruising	rgb(0, 136, 150)	hsl(186, 100%, 29%)
Captain Kirk	rgb(143, 137, 0)	hsl(57, 100%, 28%)
Red Mana	rgb(252, 84, 90)	hsl(358, 97%, 66%)
Whole Nine Yards	rgb(0, 191, 51)	hsl(136, 100%, 37%)
Mustard Musketeers	rgb(213, 160, 0)	hsl(45, 100%, 42%)
Indian Pale Ale	rgb(221, 186, 0)	hsl(50, 100%, 43%)

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.

Color blindness preview

CSS variables

/* Cruising to Indian Pale Ale — https://swatchly.xyz/palette/008896-8f8900-fc545a-00bf33-d5a000-ddba00 */
:root {
  --cruising: #008896;
  --captain-kirk: #8f8900;
  --red-mana: #fc545a;
  --whole-nine-yards: #00bf33;
  --mustard-musketeers: #d5a000;
  --indian-pale-ale: #ddba00;
}

Tailwind CSS v4

/* Cruising to Indian Pale Ale — https://swatchly.xyz/palette/008896-8f8900-fc545a-00bf33-d5a000-ddba00 */
@theme {
  --color-cruising: #008896;
  --color-cruising-50: #e0fbff;
  --color-cruising-100: #c7f8ff;
  --color-cruising-200: #a5eaf4;
  --color-cruising-300: #86d7e3;
  --color-cruising-400: #5bbbc8;
  --color-cruising-500: #35a1af;
  --color-cruising-600: #008896;
  --color-cruising-700: #006c77;
  --color-cruising-800: #00545e;
  --color-cruising-900: #004148;
  --color-cruising-950: #00282d;
  --color-captain-kirk: #8f8900;
  --color-captain-kirk-50: #faf9c0;
  --color-captain-kirk-100: #f1efaf;
  --color-captain-kirk-200: #dedc8e;
  --color-captain-kirk-300: #c9c56b;
  --color-captain-kirk-400: #aaa53a;
  --color-captain-kirk-500: #8f8900;
  --color-captain-kirk-600: #736e00;
  --color-captain-kirk-700: #5b5700;
  --color-captain-kirk-800: #474400;
  --color-captain-kirk-900: #373400;
  --color-captain-kirk-950: #222000;
  --color-red-mana: #fc545a;
  --color-red-mana-50: #ffedeb;
  --color-red-mana-100: #ffdcda;
  --color-red-mana-200: #ffbdb9;
  --color-red-mana-300: #ff9693;
  --color-red-mana-400: #fc545a;
  --color-red-mana-500: #dd3541;
  --color-red-mana-600: #bd102b;
  --color-red-mana-700: #9a001e;
  --color-red-mana-800: #7c0016;
  --color-red-mana-900: #63000f;
  --color-red-mana-950: #420007;
  --color-whole-nine-yards: #00bf33;
  --color-whole-nine-yards-50: #ddffdc;
  --color-whole-nine-yards-100: #b7ffb8;
  --color-whole-nine-yards-200: #89f28e;
  --color-whole-nine-yards-300: #61dd6a;
  --color-whole-nine-yards-400: #00bf33;
  --color-whole-nine-yards-500: #009f29;
  --color-whole-nine-yards-600: #00811f;
  --color-whole-nine-yards-700: #006617;
  --color-whole-nine-yards-800: #005110;
  --color-whole-nine-yards-900: #003f0a;
  --color-whole-nine-yards-950: #002804;
  --color-mustard-musketeers: #d5a000;
  --color-mustard-musketeers-50: #fff7e7;
  --color-mustard-musketeers-100: #ffeeca;
  --color-mustard-musketeers-200: #fed888;
  --color-mustard-musketeers-300: #edc162;
  --color-mustard-musketeers-400: #d5a000;
  --color-mustard-musketeers-500: #b18500;
  --color-mustard-musketeers-600: #8f6a00;
  --color-mustard-musketeers-700: #715300;
  --color-mustard-musketeers-800: #584000;
  --color-mustard-musketeers-900: #443000;
  --color-mustard-musketeers-950: #2a1d00;
  --color-indian-pale-ale: #ddba00;
  --color-indian-pale-ale-50: #fff3c6;
  --color-indian-pale-ale-100: #fde896;
  --color-indian-pale-ale-200: #edd36e;
  --color-indian-pale-ale-300: #ddba00;
  --color-indian-pale-ale-400: #ba9c00;
  --color-indian-pale-ale-500: #9b8200;
  --color-indian-pale-ale-600: #7d6800;
  --color-indian-pale-ale-700: #645300;
  --color-indian-pale-ale-800: #4f4100;
  --color-indian-pale-ale-900: #3d3200;
  --color-indian-pale-ale-950: #271f00;
}