Named color · #F4C0C3
Plaza Pink
Plaza Pink is #F4C0C3: rgb(244 192 195), hsl(357 70% 85%), oklch(0.855 0.06 14.5). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Pink mean? → · Plaza Pink color name →
#F4C0C3
oklch(0.855 0.06 14.5)
Color conversions
- HEX
- #f4c0c3
- RGB
- rgb(244 192 195)
- HSL
- hsl(357 70% 85%)
- HWB
- hwb(357 75% 4%)
- OKLCH
- oklch(0.855 0.06 14.5)
- OKLab
- oklab(0.855 0.058 0.015)
- CIE Lab
- lab(82.5 19.51 6)
- LCH
- lch(82.5 20.42 17.1)
- CMYK
- cmyk(0% 21% 20% 4%)
Tints · Shades · Tones
Tints
- F5C6C9
- F7CDCF
- F8D3D5
- F9D9DB
- FADFE1
- FCE6E7
- FDECED
- FDF2F3
- FEF9F9
Shades
- D4A7A9
- B58E90
- 977678
- 7A5F60
- 5E494A
- 443434
- 2B2020
- 140E0E
- 030202
Tones
- E8B9BC
- DCB3B5
- D0ADAE
- C5A6A8
- B9A0A1
- AD999A
- A29394
- 978D8D
- 8B8686
Color harmonies
Complementary +180°
- F4C0C3
Plaza Pink
- A1DCDB
≈ Aqua Spray
Analogous -30° +30°
- F4C0C3
Plaza Pink
- EDC0D9
≈ Starlet Pink
- F2C4B0
≈ Peach Temptation
Triadic +120° +240°
- F4C0C3
Plaza Pink
- BFD9B1
≈ Winter Willow Green
- B5D2F7
≈ Ice Cold Stare
Split-complementary +150° +210°
- F4C0C3
Plaza Pink
- ACDCC5
≈ Quantum Effect
- A5D8ED
≈ Blue Bubble
Tetradic +90° +180° +270°
- F4C0C3
Plaza Pink
- D5D2A5
≈ Cream Cheese Avocado
- A1DCDB
≈ Aqua Spray
- CACBF6
≈ Soap
Contrast & accessibility
Ag
FailOn white
WCAG 1.59:1 · APCA Lc 27
Ag
AAAOn black
WCAG 13.17:1 · APCA Lc 76
Best text color: #000000
WCAG 13.17:1 (AAA) · APCA Lc 76
Contrast pairs
Code snippets
CSS
:root {
--plaza-pink: #f4c0c3;
--plaza-pink-rgb: 244 192 195;
--plaza-pink-oklch: oklch(0.855 0.06 14.5);
}
.element {
color: var(--plaza-pink);
background-color: hsl(357 70% 85%);
border-color: oklch(0.855 0.06 14.5);
}Tailwind CSS v4
@theme {
--color-plaza-pink: #f4c0c3;
--color-plaza-pink-50: #ffefef;
--color-plaza-pink-100: #fbe0e1;
--color-plaza-pink-200: #edcbcb;
--color-plaza-pink-300: #d4acad;
--color-plaza-pink-400: #bf9093;
--color-plaza-pink-500: #aa767a;
--color-plaza-pink-600: #906467;
--color-plaza-pink-700: #735052;
--color-plaza-pink-800: #553a3d;
--color-plaza-pink-900: #3b282a;
--color-plaza-pink-950: #251617;
}SCSS
$plaza-pink: #f4c0c3;
$plaza-pink-rgb: 244, 192, 195;
$plaza-pink-light: mix(#fff, $plaza-pink, 20%);
$plaza-pink-dark: mix(#000, $plaza-pink, 20%);
.element {
color: $plaza-pink;
box-shadow: 0 0 0 2px rgba($plaza-pink, 0.35);
}