Halo to Pink Swirl color palette

E5C497Halo 297590Celestial 473133Dark Roast 2B1F05Burnt Coffee 5890B5Treasure Map Waters FFE9E5Pink Swirl

Open in generator Export PNG, PDF, ASE…

About this palette

Halo to Pink Swirl is a 6-color muted palette: #E5C497 (Halo), #297590 (Celestial), #473133 (Dark Roast), #2B1F05 (Burnt Coffee), #5890B5 (Treasure Map Waters), #FFE9E5 (Pink Swirl). It mixes yellow, blue, gray, brown, white tones and feels balanced overall. The strongest text pairing is #2B1F05 on #FFE9E5 with a contrast ratio of 13.87:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Halo	rgb(229, 196, 151)	hsl(35, 60%, 75%)
Celestial	rgb(41, 117, 144)	hsl(196, 56%, 36%)
Dark Roast	rgb(71, 49, 51)	hsl(355, 18%, 24%)
Burnt Coffee	rgb(43, 31, 5)	hsl(41, 79%, 9%)
Treasure Map Waters	rgb(88, 144, 181)	hsl(204, 39%, 53%)
Pink Swirl	rgb(255, 233, 229)	hsl(9, 100%, 95%)

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.

Aa13.87:1 Super#2B1F05 on #FFE9E5
Aa13.87:1 Super#FFE9E5 on #2B1F05
Aa10.28:1 Very good#473133 on #FFE9E5
Aa10.28:1 Very good#FFE9E5 on #473133
Aa9.74:1 Very good#E5C497 on #2B1F05
Aa9.74:1 Very good#2B1F05 on #E5C497
Aa7.22:1 Very good#E5C497 on #473133
Aa7.22:1 Very good#473133 on #E5C497

Color blindness preview

CSS variables

/* Halo to Pink Swirl — https://swatchly.xyz/palette/e5c497-297590-473133-2b1f05-5890b5-ffe9e5 */
:root {
  --halo: #e5c497;
  --celestial: #297590;
  --dark-roast: #473133;
  --burnt-coffee: #2b1f05;
  --treasure-map-waters: #5890b5;
  --pink-swirl: #ffe9e5;
}

Tailwind CSS v4

/* Halo to Pink Swirl — https://swatchly.xyz/palette/e5c497-297590-473133-2b1f05-5890b5-ffe9e5 */
@theme {
  --color-halo: #e5c497;
  --color-halo-50: #fff9f0;
  --color-halo-100: #ffefd9;
  --color-halo-200: #f3dbbc;
  --color-halo-300: #e5c497;
  --color-halo-400: #c1a37a;
  --color-halo-500: #a5865b;
  --color-halo-600: #886a40;
  --color-halo-700: #6d522c;
  --color-halo-800: #563f1c;
  --color-halo-900: #422f11;
  --color-halo-950: #2a1c07;
  --color-celestial: #297590;
  --color-celestial-50: #e8f8ff;
  --color-celestial-100: #d1f1ff;
  --color-celestial-200: #ace1f7;
  --color-celestial-300: #8ecbe4;
  --color-celestial-400: #67acc7;
  --color-celestial-500: #4790ac;
  --color-celestial-600: #297590;
  --color-celestial-700: #155d75;
  --color-celestial-800: #04495e;
  --color-celestial-900: #00394a;
  --color-celestial-950: #00232f;
  --color-dark-roast: #473133;
  --color-dark-roast-50: #fff1f2;
  --color-dark-roast-100: #f8e6e7;
  --color-dark-roast-200: #e7d1d3;
  --color-dark-roast-300: #d2babc;
  --color-dark-roast-400: #b59b9d;
  --color-dark-roast-500: #9b8183;
  --color-dark-roast-600: #806769;
  --color-dark-roast-700: #695254;
  --color-dark-roast-800: #554142;
  --color-dark-roast-900: #473133;
  --color-dark-roast-950: #2c1f20;
  --color-burnt-coffee: #2b1f05;
  --color-burnt-coffee-50: #fdf4e3;
  --color-burnt-coffee-100: #f4ead7;
  --color-burnt-coffee-200: #e2d6c0;
  --color-burnt-coffee-300: #cdbfa6;
  --color-burnt-coffee-400: #aea084;
  --color-burnt-coffee-500: #938569;
  --color-burnt-coffee-600: #796b50;
  --color-burnt-coffee-700: #61553c;
  --color-burnt-coffee-800: #4d422d;
  --color-burnt-coffee-900: #3d3321;
  --color-burnt-coffee-950: #2b1f05;
  --color-treasure-map-waters: #5890b5;
  --color-treasure-map-waters-50: #edf7ff;
  --color-treasure-map-waters-100: #daf0ff;
  --color-treasure-map-waters-200: #b6dffd;
  --color-treasure-map-waters-300: #9acaeb;
  --color-treasure-map-waters-400: #75abd0;
  --color-treasure-map-waters-500: #5890b5;
  --color-treasure-map-waters-600: #3e7498;
  --color-treasure-map-waters-700: #295d7d;
  --color-treasure-map-waters-800: #1a4864;
  --color-treasure-map-waters-900: #0f374f;
  --color-treasure-map-waters-950: #062233;
  --color-pink-swirl: #ffe9e5;
  --color-pink-swirl-50: #fff6f4;
  --color-pink-swirl-100: #ffe9e5;
  --color-pink-swirl-200: #e6d6d3;
  --color-pink-swirl-300: #d0bebb;
  --color-pink-swirl-400: #b29e9a;
  --color-pink-swirl-500: #96827e;
  --color-pink-swirl-600: #7a6764;
  --color-pink-swirl-700: #61514e;
  --color-pink-swirl-800: #4d3e3c;
  --color-pink-swirl-900: #3c302d;
  --color-pink-swirl-950: #261d1b;
}