Fedora to Continental Waters color palette

5C596CFedora AAAC96Quiet Thicket 1F3C3FRoyal Neptune E9C0B9Rosewood Dreams 87819CMecha Metal 9DC7CBContinental Waters

Open in generator Export PNG, PDF, ASE…

About this palette

Fedora to Continental Waters is a 6-color muted palette: #5C596C (Fedora), #AAAC96 (Quiet Thicket), #1F3C3F (Royal Neptune), #E9C0B9 (Rosewood Dreams), #87819C (Mecha Metal), #9DC7CB (Continental Waters). It mixes gray, turquoise, pink, purple tones and feels cool overall. The strongest text pairing is #1F3C3F on #E9C0B9 with a contrast ratio of 7.15:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Fedora	rgb(92, 89, 108)	hsl(249, 10%, 39%)
Quiet Thicket	rgb(170, 172, 150)	hsl(65, 12%, 63%)
Royal Neptune	rgb(31, 60, 63)	hsl(186, 34%, 18%)
Rosewood Dreams	rgb(233, 192, 185)	hsl(9, 52%, 82%)
Mecha Metal	rgb(135, 129, 156)	hsl(253, 12%, 56%)
Continental Waters	rgb(157, 199, 203)	hsl(185, 31%, 71%)

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.15:1 Very good#1F3C3F on #E9C0B9
Aa7.15:1 Very good#E9C0B9 on #1F3C3F
Aa6.45:1 Good#1F3C3F on #9DC7CB
Aa6.45:1 Good#9DC7CB on #1F3C3F
Aa5.09:1 Good#AAAC96 on #1F3C3F
Aa5.09:1 Good#1F3C3F on #AAAC96
Aa4.10:1 Poor#5C596C on #E9C0B9
Aa4.10:1 Poor#E9C0B9 on #5C596C

Color blindness preview

CSS variables

/* Fedora to Continental Waters — https://swatchly.xyz/palette/5c596c-aaac96-1f3c3f-e9c0b9-87819c-9dc7cb */
:root {
  --fedora: #5c596c;
  --quiet-thicket: #aaac96;
  --royal-neptune: #1f3c3f;
  --rosewood-dreams: #e9c0b9;
  --mecha-metal: #87819c;
  --continental-waters: #9dc7cb;
}

Tailwind CSS v4

/* Fedora to Continental Waters — https://swatchly.xyz/palette/5c596c-aaac96-1f3c3f-e9c0b9-87819c-9dc7cb */
@theme {
  --color-fedora: #5c596c;
  --color-fedora-50: #f5f3ff;
  --color-fedora-100: #ebe9f7;
  --color-fedora-200: #d9d6e7;
  --color-fedora-300: #c3c1d3;
  --color-fedora-400: #a5a2b6;
  --color-fedora-500: #8b889c;
  --color-fedora-600: #726f82;
  --color-fedora-700: #5c596c;
  --color-fedora-800: #484555;
  --color-fedora-900: #373542;
  --color-fedora-950: #22212a;
  --color-quiet-thicket: #aaac96;
  --color-quiet-thicket-50: #f8f9ed;
  --color-quiet-thicket-100: #f0f1e3;
  --color-quiet-thicket-200: #dddfcf;
  --color-quiet-thicket-300: #c8cab7;
  --color-quiet-thicket-400: #aaac96;
  --color-quiet-thicket-500: #8d8f7a;
  --color-quiet-thicket-600: #71735f;
  --color-quiet-thicket-700: #595b48;
  --color-quiet-thicket-800: #454636;
  --color-quiet-thicket-900: #343528;
  --color-quiet-thicket-950: #1f2016;
  --color-royal-neptune: #1f3c3f;
  --color-royal-neptune-50: #e7f9fb;
  --color-royal-neptune-100: #dbf0f2;
  --color-royal-neptune-200: #c5dddf;
  --color-royal-neptune-300: #abc7ca;
  --color-royal-neptune-400: #8aa9ac;
  --color-royal-neptune-500: #6f8e91;
  --color-royal-neptune-600: #567477;
  --color-royal-neptune-700: #425e61;
  --color-royal-neptune-800: #324b4d;
  --color-royal-neptune-900: #1f3c3f;
  --color-royal-neptune-950: #162527;
  --color-rosewood-dreams: #e9c0b9;
  --color-rosewood-dreams-50: #fff9f8;
  --color-rosewood-dreams-100: #ffeeeb;
  --color-rosewood-dreams-200: #f6d8d3;
  --color-rosewood-dreams-300: #e9c0b9;
  --color-rosewood-dreams-400: #c5a099;
  --color-rosewood-dreams-500: #a8827c;
  --color-rosewood-dreams-600: #8a6660;
  --color-rosewood-dreams-700: #6f4f49;
  --color-rosewood-dreams-800: #583c37;
  --color-rosewood-dreams-900: #432c28;
  --color-rosewood-dreams-950: #2b1a18;
  --color-mecha-metal: #87819c;
  --color-mecha-metal-50: #f5f3ff;
  --color-mecha-metal-100: #ece8fb;
  --color-mecha-metal-200: #d8d4ea;
  --color-mecha-metal-300: #c2bcd5;
  --color-mecha-metal-400: #a29db7;
  --color-mecha-metal-500: #87819c;
  --color-mecha-metal-600: #6d6780;
  --color-mecha-metal-700: #565168;
  --color-mecha-metal-800: #433f53;
  --color-mecha-metal-900: #343041;
  --color-mecha-metal-950: #201d29;
  --color-continental-waters: #9dc7cb;
  --color-continental-waters-50: #e1f9fb;
  --color-continental-waters-100: #d4eff2;
  --color-continental-waters-200: #bcdcdf;
  --color-continental-waters-300: #9dc7cb;
  --color-continental-waters-400: #80a8ab;
  --color-continental-waters-500: #648d90;
  --color-continental-waters-600: #4c7276;
  --color-continental-waters-700: #385b5f;
  --color-continental-waters-800: #29484b;
  --color-continental-waters-900: #1d383a;
  --color-continental-waters-950: #0f2325;
}