Lilac
Whimsical and airy — lilac captures the fleeting beauty of spring blossoms.
50
100
200
300
400
500
600
700
800
All Lilac Shades
Click any shade to copy the hex code instantly.
Usage in Code
CSS Variables
:root {
--lilac-50: #fdf8fd;
--lilac-100: #f8edf8;
--lilac-200: #f0dbf0;
--lilac-300: #dfc3df;
--lilac-400: #c8a2c8;
--lilac-500: #b07db0;
--lilac-600: #8e5a8e;
--lilac-700: #6b406b;
--lilac-800: #4a2b4a;
--lilac-900: #2c192c;
--lilac-950: #160c16;
} Tailwind Config
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
lilac: {
50: '#fdf8fd',
100: '#f8edf8',
200: '#f0dbf0',
300: '#dfc3df',
400: '#c8a2c8',
500: '#b07db0',
600: '#8e5a8e',
700: '#6b406b',
800: '#4a2b4a',
900: '#2c192c',
950: '#160c16',
},
},
},
},
}; SCSS Map
$lilac-palette: (
50: #fdf8fd,
100: #f8edf8,
200: #f0dbf0,
300: #dfc3df,
400: #c8a2c8,
500: #b07db0,
600: #8e5a8e,
700: #6b406b,
800: #4a2b4a,
900: #2c192c,
950: #160c16,
);