Named color · #C772C0
Gulābī Pink
Gulābī Pink is #C772C0: rgb(199 114 192), hsl(305 43% 61%), oklch(0.672 0.146 330.1). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Pink mean? → · Gulābī Pink color name →
#C772C0
oklch(0.672 0.146 330.1)
Color conversions
- HEX
- #c772c0
- RGB
- rgb(199 114 192)
- HSL
- hsl(305 43% 61%)
- HWB
- hwb(305 45% 22%)
- OKLCH
- oklch(0.672 0.146 330.1)
- OKLab
- oklab(0.672 0.126 -0.073)
- CIE Lab
- lab(59.86 42.56 -26.42)
- LCH
- lch(59.86 50.09 328.2)
- CMYK
- cmyk(0% 43% 4% 22%)
Tints · Shades · Tones
Tints
- CD80C7
- D48FCD
- DA9DD3
- E0ABDA
- E5B9E0
- EBC7E6
- F0D5ED
- F5E3F3
- FAF1F9
Shades
- AD62A7
- 93538E
- 7A4476
- 62365F
- 4C2849
- 361B34
- 210E20
- 0E040E
- 020102
Tones
- C074BA
- B976B3
- B378AD
- AC7AA6
- A57BA0
- 9E7C9A
- 967D93
- 8F7E8D
- 887F86
Color harmonies
Complementary +180°
- C772C0
Gulābī Pink
- 46AE64
≈ Seaweed Green
Analogous -30° +30°
- C772C0
Gulābī Pink
- A47FE1
≈ Lavender Blossom
- DC6C92
≈ Paris Pink
Triadic +120° +240°
- C772C0
Gulābī Pink
- B79100
≈ Faint Gold
- 00A9BD
≈ Sarah’s Garden
Split-complementary +150° +210°
- C772C0
Gulābī Pink
- 8BA227
≈ Noxious
- 00AE99
≈ Pool Green
Tetradic +90° +180° +270°
- C772C0
Gulābī Pink
- D57D22
≈ Yellow Mandarin
- 46AE64
≈ Seaweed Green
- 20A0E6
≈ Button Blue
Contrast & accessibility
Ag
FailOn white
WCAG 3.18:1 · APCA Lc 59
Ag
AAOn black
WCAG 6.59:1 · APCA Lc 43
Best text color: #000000
WCAG 6.59:1 (AA) · APCA Lc 43
Contrast pairs
Code snippets
CSS
:root {
--gulabi-pink: #c772c0;
--gulabi-pink-rgb: 199 114 192;
--gulabi-pink-oklch: oklch(0.672 0.146 330.1);
}
.element {
color: var(--gulabi-pink);
background-color: hsl(305 43% 61%);
border-color: oklch(0.672 0.146 330.1);
}Tailwind CSS v4
@theme {
--color-gulabi-pink: #c772c0;
--color-gulabi-pink-50: #ffe7ff;
--color-gulabi-pink-100: #ffd7fe;
--color-gulabi-pink-200: #fabef0;
--color-gulabi-pink-300: #e39bd8;
--color-gulabi-pink-400: #ce7dc7;
--color-gulabi-pink-500: #ba5db3;
--color-gulabi-pink-600: #9d5097;
--color-gulabi-pink-700: #7e3f79;
--color-gulabi-pink-800: #5d2e5b;
--color-gulabi-pink-900: #411f40;
--color-gulabi-pink-950: #290e29;
}SCSS
$gulabi-pink: #c772c0;
$gulabi-pink-rgb: 199, 114, 192;
$gulabi-pink-light: mix(#fff, $gulabi-pink, 20%);
$gulabi-pink-dark: mix(#000, $gulabi-pink, 20%);
.element {
color: $gulabi-pink;
box-shadow: 0 0 0 2px rgba($gulabi-pink, 0.35);
}