Haiti to Persian Melon Color Palette

About this palette

Haiti to Persian Melon is a 5-color cool palette: #30273C (Haiti), #82C6B1 (Seaborn), #8475D3 (Matt Purple), #2B614E (Herbes de Provence), #FFDCC1 (Persian Melon). It mixes purple, turquoise, orange tones and feels cool overall. The strongest text pairing is #30273C on #FFDCC1 with a contrast ratio of 10.98:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Haiti	rgb(48, 39, 60)	hsl(266, 21%, 19%)
Seaborn	rgb(130, 198, 177)	hsl(161, 37%, 64%)
Matt Purple	rgb(132, 117, 211)	hsl(250, 52%, 64%)
Herbes de Provence	rgb(43, 97, 78)	hsl(159, 39%, 27%)
Persian Melon	rgb(255, 220, 193)	hsl(26, 100%, 88%)

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.

Aa10.98:1 Very good#30273C on #FFDCC1
Aa10.98:1 Very good#FFDCC1 on #30273C
Aa7.20:1 Very good#30273C on #82C6B1
Aa7.20:1 Very good#82C6B1 on #30273C
Aa5.56:1 Good#2B614E on #FFDCC1
Aa5.56:1 Good#FFDCC1 on #2B614E
Aa3.69:1 Poor#30273C on #8475D3
Aa3.69:1 Poor#8475D3 on #30273C

Color blindness preview

CSS variables

/* Haiti to Persian Melon — https://swatchly.xyz/palette/30273c-82c6b1-8475d3-2b614e-ffdcc1 */
:root {
  --haiti: #30273c;
  --seaborn: #82c6b1;
  --matt-purple: #8475d3;
  --herbes-de-provence: #2b614e;
  --persian-melon: #ffdcc1;
}

Tailwind CSS v4

/* Haiti to Persian Melon — https://swatchly.xyz/palette/30273c-82c6b1-8475d3-2b614e-ffdcc1 */
@theme {
  --color-haiti: #30273c;
  --color-haiti-50: #f7f2ff;
  --color-haiti-100: #eee8f9;
  --color-haiti-200: #dbd3e8;
  --color-haiti-300: #c5bcd3;
  --color-haiti-400: #a59bb4;
  --color-haiti-500: #887e97;
  --color-haiti-600: #6c637a;
  --color-haiti-700: #544c61;
  --color-haiti-800: #40384a;
  --color-haiti-900: #30273c;
  --color-haiti-950: #1c1822;
  --color-seaborn: #82c6b1;
  --color-seaborn-50: #d2faec;
  --color-seaborn-100: #c2efe0;
  --color-seaborn-200: #a6dbca;
  --color-seaborn-300: #82c6b1;
  --color-seaborn-400: #66a894;
  --color-seaborn-500: #4b8e7b;
  --color-seaborn-600: #337563;
  --color-seaborn-700: #205e4e;
  --color-seaborn-800: #134c3d;
  --color-seaborn-900: #093c30;
  --color-seaborn-950: #03261d;
  --color-matt-purple: #8475d3;
  --color-matt-purple-50: #f4f4ff;
  --color-matt-purple-100: #eae8ff;
  --color-matt-purple-200: #d5d1ff;
  --color-matt-purple-300: #beb6ff;
  --color-matt-purple-400: #9f92ef;
  --color-matt-purple-500: #8475d3;
  --color-matt-purple-600: #6a5bb4;
  --color-matt-purple-700: #554596;
  --color-matt-purple-800: #42337b;
  --color-matt-purple-900: #332663;
  --color-matt-purple-950: #1f1642;
  --color-herbes-de-provence: #2b614e;
  --color-herbes-de-provence-50: #dffef0;
  --color-herbes-de-provence-100: #d2f5e6;
  --color-herbes-de-provence-200: #b9e2d1;
  --color-herbes-de-provence-300: #9ecdba;
  --color-herbes-de-provence-400: #7aaf9a;
  --color-herbes-de-provence-500: #5d937e;
  --color-herbes-de-provence-600: #437864;
  --color-herbes-de-provence-700: #2b614e;
  --color-herbes-de-provence-800: #204c3d;
  --color-herbes-de-provence-900: #153b2e;
  --color-herbes-de-provence-950: #0a251c;
  --color-persian-melon: #ffdcc1;
  --color-persian-melon-50: #ffeadb;
  --color-persian-melon-100: #ffdcc1;
  --color-persian-melon-200: #e6ccb7;
  --color-persian-melon-300: #d3b69f;
  --color-persian-melon-400: #b6977e;
  --color-persian-melon-500: #9c7d64;
  --color-persian-melon-600: #81644c;
  --color-persian-melon-700: #6a4f39;
  --color-persian-melon-800: #543d2a;
  --color-persian-melon-900: #422e1e;
  --color-persian-melon-950: #2a1c10;
}