Brown
#A80B44
PinkColor Codes
All color formats for development
HEX
#A80B44RGB
rgb(168, 11, 68)HSL
hsl(338, 88%, 35%)OKLCH
oklch(0.472 0.183 9.6)CMYK
cmyk(0%, 93%, 60%, 34%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#970A3D
2#860937
3#750730
4#650629
5#540522
6#43041B
7#320314
8#22020E
9#110107
Tints
Lighter variations
1#C70D51
2#E60F5E
3#F12570
4#F34484
5#F56399
6#F782AD
7#F9A2C2
8#FBC1D6
9#FDE0EB
Tones
Muted variations
1#A01346
2#981A48
3#90224B
4#882A4D
5#81324F
6#793A51
7#714253
8#694A55
9#615157
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | FEF1 #FEF1F6 | BackgroundsSubtle highlightsCard backgrounds |
| 100 | FDDD #FDDDE9 | Light backgroundsTable row hoverSkeleton loading |
| 200 | FBC1 #FBC1D6 | Secondary backgroundsInput backgroundsDividers |
| 300 | F891 #F891B7 | BordersInactive statesPlaceholder text |
| 400 | F457 #F45791 | Disabled statesSecondary iconsMuted text |
| 500 | F127 #F12771 | Primary brand colorCTAsActive elementsLinks |
| 600 | D30D #D30D56 | Hover statesFocus ringsPrimary buttons hover |
| 700 | A80B #A80B44 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 7808 #780831 | Text on light backgroundsHeadingsStrong borders |
| 900 | 4D05 #4D051F | Primary textHigh emphasis contentDark headings |
| 950 | 3003 #300314 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--brown-50: #FEF1F6;
--brown-100: #FDDDE9;
--brown-200: #FBC1D6;
--brown-300: #F891B7;
--brown-400: #F45791;
--brown-500: #F12771;
--brown-600: #D30D56;
--brown-700: #A80B44;
--brown-800: #780831;
--brown-900: #4D051F;
--brown-950: #300314;
}