Steel Mist to Creole color palette

C3CDDESteel Mist A2ABBCLost in Time 97869FHatoba Pigeon 7D7E62Wreath 574F60Freefall 333126Creole

Open in generator Export PNG, PDF, ASE…

About this palette

Steel Mist to Creole is a 6-color muted palette: #C3CDDE (Steel Mist), #A2ABBC (Lost in Time), #97869F (Hatoba Pigeon), #7D7E62 (Wreath), #574F60 (Freefall), #333126 (Creole). It mixes gray, purple, yellow tones and feels balanced overall. The strongest text pairing is #C3CDDE on #333126 with a contrast ratio of 8.15:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Steel Mist	rgb(195, 205, 222)	hsl(218, 29%, 82%)
Lost in Time	rgb(162, 171, 188)	hsl(219, 16%, 69%)
Hatoba Pigeon	rgb(151, 134, 159)	hsl(281, 12%, 57%)
Wreath	rgb(125, 126, 98)	hsl(62, 12%, 44%)
Freefall	rgb(87, 79, 96)	hsl(268, 10%, 34%)
Creole	rgb(51, 49, 38)	hsl(51, 15%, 17%)

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.15:1 Very good#C3CDDE on #333126
Aa8.15:1 Very good#333126 on #C3CDDE
Aa5.65:1 Good#A2ABBC on #333126
Aa5.65:1 Good#333126 on #A2ABBC
Aa4.87:1 Good#C3CDDE on #574F60
Aa4.87:1 Good#574F60 on #C3CDDE
Aa3.87:1 Poor#97869F on #333126
Aa3.87:1 Poor#333126 on #97869F

Color blindness preview

CSS variables

/* Steel Mist to Creole — https://swatchly.xyz/palette/c3cdde-a2abbc-97869f-7d7e62-574f60-333126 */
:root {
  --steel-mist: #c3cdde;
  --lost-in-time: #a2abbc;
  --hatoba-pigeon: #97869f;
  --wreath: #7d7e62;
  --freefall: #574f60;
  --creole: #333126;
}

Tailwind CSS v4

/* Steel Mist to Creole — https://swatchly.xyz/palette/c3cdde-a2abbc-97869f-7d7e62-574f60-333126 */
@theme {
  --color-steel-mist: #c3cdde;
  --color-steel-mist-50: #e8eef8;
  --color-steel-mist-100: #dbe2ee;
  --color-steel-mist-200: #c3cdde;
  --color-steel-mist-300: #b0b8c7;
  --color-steel-mist-400: #929bab;
  --color-steel-mist-500: #788291;
  --color-steel-mist-600: #606978;
  --color-steel-mist-700: #4c5461;
  --color-steel-mist-800: #3c434e;
  --color-steel-mist-900: #2d333d;
  --color-steel-mist-950: #1b1f26;
  --color-lost-in-time: #a2abbc;
  --color-lost-in-time-50: #f5f8ff;
  --color-lost-in-time-100: #ebf0fb;
  --color-lost-in-time-200: #d7deeb;
  --color-lost-in-time-300: #c1c9d7;
  --color-lost-in-time-400: #a2abbc;
  --color-lost-in-time-500: #858e9e;
  --color-lost-in-time-600: #697281;
  --color-lost-in-time-700: #525a68;
  --color-lost-in-time-800: #3f4551;
  --color-lost-in-time-900: #2f343f;
  --color-lost-in-time-950: #1b1f27;
  --color-hatoba-pigeon: #97869f;
  --color-hatoba-pigeon-50: #fbf3ff;
  --color-hatoba-pigeon-100: #f4e9fa;
  --color-hatoba-pigeon-200: #e3d6e9;
  --color-hatoba-pigeon-300: #cfc0d6;
  --color-hatoba-pigeon-400: #b1a1b9;
  --color-hatoba-pigeon-500: #97869f;
  --color-hatoba-pigeon-600: #7b6a82;
  --color-hatoba-pigeon-700: #625369;
  --color-hatoba-pigeon-800: #4d4053;
  --color-hatoba-pigeon-900: #3b3040;
  --color-hatoba-pigeon-950: #251d28;
  --color-wreath: #7d7e62;
  --color-wreath-50: #f4f5e3;
  --color-wreath-100: #e8e9d5;
  --color-wreath-200: #d3d4bc;
  --color-wreath-300: #bbbca1;
  --color-wreath-400: #9a9b7f;
  --color-wreath-500: #7d7e62;
  --color-wreath-600: #65664b;
  --color-wreath-700: #505139;
  --color-wreath-800: #3f3f2b;
  --color-wreath-900: #313120;
  --color-wreath-950: #1f1f12;
  --color-freefall: #574f60;
  --color-freefall-50: #f8f3fe;
  --color-freefall-100: #eee8f5;
  --color-freefall-200: #dad4e3;
  --color-freefall-300: #c4bccd;
  --color-freefall-400: #a59cae;
  --color-freefall-500: #898093;
  --color-freefall-600: #6e6677;
  --color-freefall-700: #574f60;
  --color-freefall-800: #443d4b;
  --color-freefall-900: #342f3a;
  --color-freefall-950: #201c24;
  --color-creole: #333126;
  --color-creole-50: #f7f5ee;
  --color-creole-100: #edebe3;
  --color-creole-200: #dad8cd;
  --color-creole-300: #c3c1b6;
  --color-creole-400: #a4a195;
  --color-creole-500: #888679;
  --color-creole-600: #6d6b5f;
  --color-creole-700: #565449;
  --color-creole-800: #424137;
  --color-creole-900: #333126;
  --color-creole-950: #1f1e18;
}