Orchid
#B44FFC
PurpleColor Codes
All color formats for development
HEX
#B44FFCRGB
rgb(180, 79, 252)HSL
hsl(275, 97%, 65%)OKLCH
oklch(0.637 0.248 307.5)CMYK
cmyk(29%, 69%, 0%, 1%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#A62FFC
2#980EFB
3#8703E5
4#7403C4
5#6002A3
6#4D0283
7#3A0162
8#270141
9#130021
Tints
Lighter variations
1#BC61FD
2#C372FD
3#CB84FD
4#D296FD
5#DAA7FE
6#E1B9FE
7#E9CAFE
8#F0DCFE
9#F8EDFF
Tones
Muted variations
1#B358F4
2#B160EB
3#B069E2
4#AE72DA
5#AD7AD1
6#AC83C8
7#AA8CC0
8#A994B7
9#A79DAE
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F9F0 #F9F0FF | BackgroundsSubtle highlightsCard backgrounds |
| 100 | F0DC #F0DCFE | Light backgroundsTable row hoverSkeleton loading |
| 200 | E3BE #E3BEFE | Secondary backgroundsInput backgroundsDividers |
| 300 | CE8B #CE8BFD | BordersInactive statesPlaceholder text |
| 400 | B44F #B44FFC | Disabled statesSecondary iconsMuted text |
| 500 | 9F1D #9F1DFC | Primary brand colorCTAsActive elementsLinks |
| 600 | 8203 #8203DD | Hover statesFocus ringsPrimary buttons hover |
| 700 | 6803 #6803B0 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 4A02 #4A027E | Text on light backgroundsHeadingsStrong borders |
| 900 | 2F01 #2F0150 | Primary textHigh emphasis contentDark headings |
| 950 | 1E01 #1E0132 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--orchid-50: #F9F0FF;
--orchid-100: #F0DCFE;
--orchid-200: #E3BEFE;
--orchid-300: #CE8BFD;
--orchid-400: #B44FFC;
--orchid-500: #9F1DFC;
--orchid-600: #8203DD;
--orchid-700: #6803B0;
--orchid-800: #4A027E;
--orchid-900: #2F0150;
--orchid-950: #1E0132;
}