Luna to June Ivy Color Palette

About this palette

Luna to June Ivy is a 4-color muted palette: #CDD9CF (Luna), #241F27 (Ink Black), #AE878F (Punched Pink), #4A6451 (June Ivy). It mixes gray, pink, green tones and feels balanced overall. The strongest text pairing is #CDD9CF on #241F27 with a contrast ratio of 11.09:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Luna	rgb(205, 217, 207)	hsl(130, 14%, 83%)
Ink Black	rgb(36, 31, 39)	hsl(278, 11%, 14%)
Punched Pink	rgb(174, 135, 143)	hsl(348, 19%, 61%)
June Ivy	rgb(74, 100, 81)	hsl(136, 15%, 34%)

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.

Aa11.09:1 Very good#CDD9CF on #241F27
Aa11.09:1 Very good#241F27 on #CDD9CF
Aa5.12:1 Good#241F27 on #AE878F
Aa5.12:1 Good#AE878F on #241F27
Aa4.46:1 Poor#CDD9CF on #4A6451
Aa4.46:1 Poor#4A6451 on #CDD9CF

Color blindness preview

CSS variables

/* Luna to June Ivy — https://swatchly.xyz/palette/cdd9cf-241f27-ae878f-4a6451 */
:root {
  --luna: #cdd9cf;
  --ink-black: #241f27;
  --punched-pink: #ae878f;
  --june-ivy: #4a6451;
}

Tailwind CSS v4

/* Luna to June Ivy — https://swatchly.xyz/palette/cdd9cf-241f27-ae878f-4a6451 */
@theme {
  --color-luna: #cdd9cf;
  --color-luna-50: #eff6f0;
  --color-luna-100: #e4ece5;
  --color-luna-200: #cdd9cf;
  --color-luna-300: #b8c2ba;
  --color-luna-400: #99a39a;
  --color-luna-500: #7e897f;
  --color-luna-600: #646e66;
  --color-luna-700: #4e5850;
  --color-luna-800: #3d453e;
  --color-luna-900: #2e352f;
  --color-luna-950: #1c211d;
  --color-ink-black: #241f27;
  --color-ink-black-50: #f7f3fa;
  --color-ink-black-100: #ede9f0;
  --color-ink-black-200: #dad5dd;
  --color-ink-black-300: #c4bec8;
  --color-ink-black-400: #a59fa9;
  --color-ink-black-500: #8a848e;
  --color-ink-black-600: #706a74;
  --color-ink-black-700: #59545d;
  --color-ink-black-800: #464249;
  --color-ink-black-900: #373339;
  --color-ink-black-950: #241f27;
  --color-punched-pink: #ae878f;
  --color-punched-pink-50: #fff4f6;
  --color-punched-pink-100: #ffeaee;
  --color-punched-pink-200: #f4d6db;
  --color-punched-pink-300: #e2c0c7;
  --color-punched-pink-400: #c7a1a9;
  --color-punched-pink-500: #ae878f;
  --color-punched-pink-600: #906a72;
  --color-punched-pink-700: #74525a;
  --color-punched-pink-800: #5c3f45;
  --color-punched-pink-900: #472e34;
  --color-punched-pink-950: #2d1b1f;
  --color-june-ivy: #4a6451;
  --color-june-ivy-50: #eafaee;
  --color-june-ivy-100: #def1e3;
  --color-june-ivy-200: #cadfcf;
  --color-june-ivy-300: #b3cbb9;
  --color-june-ivy-400: #93ae99;
  --color-june-ivy-500: #78937f;
  --color-june-ivy-600: #5f7a66;
  --color-june-ivy-700: #4a6451;
  --color-june-ivy-800: #394e3f;
  --color-june-ivy-900: #2a3d2f;
  --color-june-ivy-950: #19261c;
}