Intergalactic to Submerged color palette

4A536BIntergalactic C0C2D4Plein Air 493A36Film Noir ABA68ASage the Day D3F2F5Let It Snow 507D80Submerged

Open in generator Export PNG, PDF, ASE…

About this palette

Intergalactic to Submerged is a 6-color muted palette: #4A536B (Intergalactic), #C0C2D4 (Plein Air), #493A36 (Film Noir), #ABA68A (Sage the Day), #D3F2F5 (Let It Snow), #507D80 (Submerged). It mixes blue, gray, yellow, white, turquoise tones and feels cool overall. The strongest text pairing is #493A36 on #D3F2F5 with a contrast ratio of 9.16:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Intergalactic	rgb(74, 83, 107)	hsl(224, 18%, 35%)
Plein Air	rgb(192, 194, 212)	hsl(234, 19%, 79%)
Film Noir	rgb(73, 58, 54)	hsl(13, 15%, 25%)
Sage the Day	rgb(171, 166, 138)	hsl(51, 16%, 61%)
Let It Snow	rgb(211, 242, 245)	hsl(185, 63%, 89%)
Submerged	rgb(80, 125, 128)	hsl(184, 23%, 41%)

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.16:1 Very good#493A36 on #D3F2F5
Aa9.16:1 Very good#D3F2F5 on #493A36
Aa6.49:1 Good#4A536B on #D3F2F5
Aa6.49:1 Good#D3F2F5 on #4A536B
Aa6.13:1 Good#C0C2D4 on #493A36
Aa6.13:1 Good#493A36 on #C0C2D4
Aa4.40:1 Poor#493A36 on #ABA68A
Aa4.40:1 Poor#ABA68A on #493A36

Color blindness preview

CSS variables

/* Intergalactic to Submerged — https://swatchly.xyz/palette/4a536b-c0c2d4-493a36-aba68a-d3f2f5-507d80 */
:root {
  --intergalactic: #4a536b;
  --plein-air: #c0c2d4;
  --film-noir: #493a36;
  --sage-the-day: #aba68a;
  --let-it-snow: #d3f2f5;
  --submerged: #507d80;
}

Tailwind CSS v4

/* Intergalactic to Submerged — https://swatchly.xyz/palette/4a536b-c0c2d4-493a36-aba68a-d3f2f5-507d80 */
@theme {
  --color-intergalactic: #4a536b;
  --color-intergalactic-50: #f1f5ff;
  --color-intergalactic-100: #e4ebfd;
  --color-intergalactic-200: #cfd7ec;
  --color-intergalactic-300: #b7c0d8;
  --color-intergalactic-400: #96a0ba;
  --color-intergalactic-500: #7b849f;
  --color-intergalactic-600: #606a82;
  --color-intergalactic-700: #4a536b;
  --color-intergalactic-800: #394154;
  --color-intergalactic-900: #2b3142;
  --color-intergalactic-950: #1a1e2a;
  --color-plein-air: #c0c2d4;
  --color-plein-air-50: #f5f6ff;
  --color-plein-air-100: #ebecf7;
  --color-plein-air-200: #d7d9e6;
  --color-plein-air-300: #c0c2d4;
  --color-plein-air-400: #a0a2b3;
  --color-plein-air-500: #858697;
  --color-plein-air-600: #6a6c7c;
  --color-plein-air-700: #535563;
  --color-plein-air-800: #40424e;
  --color-plein-air-900: #31323c;
  --color-plein-air-950: #1e1f26;
  --color-film-noir: #493a36;
  --color-film-noir-50: #fdf2f0;
  --color-film-noir-100: #f4e8e5;
  --color-film-noir-200: #e2d4d0;
  --color-film-noir-300: #ccbcb8;
  --color-film-noir-400: #ad9b97;
  --color-film-noir-500: #917f7b;
  --color-film-noir-600: #756460;
  --color-film-noir-700: #5c4e4a;
  --color-film-noir-800: #493a36;
  --color-film-noir-900: #372d2a;
  --color-film-noir-950: #221b19;
  --color-sage-the-day: #aba68a;
  --color-sage-the-day-50: #faf7e7;
  --color-sage-the-day-100: #f1eedc;
  --color-sage-the-day-200: #dedbc6;
  --color-sage-the-day-300: #c9c5ad;
  --color-sage-the-day-400: #aba68a;
  --color-sage-the-day-500: #8f8a6f;
  --color-sage-the-day-600: #736f55;
  --color-sage-the-day-700: #5c5740;
  --color-sage-the-day-800: #48442f;
  --color-sage-the-day-900: #373422;
  --color-sage-the-day-950: #222013;
  --color-let-it-snow: #d3f2f5;
  --color-let-it-snow-50: #e8f9fa;
  --color-let-it-snow-100: #d3f2f5;
  --color-let-it-snow-200: #c6dcdf;
  --color-let-it-snow-300: #adc7c9;
  --color-let-it-snow-400: #8ca8aa;
  --color-let-it-snow-500: #708c8f;
  --color-let-it-snow-600: #567274;
  --color-let-it-snow-700: #425a5d;
  --color-let-it-snow-800: #314749;
  --color-let-it-snow-900: #243738;
  --color-let-it-snow-950: #152223;
  --color-submerged: #507d80;
  --color-submerged-50: #e1fbfd;
  --color-submerged-100: #d7f3f5;
  --color-submerged-200: #c0e2e4;
  --color-submerged-300: #a7ced0;
  --color-submerged-400: #85b1b4;
  --color-submerged-500: #69979a;
  --color-submerged-600: #507d80;
  --color-submerged-700: #3a6467;
  --color-submerged-800: #294e51;
  --color-submerged-900: #1c3c3f;
  --color-submerged-950: #0e2627;
}