Shrimp Toast to Capital Blue Color Palette

About this palette

Shrimp Toast to Capital Blue is a 5-color cool palette: #FBC6A5 (Shrimp Toast), #E79B4D (Pumpkin Pie), #007FC2 (Honolulu Blue), #146091 (Hyper Blue), #15455E (Capital Blue). It mixes orange, blue tones and feels cool overall. The strongest text pairing is #FBC6A5 on #15455E with a contrast ratio of 6.71:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Shrimp Toast	rgb(251, 198, 165)	hsl(23, 91%, 82%)
Pumpkin Pie	rgb(231, 155, 77)	hsl(30, 76%, 60%)
Honolulu Blue	rgb(0, 127, 194)	hsl(201, 100%, 38%)
Hyper Blue	rgb(20, 96, 145)	hsl(204, 76%, 32%)
Capital Blue	rgb(21, 69, 94)	hsl(201, 63%, 23%)

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.

Aa6.71:1 Good#FBC6A5 on #15455E
Aa6.71:1 Good#15455E on #FBC6A5
Aa4.50:1 Poor#E79B4D on #15455E
Aa4.50:1 Poor#15455E on #E79B4D
Aa4.41:1 Poor#FBC6A5 on #146091
Aa4.41:1 Poor#146091 on #FBC6A5

Color blindness preview

CSS variables

/* Shrimp Toast to Capital Blue — https://swatchly.xyz/palette/fbc6a5-e79b4d-007fc2-146091-15455e */
:root {
  --shrimp-toast: #fbc6a5;
  --pumpkin-pie: #e79b4d;
  --honolulu-blue: #007fc2;
  --hyper-blue: #146091;
  --capital-blue: #15455e;
}

Tailwind CSS v4

/* Shrimp Toast to Capital Blue — https://swatchly.xyz/palette/fbc6a5-e79b4d-007fc2-146091-15455e */
@theme {
  --color-shrimp-toast: #fbc6a5;
  --color-shrimp-toast-50: #ffeee4;
  --color-shrimp-toast-100: #ffe0cd;
  --color-shrimp-toast-200: #fbc6a5;
  --color-shrimp-toast-300: #dfb296;
  --color-shrimp-toast-400: #c39274;
  --color-shrimp-toast-500: #a87859;
  --color-shrimp-toast-600: #8c5e41;
  --color-shrimp-toast-700: #73492e;
  --color-shrimp-toast-800: #5c3820;
  --color-shrimp-toast-900: #492a16;
  --color-shrimp-toast-950: #2f190a;
  --color-pumpkin-pie: #e79b4d;
  --color-pumpkin-pie-50: #fff8f2;
  --color-pumpkin-pie-100: #ffefe0;
  --color-pumpkin-pie-200: #ffd8b5;
  --color-pumpkin-pie-300: #fcbd82;
  --color-pumpkin-pie-400: #e79b4d;
  --color-pumpkin-pie-500: #c67d2c;
  --color-pumpkin-pie-600: #a56100;
  --color-pumpkin-pie-700: #834c00;
  --color-pumpkin-pie-800: #663a00;
  --color-pumpkin-pie-900: #4e2b00;
  --color-pumpkin-pie-950: #311900;
  --color-honolulu-blue: #007fc2;
  --color-honolulu-blue-50: #edf7ff;
  --color-honolulu-blue-100: #def0ff;
  --color-honolulu-blue-200: #bde1ff;
  --color-honolulu-blue-300: #92cfff;
  --color-honolulu-blue-400: #58b3f5;
  --color-honolulu-blue-500: #3399dd;
  --color-honolulu-blue-600: #007fc2;
  --color-honolulu-blue-700: #00659b;
  --color-honolulu-blue-800: #004e7a;
  --color-honolulu-blue-900: #003c5f;
  --color-honolulu-blue-950: #00253e;
  --color-hyper-blue: #146091;
  --color-hyper-blue-50: #edf7ff;
  --color-hyper-blue-100: #daeeff;
  --color-hyper-blue-200: #b6deff;
  --color-hyper-blue-300: #90caf9;
  --color-hyper-blue-400: #6aacdf;
  --color-hyper-blue-500: #4c91c5;
  --color-hyper-blue-600: #3177a9;
  --color-hyper-blue-700: #146091;
  --color-hyper-blue-800: #0a4b74;
  --color-hyper-blue-900: #013a5c;
  --color-hyper-blue-950: #00243c;
  --color-capital-blue: #15455e;
  --color-capital-blue-50: #ebf7ff;
  --color-capital-blue-100: #d7efff;
  --color-capital-blue-200: #b9ddf4;
  --color-capital-blue-300: #9ec7e0;
  --color-capital-blue-400: #7aa7c3;
  --color-capital-blue-500: #5d8ba7;
  --color-capital-blue-600: #43708b;
  --color-capital-blue-700: #2f5870;
  --color-capital-blue-800: #15455e;
  --color-capital-blue-900: #153546;
  --color-capital-blue-950: #0a202d;
}