Rose

#CC147C

Pink

Color Codes

All color formats for development

HEX
#CC147C
RGB
rgb(204, 20, 124)
HSL
hsl(326, 82%, 44%)
OKLCH
oklch(0.558 0.221 354.3)
CMYK
cmyk(0%, 90%, 39%, 20%)

Accessibility

WCAG contrast compliance

On White Background

5.30:1

AA AAA

On Black Background

3.96:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#FEF1
100
#FCDF
200
#F9C3
300
#F494
400
#EF5D
500
#EA2E
600
#CC14
700
#A210
800
#740B
900
#4A07
950
#2E05

Shades

Darker variations

1#B81270
2#A31064
3#8F0E57
4#7B0C4B
5#660A3E
6#520832
7#3D0625
8#290419
9#14020C

Tints

Lighter variations

1#E6178C
2#EA2F99
3#ED49A6
4#F063B3
5#F27DBF
6#F597CC
7#F7B1D9
8#FACBE6
9#FCE5F2

Tones

Muted variations

1#C31D7B
2#BA277A
3#B13079
4#A73978
5#9E4276
6#954B75
7#8C5574
8#835E73
9#796771

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FEF1
#FEF1F8
BackgroundsSubtle highlightsCard backgrounds
100
FCDF
#FCDFEF
Light backgroundsTable row hoverSkeleton loading
200
F9C3
#F9C3E1
Secondary backgroundsInput backgroundsDividers
300
F494
#F494CB
BordersInactive statesPlaceholder text
400
EF5D
#EF5DB0
Disabled statesSecondary iconsMuted text
500
EA2E
#EA2E99
Primary brand colorCTAsActive elementsLinks
600
CC14
#CC147C
Hover statesFocus ringsPrimary buttons hover
700
A210
#A21063
Active/pressed statesDark mode accentsSecondary text
800
740B
#740B47
Text on light backgroundsHeadingsStrong borders
900
4A07
#4A072D
Primary textHigh emphasis contentDark headings
950
2E05
#2E051C
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --rose-50: #FEF1F8;
  --rose-100: #FCDFEF;
  --rose-200: #F9C3E1;
  --rose-300: #F494CB;
  --rose-400: #EF5DB0;
  --rose-500: #EA2E99;
  --rose-600: #CC147C;
  --rose-700: #A21063;
  --rose-800: #740B47;
  --rose-900: #4A072D;
  --rose-950: #2E051C;
}
Generate More ShadesCreate PaletteConvert Color