Shallow Sea to June Ivy Color Palette

About this palette

Shallow Sea to June Ivy is a 5-color muted palette: #A0B8C4 (Shallow Sea), #CFE7E3 (Ice Dagger), #27362E (Aztec), #608680 (Aloe Vera), #466351 (June Ivy). It mixes gray, turquoise, green tones and feels cool overall. The strongest text pairing is #CFE7E3 on #27362E with a contrast ratio of 9.79:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Shallow Sea	rgb(160, 184, 196)	hsl(200, 23%, 70%)
Ice Dagger	rgb(207, 231, 227)	hsl(170, 33%, 86%)
Aztec	rgb(39, 54, 46)	hsl(148, 16%, 18%)
Aloe Vera	rgb(96, 134, 128)	hsl(171, 17%, 45%)
June Ivy	rgb(70, 99, 81)	hsl(143, 17%, 33%)

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.79:1 Very good#CFE7E3 on #27362E
Aa9.79:1 Very good#27362E on #CFE7E3
Aa6.14:1 Good#A0B8C4 on #27362E
Aa6.14:1 Good#27362E on #A0B8C4
Aa5.12:1 Good#CFE7E3 on #466351
Aa5.12:1 Good#466351 on #CFE7E3
Aa3.21:1 Poor#A0B8C4 on #466351
Aa3.21:1 Poor#466351 on #A0B8C4

Color blindness preview

CSS variables

/* Shallow Sea to June Ivy — https://swatchly.xyz/palette/a0b8c4-cfe7e3-27362e-608680-466351 */
:root {
  --shallow-sea: #a0b8c4;
  --ice-dagger: #cfe7e3;
  --aztec: #27362e;
  --aloe-vera: #608680;
  --june-ivy: #466351;
}

Tailwind CSS v4

/* Shallow Sea to June Ivy — https://swatchly.xyz/palette/a0b8c4-cfe7e3-27362e-608680-466351 */
@theme {
  --color-shallow-sea: #a0b8c4;
  --color-shallow-sea-50: #e2f1f8;
  --color-shallow-sea-100: #d4e5ee;
  --color-shallow-sea-200: #bcd0da;
  --color-shallow-sea-300: #a0b8c4;
  --color-shallow-sea-400: #849ba6;
  --color-shallow-sea-500: #6b828d;
  --color-shallow-sea-600: #546a74;
  --color-shallow-sea-700: #41555e;
  --color-shallow-sea-800: #32434c;
  --color-shallow-sea-900: #27353c;
  --color-shallow-sea-950: #162126;
  --color-ice-dagger: #cfe7e3;
  --color-ice-dagger-50: #f3fffd;
  --color-ice-dagger-100: #e9f7f4;
  --color-ice-dagger-200: #cfe7e3;
  --color-ice-dagger-300: #bacdca;
  --color-ice-dagger-400: #97ada9;
  --color-ice-dagger-500: #7a908c;
  --color-ice-dagger-600: #5e7470;
  --color-ice-dagger-700: #485b58;
  --color-ice-dagger-800: #364644;
  --color-ice-dagger-900: #283634;
  --color-ice-dagger-950: #172220;
  --color-aztec: #27362e;
  --color-aztec-50: #eef8f2;
  --color-aztec-100: #e3eee8;
  --color-aztec-200: #cedbd4;
  --color-aztec-300: #b6c5bd;
  --color-aztec-400: #95a69d;
  --color-aztec-500: #798b81;
  --color-aztec-600: #607067;
  --color-aztec-700: #4a5951;
  --color-aztec-800: #38453e;
  --color-aztec-900: #27362e;
  --color-aztec-950: #19211c;
  --color-aloe-vera: #608680;
  --color-aloe-vera-50: #e2f9f5;
  --color-aloe-vera-100: #d4eeea;
  --color-aloe-vera-200: #bbdad5;
  --color-aloe-vera-300: #a0c3bd;
  --color-aloe-vera-400: #7da39d;
  --color-aloe-vera-500: #608680;
  --color-aloe-vera-600: #496d67;
  --color-aloe-vera-700: #365752;
  --color-aloe-vera-800: #284540;
  --color-aloe-vera-900: #1d3632;
  --color-aloe-vera-950: #10221f;
  --color-june-ivy: #466351;
  --color-june-ivy-50: #e8faef;
  --color-june-ivy-100: #ddf1e4;
  --color-june-ivy-200: #c8e0d0;
  --color-june-ivy-300: #b0cbb9;
  --color-june-ivy-400: #90ad9a;
  --color-june-ivy-500: #759380;
  --color-june-ivy-600: #5c7966;
  --color-june-ivy-700: #466351;
  --color-june-ivy-800: #354e3f;
  --color-june-ivy-900: #273c2f;
  --color-june-ivy-950: #17261d;
}