Orchid
#AF2EEA
PurpleColor Codes
All color formats for development
HEX
#AF2EEARGB
rgb(175, 46, 234)HSL
hsl(281, 82%, 55%)OKLCH
oklch(0.589 0.263 311.8)CMYK
cmyk(25%, 80%, 0%, 8%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#A417E6
2#9214CC
3#8012B3
4#6D0F99
5#5B0D80
6#490A66
7#37084D
8#240533
9#12031A
Tints
Lighter variations
1#B743EC
2#BF58EE
3#C76DF1
4#CF82F3
5#D797F5
6#DFABF7
7#E7C0F9
8#EFD5FB
9#F7EAFD
Tones
Muted variations
1#AB38E1
2#A841D8
3#A44ACE
4#A154C5
5#9E5DBB
6#9A67B2
7#9770A8
8#93799F
9#908396
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | FAF1 #FAF1FE | BackgroundsSubtle highlightsCard backgrounds |
| 100 | F3DF #F3DFFC | Light backgroundsTable row hoverSkeleton loading |
| 200 | E8C3 #E8C3F9 | Secondary backgroundsInput backgroundsDividers |
| 300 | D694 #D694F4 | BordersInactive statesPlaceholder text |
| 400 | C15D #C15DEF | Disabled statesSecondary iconsMuted text |
| 500 | AF2E #AF2EEA | Primary brand colorCTAsActive elementsLinks |
| 600 | 9214 #9214CC | Hover statesFocus ringsPrimary buttons hover |
| 700 | 7410 #7410A2 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 530B #530B74 | Text on light backgroundsHeadingsStrong borders |
| 900 | 3507 #35074A | Primary textHigh emphasis contentDark headings |
| 950 | 2105 #21052E | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--orchid-50: #FAF1FE;
--orchid-100: #F3DFFC;
--orchid-200: #E8C3F9;
--orchid-300: #D694F4;
--orchid-400: #C15DEF;
--orchid-500: #AF2EEA;
--orchid-600: #9214CC;
--orchid-700: #7410A2;
--orchid-800: #530B74;
--orchid-900: #35074A;
--orchid-950: #21052E;
}