Honolulu Blue to Forbidden Passion color palette

177FC4Honolulu Blue EC9F63Pumpkin Pie FFBDC9Love Affair 0B5E58Mosque CA6F00Cinnamon 6B192DForbidden Passion

Open in generator Export PNG, PDF, ASE…

About this palette

Honolulu Blue to Forbidden Passion is a 6-color warm palette: #177FC4 (Honolulu Blue), #EC9F63 (Pumpkin Pie), #FFBDC9 (Love Affair), #0B5E58 (Mosque), #CA6F00 (Cinnamon), #6B192D (Forbidden Passion). It mixes blue, orange, pink, turquoise, brown tones and feels warm overall. The strongest text pairing is #FFBDC9 on #6B192D with a contrast ratio of 7.42:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Honolulu Blue	rgb(23, 127, 196)	hsl(204, 79%, 43%)
Pumpkin Pie	rgb(236, 159, 99)	hsl(26, 78%, 66%)
Love Affair	rgb(255, 189, 201)	hsl(349, 100%, 87%)
Mosque	rgb(11, 94, 88)	hsl(176, 79%, 21%)
Cinnamon	rgb(202, 111, 0)	hsl(33, 100%, 40%)
Forbidden Passion	rgb(107, 25, 45)	hsl(345, 62%, 26%)

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.

Aa7.42:1 Very good#FFBDC9 on #6B192D
Aa7.42:1 Very good#6B192D on #FFBDC9
Aa5.39:1 Good#EC9F63 on #6B192D
Aa5.39:1 Good#6B192D on #EC9F63
Aa4.85:1 Good#FFBDC9 on #0B5E58
Aa4.85:1 Good#0B5E58 on #FFBDC9
Aa3.52:1 Poor#EC9F63 on #0B5E58
Aa3.52:1 Poor#0B5E58 on #EC9F63

Color blindness preview

CSS variables

/* Honolulu Blue to Forbidden Passion — https://swatchly.xyz/palette/177fc4-ec9f63-ffbdc9-0b5e58-ca6f00-6b192d */
:root {
  --honolulu-blue: #177fc4;
  --pumpkin-pie: #ec9f63;
  --love-affair: #ffbdc9;
  --mosque: #0b5e58;
  --cinnamon: #ca6f00;
  --forbidden-passion: #6b192d;
}

Tailwind CSS v4

/* Honolulu Blue to Forbidden Passion — https://swatchly.xyz/palette/177fc4-ec9f63-ffbdc9-0b5e58-ca6f00-6b192d */
@theme {
  --color-honolulu-blue: #177fc4;
  --color-honolulu-blue-50: #e9f4ff;
  --color-honolulu-blue-100: #d2eaff;
  --color-honolulu-blue-200: #a7d6ff;
  --color-honolulu-blue-300: #72bfff;
  --color-honolulu-blue-400: #429de3;
  --color-honolulu-blue-500: #177fc4;
  --color-honolulu-blue-600: #0066a2;
  --color-honolulu-blue-700: #005183;
  --color-honolulu-blue-800: #004068;
  --color-honolulu-blue-900: #003253;
  --color-honolulu-blue-950: #001f37;
  --color-pumpkin-pie: #ec9f63;
  --color-pumpkin-pie-50: #ffe9da;
  --color-pumpkin-pie-100: #ffd9be;
  --color-pumpkin-pie-200: #fcbc8d;
  --color-pumpkin-pie-300: #ec9f63;
  --color-pumpkin-pie-400: #cc8348;
  --color-pumpkin-pie-500: #b2692b;
  --color-pumpkin-pie-600: #96520e;
  --color-pumpkin-pie-700: #7b4000;
  --color-pumpkin-pie-800: #633200;
  --color-pumpkin-pie-900: #4f2700;
  --color-pumpkin-pie-950: #331700;
  --color-love-affair: #ffbdc9;
  --color-love-affair-50: #ffebef;
  --color-love-affair-100: #ffdce2;
  --color-love-affair-200: #ffbdc9;
  --color-love-affair-300: #e3abb5;
  --color-love-affair-400: #c78a96;
  --color-love-affair-500: #ac707c;
  --color-love-affair-600: #8f5763;
  --color-love-affair-700: #76434e;
  --color-love-affair-800: #5f333c;
  --color-love-affair-900: #4b262e;
  --color-love-affair-950: #31161c;
  --color-mosque: #0b5e58;
  --color-mosque-50: #d8fefa;
  --color-mosque-100: #caf6f0;
  --color-mosque-200: #afe3dd;
  --color-mosque-300: #91cdc6;
  --color-mosque-400: #6aaea7;
  --color-mosque-500: #4a928b;
  --color-mosque-600: #2f766f;
  --color-mosque-700: #0b5e58;
  --color-mosque-800: #0b4944;
  --color-mosque-900: #033935;
  --color-mosque-950: #002421;
  --color-cinnamon: #ca6f00;
  --color-cinnamon-50: #fff3eb;
  --color-cinnamon-100: #ffe8d6;
  --color-cinnamon-200: #ffcea9;
  --color-cinnamon-300: #ffaf6e;
  --color-cinnamon-400: #e58c3c;
  --color-cinnamon-500: #ca6f00;
  --color-cinnamon-600: #a35900;
  --color-cinnamon-700: #824600;
  --color-cinnamon-800: #673500;
  --color-cinnamon-900: #502800;
  --color-cinnamon-950: #331800;
  --color-forbidden-passion: #6b192d;
  --color-forbidden-passion-50: #fff1f2;
  --color-forbidden-passion-100: #ffe3e6;
  --color-forbidden-passion-200: #ffc7cd;
  --color-forbidden-passion-300: #f8a5b0;
  --color-forbidden-passion-400: #da818e;
  --color-forbidden-passion-500: #bd6371;
  --color-forbidden-passion-600: #9d4957;
  --color-forbidden-passion-700: #7e3442;
  --color-forbidden-passion-800: #6b192d;
  --color-forbidden-passion-900: #4e1924;
  --color-forbidden-passion-950: #320d14;
}