Cloud Break to Nightly Voyager Color Palette

About this palette

Cloud Break to Nightly Voyager is a 4-color palette: #F2F4FF (Cloud Break), #7DAD5D (Arugula), #2C6A21 (Enchanted Glen), #391935 (Nightly Voyager). It mixes white, green, purple tones and feels cool overall. The strongest text pairing is #F2F4FF on #391935 with a contrast ratio of 14.04:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cloud Break	rgb(242, 244, 255)	hsl(231, 100%, 97%)
Arugula	rgb(125, 173, 93)	hsl(96, 33%, 52%)
Enchanted Glen	rgb(44, 106, 33)	hsl(111, 53%, 27%)
Nightly Voyager	rgb(57, 25, 53)	hsl(308, 39%, 16%)

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.

Aa14.04:1 Super#F2F4FF on #391935
Aa14.04:1 Super#391935 on #F2F4FF
Aa6.00:1 Good#F2F4FF on #2C6A21
Aa6.00:1 Good#2C6A21 on #F2F4FF
Aa5.87:1 Good#7DAD5D on #391935
Aa5.87:1 Good#391935 on #7DAD5D

Color blindness preview

CSS variables

/* Cloud Break to Nightly Voyager — https://swatchly.xyz/palette/f2f4ff-7dad5d-2c6a21-391935 */
:root {
  --cloud-break: #f2f4ff;
  --arugula: #7dad5d;
  --enchanted-glen: #2c6a21;
  --nightly-voyager: #391935;
}

Tailwind CSS v4

/* Cloud Break to Nightly Voyager — https://swatchly.xyz/palette/f2f4ff-7dad5d-2c6a21-391935 */
@theme {
  --color-cloud-break: #f2f4ff;
  --color-cloud-break-50: #f2f4ff;
  --color-cloud-break-100: #e9eaf1;
  --color-cloud-break-200: #d5d7df;
  --color-cloud-break-300: #bec0c9;
  --color-cloud-break-400: #9fa1aa;
  --color-cloud-break-500: #84858f;
  --color-cloud-break-600: #696b74;
  --color-cloud-break-700: #53555d;
  --color-cloud-break-800: #414249;
  --color-cloud-break-900: #313239;
  --color-cloud-break-950: #1e1f23;
  --color-arugula: #7dad5d;
  --color-arugula-50: #e1fed0;
  --color-arugula-100: #d4f5c1;
  --color-arugula-200: #bce2a4;
  --color-arugula-300: #a1cc86;
  --color-arugula-400: #7dad5d;
  --color-arugula-500: #639243;
  --color-arugula-600: #4b7729;
  --color-arugula-700: #386016;
  --color-arugula-800: #294c08;
  --color-arugula-900: #1d3b02;
  --color-arugula-950: #102600;
  --color-enchanted-glen: #2c6a21;
  --color-enchanted-glen-50: #e2ffdd;
  --color-enchanted-glen-100: #d0f9c9;
  --color-enchanted-glen-200: #b8e8af;
  --color-enchanted-glen-300: #9dd494;
  --color-enchanted-glen-400: #7ab66f;
  --color-enchanted-glen-500: #5d9c52;
  --color-enchanted-glen-600: #448139;
  --color-enchanted-glen-700: #2c6a21;
  --color-enchanted-glen-800: #205317;
  --color-enchanted-glen-900: #14410c;
  --color-enchanted-glen-950: #092904;
  --color-nightly-voyager: #391935;
  --color-nightly-voyager-50: #fff0fc;
  --color-nightly-voyager-100: #fde2f8;
  --color-nightly-voyager-200: #eccce6;
  --color-nightly-voyager-300: #d8b4d1;
  --color-nightly-voyager-400: #ba93b3;
  --color-nightly-voyager-500: #a0799a;
  --color-nightly-voyager-600: #866180;
  --color-nightly-voyager-700: #6e4d69;
  --color-nightly-voyager-800: #5a3c56;
  --color-nightly-voyager-900: #4a2f46;
  --color-nightly-voyager-950: #391935;
}