Lavender
#F5DEFC
PinkColor Codes
All color formats for development
HEX
#F5DEFCRGB
rgb(245, 222, 252)HSL
hsl(286, 83%, 93%)OKLCH
oklch(0.928 0.047 318.3)CMYK
cmyk(3%, 12%, 0%, 1%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#E8B3F8
2#DB88F4
3#CD5CF0
4#C031EC
5#AB14D9
6#8910AE
7#670C82
8#440857
9#22042B
Tints
Lighter variations
1#F6E2FC
2#F7E5FD
3#F8E8FD
4#F9EBFD
5#FAEFFD
6#FBF2FE
7#FCF5FE
8#FDF8FE
9#FEFCFF
Tones
Muted variations
1#F4E0FA
2#F3E1F9
3#F3E3F8
4#F2E4F6
5#F1E6F5
6#F0E7F3
7#F0E9F2
8#EFEAF0
9#EEECEF
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | FBF1 #FBF1FE | BackgroundsSubtle highlightsCard backgrounds |
| 100 | F5DE #F5DEFC | Light backgroundsTable row hoverSkeleton loading |
| 200 | EDC2 #EDC2F9 | Secondary backgroundsInput backgroundsDividers |
| 300 | DE94 #DE94F5 | BordersInactive statesPlaceholder text |
| 400 | CD5C #CD5CF0 | Disabled statesSecondary iconsMuted text |
| 500 | BF2D #BF2DEB | Primary brand colorCTAsActive elementsLinks |
| 600 | A213 #A213CD | Hover statesFocus ringsPrimary buttons hover |
| 700 | 810F #810FA3 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 5C0B #5C0B75 | Text on light backgroundsHeadingsStrong borders |
| 900 | 3B07 #3B074B | Primary textHigh emphasis contentDark headings |
| 950 | 2504 #25042F | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--lavender-50: #FBF1FE;
--lavender-100: #F5DEFC;
--lavender-200: #EDC2F9;
--lavender-300: #DE94F5;
--lavender-400: #CD5CF0;
--lavender-500: #BF2DEB;
--lavender-600: #A213CD;
--lavender-700: #810FA3;
--lavender-800: #5C0B75;
--lavender-900: #3B074B;
--lavender-950: #25042F;
}