Orchid
#FD4EE0
PinkColor Codes
All color formats for development
HEX
#FD4EE0RGB
rgb(253, 78, 224)HSL
hsl(310, 98%, 65%)OKLCH
oklch(0.716 0.257 335.4)CMYK
cmyk(0%, 69%, 11%, 1%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#FD2DDA
2#FD0DD5
3#E602C0
4#C502A4
5#A40289
6#83016E
7#620152
8#420137
9#21001B
Tints
Lighter variations
1#FD60E3
2#FE72E6
3#FE83E9
4#FE95EC
5#FEA7F0
6#FEB8F3
7#FECAF6
8#FFDCF9
9#FFEDFC
Tones
Muted variations
1#F457DA
2#EC60D4
3#E369CF
4#DA71C9
5#D17AC3
6#C983BD
7#C08CB7
8#B794B1
9#AE9DAC
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | FFF0 #FFF0FC | BackgroundsSubtle highlightsCard backgrounds |
| 100 | FFDC #FFDCF9 | Light backgroundsTable row hoverSkeleton loading |
| 200 | FEBD #FEBDF4 | Secondary backgroundsInput backgroundsDividers |
| 300 | FE8B #FE8BEB | BordersInactive statesPlaceholder text |
| 400 | FD4E #FD4EE0 | Disabled statesSecondary iconsMuted text |
| 500 | FD1C #FD1CD7 | Primary brand colorCTAsActive elementsLinks |
| 600 | DE02 #DE02BA | Hover statesFocus ringsPrimary buttons hover |
| 700 | B102 #B10294 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 7E01 #7E0169 | Text on light backgroundsHeadingsStrong borders |
| 900 | 5101 #510143 | Primary textHigh emphasis contentDark headings |
| 950 | 3201 #32012A | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--orchid-50: #FFF0FC;
--orchid-100: #FFDCF9;
--orchid-200: #FEBDF4;
--orchid-300: #FE8BEB;
--orchid-400: #FD4EE0;
--orchid-500: #FD1CD7;
--orchid-600: #DE02BA;
--orchid-700: #B10294;
--orchid-800: #7E0169;
--orchid-900: #510143;
--orchid-950: #32012A;
}