Atlantis to French Oak color palette

3C5D74Atlantis E0C1D3Matt Lilac 84657FSunshone Plum 1F2924Bitter Liquorice B89B7AFrench Oak

About this palette

Atlantis to French Oak is a 5-color muted, warm, vintage palette: #3C5D74 (Atlantis), #E0C1D3 (Matt Lilac), #84657F (Sunshone Plum), #1F2924 (Bitter Liquorice), #B89B7A (French Oak). It mixes blue, pink, gray, orange tones and feels warm overall. The strongest text pairing is #E0C1D3 on #1F2924 with a contrast ratio of 9.09:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Atlantis	rgb(60, 93, 116)	hsl(205, 32%, 35%)
Matt Lilac	rgb(224, 193, 211)	hsl(325, 33%, 82%)
Sunshone Plum	rgb(132, 101, 127)	hsl(310, 13%, 46%)
Bitter Liquorice	rgb(31, 41, 36)	hsl(150, 14%, 14%)
French Oak	rgb(184, 155, 122)	hsl(32, 30%, 60%)

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.09:1 Very good#E0C1D3 on #1F2924
Aa9.09:1 Very good#1F2924 on #E0C1D3
Aa5.72:1 Good#1F2924 on #B89B7A
Aa5.72:1 Good#B89B7A on #1F2924
Aa4.23:1 Poor#3C5D74 on #E0C1D3
Aa4.23:1 Poor#E0C1D3 on #3C5D74
Aa3.07:1 Poor#E0C1D3 on #84657F
Aa3.07:1 Poor#84657F on #E0C1D3

Color blindness preview

CSS variables

/* Atlantis to French Oak — https://swatchly.xyz/palette/3c5d74-e0c1d3-84657f-1f2924-b89b7a */
:root {
  --atlantis: #3c5d74;
  --matt-lilac: #e0c1d3;
  --sunshone-plum: #84657f;
  --bitter-liquorice: #1f2924;
  --french-oak: #b89b7a;
}

Tailwind CSS v4

/* Atlantis to French Oak — https://swatchly.xyz/palette/3c5d74-e0c1d3-84657f-1f2924-b89b7a */
@theme {
  --color-atlantis: #3c5d74;
  --color-atlantis-50: #ecf7ff;
  --color-atlantis-100: #d9efff;
  --color-atlantis-200: #c1dcf0;
  --color-atlantis-300: #a8c7dd;
  --color-atlantis-400: #87a8c1;
  --color-atlantis-500: #6b8ea6;
  --color-atlantis-600: #52738b;
  --color-atlantis-700: #3c5d74;
  --color-atlantis-800: #2e495b;
  --color-atlantis-900: #213848;
  --color-atlantis-950: #12232e;
  --color-matt-lilac: #e0c1d3;
  --color-matt-lilac-50: #fff8fc;
  --color-matt-lilac-100: #ffecf7;
  --color-matt-lilac-200: #efd9e6;
  --color-matt-lilac-300: #e0c1d3;
  --color-matt-lilac-400: #bda0b1;
  --color-matt-lilac-500: #a08394;
  --color-matt-lilac-600: #826777;
  --color-matt-lilac-700: #68505e;
  --color-matt-lilac-800: #523c49;
  --color-matt-lilac-900: #3e2d37;
  --color-matt-lilac-950: #271b22;
  --color-sunshone-plum: #84657f;
  --color-sunshone-plum-50: #fff0fc;
  --color-sunshone-plum-100: #fae4f6;
  --color-sunshone-plum-200: #ead0e5;
  --color-sunshone-plum-300: #d6b9d1;
  --color-sunshone-plum-400: #b999b4;
  --color-sunshone-plum-500: #9f7e99;
  --color-sunshone-plum-600: #84657f;
  --color-sunshone-plum-700: #6a4f66;
  --color-sunshone-plum-800: #543c51;
  --color-sunshone-plum-900: #422d3e;
  --color-sunshone-plum-950: #2a1b27;
  --color-bitter-liquorice: #1f2924;
  --color-bitter-liquorice-50: #f0f7f3;
  --color-bitter-liquorice-100: #e5ede9;
  --color-bitter-liquorice-200: #d1dad5;
  --color-bitter-liquorice-300: #b9c4be;
  --color-bitter-liquorice-400: #99a59f;
  --color-bitter-liquorice-500: #7f8b85;
  --color-bitter-liquorice-600: #66726c;
  --color-bitter-liquorice-700: #525c57;
  --color-bitter-liquorice-800: #414a45;
  --color-bitter-liquorice-900: #333b37;
  --color-bitter-liquorice-950: #1f2924;
  --color-french-oak: #b89b7a;
  --color-french-oak-50: #fff3e5;
  --color-french-oak-100: #fbe7d2;
  --color-french-oak-200: #ead3b9;
  --color-french-oak-300: #d5bb9e;
  --color-french-oak-400: #b89b7a;
  --color-french-oak-500: #9c8060;
  --color-french-oak-600: #806647;
  --color-french-oak-700: #685034;
  --color-french-oak-800: #533e25;
  --color-french-oak-900: #412f1a;
  --color-french-oak-950: #291c0d;
}