Greenhorn to Dark Prom Queen Color Palette

About this palette

Greenhorn to Dark Prom Queen is a 4-color cool palette: #B0CD8C (Greenhorn), #B27200 (Caramel), #00518E (Dancing Sea), #321136 (Dark Prom Queen). It mixes green, orange, blue, purple tones and feels cool overall. The strongest text pairing is #B0CD8C on #321136 with a contrast ratio of 9.42:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Greenhorn	rgb(176, 205, 140)	hsl(87, 39%, 68%)
Caramel	rgb(178, 114, 0)	hsl(38, 100%, 35%)
Dancing Sea	rgb(0, 81, 142)	hsl(206, 100%, 28%)
Dark Prom Queen	rgb(50, 17, 54)	hsl(294, 52%, 14%)

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.

Aa9.42:1 Very good#B0CD8C on #321136
Aa9.42:1 Very good#321136 on #B0CD8C
Aa4.66:1 Good#B0CD8C on #00518E
Aa4.66:1 Good#00518E on #B0CD8C
Aa4.18:1 Poor#B27200 on #321136
Aa4.18:1 Poor#321136 on #B27200

Color blindness preview

CSS variables

/* Greenhorn to Dark Prom Queen — https://swatchly.xyz/palette/b0cd8c-b27200-00518e-321136 */
:root {
  --greenhorn: #b0cd8c;
  --caramel: #b27200;
  --dancing-sea: #00518e;
  --dark-prom-queen: #321136;
}

Tailwind CSS v4

/* Greenhorn to Dark Prom Queen — https://swatchly.xyz/palette/b0cd8c-b27200-00518e-321136 */
@theme {
  --color-greenhorn: #b0cd8c;
  --color-greenhorn-50: #ebfcd8;
  --color-greenhorn-100: #e0f3cb;
  --color-greenhorn-200: #cbe1b1;
  --color-greenhorn-300: #b0cd8c;
  --color-greenhorn-400: #92ad70;
  --color-greenhorn-500: #769153;
  --color-greenhorn-600: #5d7639;
  --color-greenhorn-700: #475e26;
  --color-greenhorn-800: #364a18;
  --color-greenhorn-900: #29390e;
  --color-greenhorn-950: #182405;
  --color-caramel: #b27200;
  --color-caramel-50: #fff2e3;
  --color-caramel-100: #ffe5c7;
  --color-caramel-200: #ffcb8c;
  --color-caramel-300: #ecb169;
  --color-caramel-400: #cf8f39;
  --color-caramel-500: #b27200;
  --color-caramel-600: #905b00;
  --color-caramel-700: #734800;
  --color-caramel-800: #5b3800;
  --color-caramel-900: #472b00;
  --color-caramel-950: #2e1a00;
  --color-dancing-sea: #00518e;
  --color-dancing-sea-50: #eef6ff;
  --color-dancing-sea-100: #ddedff;
  --color-dancing-sea-200: #b7daff;
  --color-dancing-sea-300: #8ac4ff;
  --color-dancing-sea-400: #62a3e4;
  --color-dancing-sea-500: #4386c7;
  --color-dancing-sea-600: #276aa7;
  --color-dancing-sea-700: #00518e;
  --color-dancing-sea-800: #053f6e;
  --color-dancing-sea-900: #003058;
  --color-dancing-sea-950: #001d3a;
  --color-dark-prom-queen: #321136;
  --color-dark-prom-queen-50: #fef0ff;
  --color-dark-prom-queen-100: #fce1fe;
  --color-dark-prom-queen-200: #ebcbee;
  --color-dark-prom-queen-300: #d7b3da;
  --color-dark-prom-queen-400: #b992bd;
  --color-dark-prom-queen-500: #9e77a2;
  --color-dark-prom-queen-600: #825d86;
  --color-dark-prom-queen-700: #6a486e;
  --color-dark-prom-queen-800: #553758;
  --color-dark-prom-queen-900: #432a46;
  --color-dark-prom-queen-950: #321136;
}