Named color · #F6C2CC
Deco Pink
Deco Pink is #F6C2CC: rgb(246 194 204), hsl(348 74% 86%), oklch(0.863 0.061 5.5). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Pink mean? → · Deco Pink color name →
#F6C2CC
oklch(0.863 0.061 5.5)
Color conversions
- HEX
- #f6c2cc
- RGB
- rgb(246 194 204)
- HSL
- hsl(348 74% 86%)
- HWB
- hwb(348 76% 4%)
- OKLCH
- oklch(0.863 0.061 5.5)
- OKLab
- oklab(0.863 0.06 0.006)
- CIE Lab
- lab(83.36 20.25 2.47)
- LCH
- lch(83.36 20.4 7)
- CMYK
- cmyk(0% 21% 17% 4%)
Tints · Shades · Tones
Tints
- F7C8D1
- F8CED6
- F9D4DB
- FBDAE0
- FBE0E5
- FCE7EA
- FDEDEF
- FEF3F5
- FEF9FA
Shades
- D6A8B1
- B78F97
- 98777E
- 7B6065
- 5F494E
- 453437
- 2C2022
- 150E0F
- 030202
Tones
- EABBC4
- DEB5BC
- D2AEB5
- C6A7AD
- BAA1A5
- AE9A9E
- A39396
- 978D8F
- 8B8687
Color harmonies
Complementary +180°
- F6C2CC
Deco Pink
- A5DFD7
≈ Frosty
Analogous -30° +30°
- F6C2CC
Deco Pink
- ECC3E2
≈ Sweet Murmur
- F7C5B7
≈ Serene Pink
Triadic +120° +240°
- F6C2CC
Deco Pink
- C8DAAF
≈ White Vienna
- B2D7F8
≈ Blue Rice
Split-complementary +150° +210°
- F6C2CC
Deco Pink
- B3DEC1
≈ Quantum Effect
- A5DDEB
≈ Early July
Tetradic +90° +180° +270°
- F6C2CC
Deco Pink
- DED2A5
≈ Summer Solstice
- A5DFD7
≈ Frosty
- C6CFFA
≈ Lavender Blue
Contrast & accessibility
Ag
FailOn white
WCAG 1.55:1 · APCA Lc 25
Ag
AAAOn black
WCAG 13.50:1 · APCA Lc 78
Best text color: #000000
WCAG 13.50:1 (AAA) · APCA Lc 78
Contrast pairs
Code snippets
CSS
:root {
--deco-pink: #f6c2cc;
--deco-pink-rgb: 246 194 204;
--deco-pink-oklch: oklch(0.863 0.061 5.5);
}
.element {
color: var(--deco-pink);
background-color: hsl(348 74% 86%);
border-color: oklch(0.863 0.061 5.5);
}Tailwind CSS v4
@theme {
--color-deco-pink: #f6c2cc;
--color-deco-pink-50: #ffeef2;
--color-deco-pink-100: #fbe0e4;
--color-deco-pink-200: #edcacf;
--color-deco-pink-300: #d4abb2;
--color-deco-pink-400: #bf9099;
--color-deco-pink-500: #a97580;
--color-deco-pink-600: #8f646d;
--color-deco-pink-700: #734f57;
--color-deco-pink-800: #553a40;
--color-deco-pink-900: #3b272c;
--color-deco-pink-950: #251619;
}SCSS
$deco-pink: #f6c2cc;
$deco-pink-rgb: 246, 194, 204;
$deco-pink-light: mix(#fff, $deco-pink, 20%);
$deco-pink-dark: mix(#000, $deco-pink, 20%);
.element {
color: $deco-pink;
box-shadow: 0 0 0 2px rgba($deco-pink, 0.35);
}