Lavender
#F7BDFF
PinkColor Codes
All color formats for development
HEX
#F7BDFFRGB
rgb(247, 189, 255)HSL
hsl(293, 100%, 87%)OKLCH
oklch(0.871 0.108 322.3)CMYK
cmyk(3%, 26%, 0%, 0%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#F290FF
2#ED64FF
3#E838FF
4#E30BFF
5#C400DE
6#9D00B1
7#760085
8#4E0059
9#27002C
Tints
Lighter variations
1#F8C3FF
2#F9CAFF
3#FAD1FF
4#FAD7FF
5#FBDEFF
6#FCE4FF
7#FDEBFF
8#FDF2FF
9#FEF8FF
Tones
Muted variations
1#F5C0FC
2#F2C3F8
3#F0C7F5
4#EDCAF2
5#EBCDEE
6#E8D1EB
7#E5D4E8
8#E3D7E4
9#E0DBE1
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | FDF0 #FDF0FF | BackgroundsSubtle highlightsCard backgrounds |
| 100 | FBDB #FBDBFF | Light backgroundsTable row hoverSkeleton loading |
| 200 | F7BD #F7BDFF | Secondary backgroundsInput backgroundsDividers |
| 300 | F18A #F18AFF | BordersInactive statesPlaceholder text |
| 400 | EA4D #EA4DFF | Disabled statesSecondary iconsMuted text |
| 500 | E41A #E41AFF | Primary brand colorCTAsActive elementsLinks |
| 600 | C600 #C600E0 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 9E00 #9E00B3 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 7100 #710080 | Text on light backgroundsHeadingsStrong borders |
| 900 | 4800 #480052 | Primary textHigh emphasis contentDark headings |
| 950 | 2D00 #2D0033 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--lavender-50: #FDF0FF;
--lavender-100: #FBDBFF;
--lavender-200: #F7BDFF;
--lavender-300: #F18AFF;
--lavender-400: #EA4DFF;
--lavender-500: #E41AFF;
--lavender-600: #C600E0;
--lavender-700: #9E00B3;
--lavender-800: #710080;
--lavender-900: #480052;
--lavender-950: #2D0033;
}