Orchid
#A732E7
PurpleColor Codes
All color formats for development
HEX
#A732E7RGB
rgb(167, 50, 231)HSL
hsl(279, 79%, 55%)OKLCH
oklch(0.579 0.255 309.8)CMYK
cmyk(28%, 78%, 0%, 9%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#9C1BE2
2#8B18C9
3#7915B0
4#681297
5#570F7E
6#450C64
7#34094B
8#230632
9#110319
Tints
Lighter variations
1#B046E9
2#B95BEC
3#C26FEE
4#CA84F1
5#D398F3
6#DCADF5
7#E5C1F8
8#EDD6FA
9#F6EAFD
Tones
Muted variations
1#A53BDE
2#A244D5
3#9F4DCC
4#9D56C3
5#9A5FBA
6#9768B1
7#9471A7
8#927A9E
9#8F8395
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F9F1 #F9F1FD | BackgroundsSubtle highlightsCard backgrounds |
| 100 | F1DF #F1DFFB | Light backgroundsTable row hoverSkeleton loading |
| 200 | E6C4 #E6C4F8 | Secondary backgroundsInput backgroundsDividers |
| 300 | D296 #D296F3 | BordersInactive statesPlaceholder text |
| 400 | BB5F #BB5FEC | Disabled statesSecondary iconsMuted text |
| 500 | A732 #A732E7 | Primary brand colorCTAsActive elementsLinks |
| 600 | 8B18 #8B18C9 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 6E13 #6E13A0 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 4F0D #4F0D72 | Text on light backgroundsHeadingsStrong borders |
| 900 | 3209 #320949 | Primary textHigh emphasis contentDark headings |
| 950 | 2005 #20052E | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--orchid-50: #F9F1FD;
--orchid-100: #F1DFFB;
--orchid-200: #E6C4F8;
--orchid-300: #D296F3;
--orchid-400: #BB5FEC;
--orchid-500: #A732E7;
--orchid-600: #8B18C9;
--orchid-700: #6E13A0;
--orchid-800: #4F0D72;
--orchid-900: #320949;
--orchid-950: #20052E;
}