Orchid
#D35BF1
PinkColor Codes
All color formats for development
HEX
#D35BF1RGB
rgb(211, 91, 241)HSL
hsl(288, 84%, 65%)OKLCH
oklch(0.681 0.233 319.1)CMYK
cmyk(12%, 62%, 0%, 5%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#CB3CEE
2#C21EEB
3#AF13D5
4#9610B7
5#7D0D98
6#640B7A
7#4B085B
8#32053D
9#19031E
Tints
Lighter variations
1#D76BF2
2#DC7CF4
3#E08CF5
4#E49CF6
5#E9ADF8
6#EDBDF9
7#F2CEFB
8#F6DEFC
9#FBEFFE
Tones
Muted variations
1#CE62E9
2#CA6AE2
3#C571DA
4#C179D3
5#BC80CB
6#B888C4
7#B38FBC
8#AF97B5
9#AA9EAD
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | FBF1 #FBF1FE | BackgroundsSubtle highlightsCard backgrounds |
| 100 | F6DE #F6DEFC | Light backgroundsTable row hoverSkeleton loading |
| 200 | EFC2 #EFC2FA | Secondary backgroundsInput backgroundsDividers |
| 300 | E293 #E293F6 | BordersInactive statesPlaceholder text |
| 400 | D35B #D35BF1 | Disabled statesSecondary iconsMuted text |
| 500 | C62C #C62CED | Primary brand colorCTAsActive elementsLinks |
| 600 | A912 #A912CE | Hover statesFocus ringsPrimary buttons hover |
| 700 | 860E #860EA4 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 600A #600A75 | Text on light backgroundsHeadingsStrong borders |
| 900 | 3D07 #3D074B | Primary textHigh emphasis contentDark headings |
| 950 | 2604 #26042F | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--orchid-50: #FBF1FE;
--orchid-100: #F6DEFC;
--orchid-200: #EFC2FA;
--orchid-300: #E293F6;
--orchid-400: #D35BF1;
--orchid-500: #C62CED;
--orchid-600: #A912CE;
--orchid-700: #860EA4;
--orchid-800: #600A75;
--orchid-900: #3D074B;
--orchid-950: #26042F;
}