Chill of the Night to Strawberry Latte color palette
326B8AChill of the Night19180ESoullessC4E2F6Salty Ice3C3F2AMadrasBB819APunched PinkD1AEB9Strawberry Latte
About this palette
Chill of the Night to Strawberry Latte is a 6-color muted palette: #326B8A (Chill of the Night), #19180E (Soulless), #C4E2F6 (Salty Ice), #3C3F2A (Madras), #BB819A (Punched Pink), #D1AEB9 (Strawberry Latte). It mixes blue, black, gray, pink tones and feels balanced overall. The strongest text pairing is #19180E on #C4E2F6 with a contrast ratio of 13.20:1, and 5 of its 15 color pairs pass WCAG AA for normal text.
Color codes
| Color | HEX | RGB | HSL |
|---|---|---|---|
| Chill of the Night | rgb(50, 107, 138) | hsl(201, 47%, 37%) | |
| Soulless | rgb(25, 24, 14) | hsl(55, 28%, 8%) | |
| Salty Ice | rgb(196, 226, 246) | hsl(204, 74%, 87%) | |
| Madras | rgb(60, 63, 42) | hsl(69, 20%, 21%) | |
| Punched Pink | rgb(187, 129, 154) | hsl(334, 30%, 62%) | |
| Strawberry Latte | rgb(209, 174, 185) | hsl(341, 28%, 75%) |
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.
- Aa13.20:1 #19180E on #C4E2F6
- Aa13.20:1 #C4E2F6 on #19180E
- Aa8.88:1 #19180E on #D1AEB9
- Aa8.88:1 #D1AEB9 on #19180E
- Aa8.03:1 #C4E2F6 on #3C3F2A
- Aa8.03:1 #3C3F2A on #C4E2F6
- Aa5.70:1 #19180E on #BB819A
- Aa5.70:1 #BB819A on #19180E
Color blindness preview
- Protanopia
- Deuteranopia
- Tritanopia
- Achromatopsia
- Dog vision
CSS variables
/* Chill of the Night to Strawberry Latte — https://swatchly.xyz/palette/326b8a-19180e-c4e2f6-3c3f2a-bb819a-d1aeb9 */
:root {
--chill-of-the-night: #326b8a;
--soulless: #19180e;
--salty-ice: #c4e2f6;
--madras: #3c3f2a;
--punched-pink: #bb819a;
--strawberry-latte: #d1aeb9;
}
Tailwind CSS v4
/* Chill of the Night to Strawberry Latte — https://swatchly.xyz/palette/326b8a-19180e-c4e2f6-3c3f2a-bb819a-d1aeb9 */
@theme {
--color-chill-of-the-night: #326b8a;
--color-chill-of-the-night-50: #ebf7ff;
--color-chill-of-the-night-100: #d3eeff;
--color-chill-of-the-night-200: #b0dcf6;
--color-chill-of-the-night-300: #92c4e2;
--color-chill-of-the-night-400: #6da4c4;
--color-chill-of-the-night-500: #4e87a7;
--color-chill-of-the-night-600: #326b8a;
--color-chill-of-the-night-700: #225570;
--color-chill-of-the-night-800: #15435a;
--color-chill-of-the-night-900: #0c3447;
--color-chill-of-the-night-950: #05202e;
--color-soulless: #19180e;
--color-soulless-50: #f6f6ee;
--color-soulless-100: #ecece3;
--color-soulless-200: #d9d8ce;
--color-soulless-300: #c2c2b6;
--color-soulless-400: #a3a296;
--color-soulless-500: #868579;
--color-soulless-600: #6a695d;
--color-soulless-700: #525147;
--color-soulless-800: #3e3d34;
--color-soulless-900: #2d2c25;
--color-soulless-950: #19180e;
--color-salty-ice: #c4e2f6;
--color-salty-ice-50: #f3faff;
--color-salty-ice-100: #e1f3ff;
--color-salty-ice-200: #c4e2f6;
--color-salty-ice-300: #b1c9da;
--color-salty-ice-400: #8ea9bb;
--color-salty-ice-500: #718d9f;
--color-salty-ice-600: #577183;
--color-salty-ice-700: #415a69;
--color-salty-ice-800: #304553;
--color-salty-ice-900: #233541;
--color-salty-ice-950: #142129;
--color-madras: #3c3f2a;
--color-madras-50: #f4f7e9;
--color-madras-100: #eaeddd;
--color-madras-200: #d7dac7;
--color-madras-300: #bfc2ad;
--color-madras-400: #9ea28b;
--color-madras-500: #82866e;
--color-madras-600: #676a54;
--color-madras-700: #50533f;
--color-madras-800: #3c3f2a;
--color-madras-900: #2e3022;
--color-madras-950: #1c1d13;
--color-punched-pink: #bb819a;
--color-punched-pink-50: #ffeaf2;
--color-punched-pink-100: #ffd8e8;
--color-punched-pink-200: #f0bfd3;
--color-punched-pink-300: #daa4bb;
--color-punched-pink-400: #bb819a;
--color-punched-pink-500: #a06881;
--color-punched-pink-600: #855169;
--color-punched-pink-700: #6d3f54;
--color-punched-pink-800: #583042;
--color-punched-pink-900: #472434;
--color-punched-pink-950: #2f1621;
--color-strawberry-latte: #d1aeb9;
--color-strawberry-latte-50: #ffebf1;
--color-strawberry-latte-100: #f6dee6;
--color-strawberry-latte-200: #e4c8d1;
--color-strawberry-latte-300: #d1aeb9;
--color-strawberry-latte-400: #b2919b;
--color-strawberry-latte-500: #977781;
--color-strawberry-latte-600: #7d5e68;
--color-strawberry-latte-700: #654a53;
--color-strawberry-latte-800: #513941;
--color-strawberry-latte-900: #402c33;
--color-strawberry-latte-950: #291a1f;
}
Similar palettes
- F0DBDED9B5B5789DC04F6D933C4735161A15Homoeopathic Red to Twilight Zone
- E2F1EDABB7D698838F4E776C3C424E1E1A12Bone-Chilling to Noir Mystique
- 3D3F28476B7C9B7987C0A1ABB9D5E9Madras to Delicate Ice
- 1A17123343586C5877D8E4FBB9A4BE789878Twilight Zone to Money
- C8D6EAB2B7CCAC8DA656604947354424251DSnowy Summit to Underworld
- 6F6E591C232BB49FB7413E31C9DAEDSecret Path to Snowy Summit
- 1C2710484D2D4C7BA7DA9AA6D0EBFFMidnight Pines to Veiling Waterfalls
- 1D1F28364234859887BBA19AF4E2DE595D72Inkwell Inception to Concrete Landscape