Brown
#7C0438
PinkColor Codes
All color formats for development
HEX
#7C0438RGB
rgb(124, 4, 56)HSL
hsl(334, 94%, 25%)OKLCH
oklch(0.379 0.149 4.6)CMYK
cmyk(0%, 97%, 55%, 51%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#6F0332
2#63032D
3#570327
4#4A0221
5#3E021C
6#310216
7#250111
8#19010B
9#0C0006
Tints
Lighter variations
1#A10548
2#C60659
3#EB076A
4#F8207E
5#F94593
6#FA6BA9
7#FC90BE
8#FDB5D4
9#FEDAE9
Tones
Muted variations
1#760A39
2#701039
3#6A163A
4#641C3B
5#5E223C
6#58283D
7#522E3D
8#4C343E
9#463A3F
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | FFF0 #FFF0F6 | BackgroundsSubtle highlightsCard backgrounds |
| 100 | FEDC #FEDCEB | Light backgroundsTable row hoverSkeleton loading |
| 200 | FDBF #FDBFDA | Secondary backgroundsInput backgroundsDividers |
| 300 | FB8D #FB8DBD | BordersInactive statesPlaceholder text |
| 400 | FA52 #FA529B | Disabled statesSecondary iconsMuted text |
| 500 | F820 #F8207E | Primary brand colorCTAsActive elementsLinks |
| 600 | DA07 #DA0762 | Hover statesFocus ringsPrimary buttons hover |
| 700 | AD05 #AD054E | Active/pressed statesDark mode accentsSecondary text |
| 800 | 7C04 #7C0438 | Text on light backgroundsHeadingsStrong borders |
| 900 | 4F02 #4F0224 | Primary textHigh emphasis contentDark headings |
| 950 | 3102 #310216 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--brown-50: #FFF0F6;
--brown-100: #FEDCEB;
--brown-200: #FDBFDA;
--brown-300: #FB8DBD;
--brown-400: #FA529B;
--brown-500: #F8207E;
--brown-600: #DA0762;
--brown-700: #AD054E;
--brown-800: #7C0438;
--brown-900: #4F0224;
--brown-950: #310216;
}