Lavender
#F3DDFD
PurpleColor Codes
All color formats for development
HEX
#F3DDFDRGB
rgb(243, 221, 253)HSL
hsl(281, 89%, 93%)OKLCH
oklch(0.925 0.049 315.4)CMYK
cmyk(4%, 13%, 0%, 1%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#E3B0FA
2#D384F8
3#C357F5
4#B32AF3
5#9D0DE0
6#7E0AB3
7#5E0886
8#3F055A
9#1F032D
Tints
Lighter variations
1#F4E1FD
2#F5E4FD
3#F7E7FE
4#F8EBFE
5#F9EEFE
6#FAF2FE
7#FBF5FE
8#FDF8FF
9#FEFCFF
Tones
Muted variations
1#F2DFFB
2#F2E0FA
3#F1E2F8
4#F1E4F7
5#F0E5F5
6#EFE7F4
7#EFE8F2
8#EEEAF0
9#EEECEF
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | FAF1 #FAF1FE | BackgroundsSubtle highlightsCard backgrounds |
| 100 | F3DD #F3DDFD | Light backgroundsTable row hoverSkeleton loading |
| 200 | E9C0 #E9C0FB | Secondary backgroundsInput backgroundsDividers |
| 300 | D790 #D790F9 | BordersInactive statesPlaceholder text |
| 400 | C356 #C356F5 | Disabled statesSecondary iconsMuted text |
| 500 | B226 #B226F2 | Primary brand colorCTAsActive elementsLinks |
| 600 | 950C #950CD4 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 760A #760AA9 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 5507 #550778 | Text on light backgroundsHeadingsStrong borders |
| 900 | 3604 #36044D | Primary textHigh emphasis contentDark headings |
| 950 | 2203 #220330 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--lavender-50: #FAF1FE;
--lavender-100: #F3DDFD;
--lavender-200: #E9C0FB;
--lavender-300: #D790F9;
--lavender-400: #C356F5;
--lavender-500: #B226F2;
--lavender-600: #950CD4;
--lavender-700: #760AA9;
--lavender-800: #550778;
--lavender-900: #36044D;
--lavender-950: #220330;
}