Indian Silk to New Heights color palette

About this palette

Indian Silk to New Heights is a 4-color muted palette: #945E69 (Indian Silk), #3A401D (Forestry), #98AEBD (Lost in Time), #D3E3F2 (New Heights). It mixes red, green, gray tones and feels balanced overall. The strongest text pairing is #3A401D on #D3E3F2 with a contrast ratio of 8.31:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Indian Silkrgb(148, 94, 105)hsl(348, 22%, 47%)
Forestryrgb(58, 64, 29)hsl(70, 38%, 18%)
Lost in Timergb(152, 174, 189)hsl(204, 22%, 67%)
New Heightsrgb(211, 227, 242)hsl(209, 54%, 89%)

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.

  • Aa8.31:1 Very good#3A401D on #D3E3F2
  • Aa8.31:1 Very good#D3E3F2 on #3A401D
  • Aa4.73:1 Good#3A401D on #98AEBD
  • Aa4.73:1 Good#98AEBD on #3A401D
  • Aa3.95:1 Poor#945E69 on #D3E3F2
  • Aa3.95:1 Poor#D3E3F2 on #945E69

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Indian Silk to New Heights — https://swatchly.xyz/palette/945e69-3a401d-98aebd-d3e3f2 */
:root {
  --indian-silk: #945e69;
  --forestry: #3a401d;
  --lost-in-time: #98aebd;
  --new-heights: #d3e3f2;
}

Tailwind CSS v4

/* Indian Silk to New Heights — https://swatchly.xyz/palette/945e69-3a401d-98aebd-d3e3f2 */
@theme {
  --color-indian-silk: #945e69;
  --color-indian-silk-50: #fff1f3;
  --color-indian-silk-100: #ffe4e9;
  --color-indian-silk-200: #f9cbd3;
  --color-indian-silk-300: #e7b3bd;
  --color-indian-silk-400: #cb939d;
  --color-indian-silk-500: #b07883;
  --color-indian-silk-600: #945e69;
  --color-indian-silk-700: #794852;
  --color-indian-silk-800: #61363f;
  --color-indian-silk-900: #4c2830;
  --color-indian-silk-950: #31171d;
  --color-forestry: #3a401d;
  --color-forestry-50: #f3f8e2;
  --color-forestry-100: #e9efd5;
  --color-forestry-200: #d5dcbe;
  --color-forestry-300: #bdc4a2;
  --color-forestry-400: #9ca47f;
  --color-forestry-500: #808762;
  --color-forestry-600: #656c48;
  --color-forestry-700: #4e5434;
  --color-forestry-800: #3a401d;
  --color-forestry-900: #2c311a;
  --color-forestry-950: #1a1d0d;
  --color-lost-in-time: #98aebd;
  --color-lost-in-time-50: #f2faff;
  --color-lost-in-time-100: #e5f2fc;
  --color-lost-in-time-200: #d0e0ec;
  --color-lost-in-time-300: #b9ccd8;
  --color-lost-in-time-400: #98aebd;
  --color-lost-in-time-500: #7c919f;
  --color-lost-in-time-600: #607582;
  --color-lost-in-time-700: #495c69;
  --color-lost-in-time-800: #374752;
  --color-lost-in-time-900: #28363f;
  --color-lost-in-time-950: #172127;
  --color-new-heights: #d3e3f2;
  --color-new-heights-50: #f8fcff;
  --color-new-heights-100: #ebf4fd;
  --color-new-heights-200: #d3e3f2;
  --color-new-heights-300: #bdcad6;
  --color-new-heights-400: #9ba9b7;
  --color-new-heights-500: #7e8c9a;
  --color-new-heights-600: #62707d;
  --color-new-heights-700: #4c5864;
  --color-new-heights-800: #39444e;
  --color-new-heights-900: #2b343d;
  --color-new-heights-950: #192026;
}

Similar palettes