Baby Blue to Chocolate Kiss Color Palette

About this palette

Baby Blue to Chocolate Kiss is a 5-color cool, vintage palette: #A8D5FF (Baby Blue), #F18500 (À l’Orange), #00736B (Pine Scented Lagoon), #004747 (Tropical Forest), #37111F (Chocolate Kiss). It mixes blue, orange, turquoise, red tones and feels cool overall. The strongest text pairing is #A8D5FF on #37111F with a contrast ratio of 10.79:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Baby Blue	rgb(168, 213, 255)	hsl(209, 100%, 83%)
À l’Orange	rgb(241, 133, 0)	hsl(33, 100%, 47%)
Pine Scented Lagoon	rgb(0, 115, 107)	hsl(176, 100%, 23%)
Tropical Forest	rgb(0, 71, 71)	hsl(180, 100%, 14%)
Chocolate Kiss	rgb(55, 17, 31)	hsl(338, 53%, 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.

Aa10.79:1 Very good#A8D5FF on #37111F
Aa10.79:1 Very good#37111F on #A8D5FF
Aa6.84:1 Good#A8D5FF on #004747
Aa6.84:1 Good#004747 on #A8D5FF
Aa6.41:1 Good#F18500 on #37111F
Aa6.41:1 Good#37111F on #F18500
Aa4.06:1 Poor#F18500 on #004747
Aa4.06:1 Poor#004747 on #F18500

Color blindness preview

CSS variables

/* Baby Blue to Chocolate Kiss — https://swatchly.xyz/palette/a8d5ff-f18500-00736b-004747-37111f */
:root {
  --baby-blue: #a8d5ff;
  --l-orange: #f18500;
  --pine-scented-lagoon: #00736b;
  --tropical-forest: #004747;
  --chocolate-kiss: #37111f;
}

Tailwind CSS v4

/* Baby Blue to Chocolate Kiss — https://swatchly.xyz/palette/a8d5ff-f18500-00736b-004747-37111f */
@theme {
  --color-baby-blue: #a8d5ff;
  --color-baby-blue-50: #e4f2ff;
  --color-baby-blue-100: #cfe8ff;
  --color-baby-blue-200: #a8d5ff;
  --color-baby-blue-300: #98bfe3;
  --color-baby-blue-400: #77a1c8;
  --color-baby-blue-500: #5d87ae;
  --color-baby-blue-600: #456d92;
  --color-baby-blue-700: #325879;
  --color-baby-blue-800: #244562;
  --color-baby-blue-900: #19354e;
  --color-baby-blue-950: #0c2133;
  --color-l-orange: #f18500;
  --color-l-orange-50: #fff4ec;
  --color-l-orange-100: #ffe8d7;
  --color-l-orange-200: #ffcfaa;
  --color-l-orange-300: #ffaf6f;
  --color-l-orange-400: #f18500;
  --color-l-orange-500: #c96e00;
  --color-l-orange-600: #a35800;
  --color-l-orange-700: #824500;
  --color-l-orange-800: #663500;
  --color-l-orange-900: #4f2800;
  --color-l-orange-950: #331700;
  --color-pine-scented-lagoon: #00736b;
  --color-pine-scented-lagoon-50: #d6fff9;
  --color-pine-scented-lagoon-100: #c1f6ef;
  --color-pine-scented-lagoon-200: #a2e3db;
  --color-pine-scented-lagoon-300: #81cdc4;
  --color-pine-scented-lagoon-400: #56ada4;
  --color-pine-scented-lagoon-500: #329087;
  --color-pine-scented-lagoon-600: #00736b;
  --color-pine-scented-lagoon-700: #005b55;
  --color-pine-scented-lagoon-800: #004842;
  --color-pine-scented-lagoon-900: #003833;
  --color-pine-scented-lagoon-950: #002320;
  --color-tropical-forest: #004747;
  --color-tropical-forest-50: #dcfdfc;
  --color-tropical-forest-100: #cff4f3;
  --color-tropical-forest-200: #b6e1e1;
  --color-tropical-forest-300: #98cbca;
  --color-tropical-forest-400: #73abab;
  --color-tropical-forest-500: #548f8e;
  --color-tropical-forest-600: #3a7373;
  --color-tropical-forest-700: #265a5a;
  --color-tropical-forest-800: #004747;
  --color-tropical-forest-900: #0d3535;
  --color-tropical-forest-950: #052121;
  --color-chocolate-kiss: #37111f;
  --color-chocolate-kiss-50: #fff1f5;
  --color-chocolate-kiss-100: #ffe3ea;
  --color-chocolate-kiss-200: #f3cbd6;
  --color-chocolate-kiss-300: #dfb3bf;
  --color-chocolate-kiss-400: #c292a0;
  --color-chocolate-kiss-500: #a77785;
  --color-chocolate-kiss-600: #8a5d6b;
  --color-chocolate-kiss-700: #714854;
  --color-chocolate-kiss-800: #5a3742;
  --color-chocolate-kiss-900: #472933;
  --color-chocolate-kiss-950: #37111f;
}