Italian Basil to Deep Forest Color Palette

About this palette

Italian Basil to Deep Forest is a 5-color muted palette: #636959 (Italian Basil), #94AFCF (Old World), #CCDEED (Put on Ice), #AE8387 (Punched Pink), #3F4234 (Deep Forest). It mixes gray, blue, red tones and feels balanced overall. The strongest text pairing is #CCDEED on #3F4234 with a contrast ratio of 7.47:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Italian Basil	rgb(99, 105, 89)	hsl(82, 8%, 38%)
Old World	rgb(148, 175, 207)	hsl(213, 38%, 70%)
Put on Ice	rgb(204, 222, 237)	hsl(207, 48%, 86%)
Punched Pink	rgb(174, 131, 135)	hsl(354, 21%, 60%)
Deep Forest	rgb(63, 66, 52)	hsl(73, 12%, 23%)

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.47:1 Very good#CCDEED on #3F4234
Aa7.47:1 Very good#3F4234 on #CCDEED
Aa4.55:1 Good#94AFCF on #3F4234
Aa4.55:1 Good#3F4234 on #94AFCF
Aa4.12:1 Poor#636959 on #CCDEED
Aa4.12:1 Poor#CCDEED on #636959
Aa3.14:1 Poor#AE8387 on #3F4234
Aa3.14:1 Poor#3F4234 on #AE8387

Color blindness preview

CSS variables

/* Italian Basil to Deep Forest — https://swatchly.xyz/palette/636959-94afcf-ccdeed-ae8387-3f4234 */
:root {
  --italian-basil: #636959;
  --old-world: #94afcf;
  --put-on-ice: #ccdeed;
  --punched-pink: #ae8387;
  --deep-forest: #3f4234;
}

Tailwind CSS v4

/* Italian Basil to Deep Forest — https://swatchly.xyz/palette/636959-94afcf-ccdeed-ae8387-3f4234 */
@theme {
  --color-italian-basil: #636959;
  --color-italian-basil-50: #f3f7ed;
  --color-italian-basil-100: #e8ece1;
  --color-italian-basil-200: #d2d8ca;
  --color-italian-basil-300: #bbc0b1;
  --color-italian-basil-400: #9aa090;
  --color-italian-basil-500: #7e8474;
  --color-italian-basil-600: #636959;
  --color-italian-basil-700: #4e5345;
  --color-italian-basil-800: #3d4135;
  --color-italian-basil-900: #2e3228;
  --color-italian-basil-950: #1c1f18;
  --color-old-world: #94afcf;
  --color-old-world-50: #f5f9ff;
  --color-old-world-100: #e7f2ff;
  --color-old-world-200: #cee1f9;
  --color-old-world-300: #b6cde7;
  --color-old-world-400: #94afcf;
  --color-old-world-500: #7791b0;
  --color-old-world-600: #5c7592;
  --color-old-world-700: #455c77;
  --color-old-world-800: #33475e;
  --color-old-world-900: #253649;
  --color-old-world-950: #14202e;
  --color-put-on-ice: #ccdeed;
  --color-put-on-ice-50: #f1f9ff;
  --color-put-on-ice-100: #e5f0f9;
  --color-put-on-ice-200: #ccdeed;
  --color-put-on-ice-300: #b7c6d3;
  --color-put-on-ice-400: #96a6b4;
  --color-put-on-ice-500: #7a8a98;
  --color-put-on-ice-600: #5f6f7c;
  --color-put-on-ice-700: #4a5864;
  --color-put-on-ice-800: #38444e;
  --color-put-on-ice-900: #2a343d;
  --color-put-on-ice-950: #192026;
  --color-punched-pink: #ae8387;
  --color-punched-pink-50: #fff4f5;
  --color-punched-pink-100: #ffe8ea;
  --color-punched-pink-200: #f5d3d6;
  --color-punched-pink-300: #e3bdc0;
  --color-punched-pink-400: #c79ea1;
  --color-punched-pink-500: #ae8387;
  --color-punched-pink-600: #90676b;
  --color-punched-pink-700: #755053;
  --color-punched-pink-800: #5d3c40;
  --color-punched-pink-900: #482d30;
  --color-punched-pink-950: #2e1a1c;
  --color-deep-forest: #3f4234;
  --color-deep-forest-50: #f4f6ed;
  --color-deep-forest-100: #eaede2;
  --color-deep-forest-200: #d6d9cd;
  --color-deep-forest-300: #bfc2b4;
  --color-deep-forest-400: #9fa393;
  --color-deep-forest-500: #838777;
  --color-deep-forest-600: #696c5d;
  --color-deep-forest-700: #525548;
  --color-deep-forest-800: #3f4234;
  --color-deep-forest-900: #303229;
  --color-deep-forest-950: #1d1f18;
}