Named color · #F9CED1
Pinktone
Pinktone is #F9CED1: rgb(249 206 209), hsl(356 78% 89%), oklch(0.889 0.049 13.4). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Pink mean? → · Pinktone color name →
#F9CED1
oklch(0.889 0.049 13.4)
Color conversions
- HEX
- #f9ced1
- RGB
- rgb(249 206 209)
- HSL
- hsl(356 78% 89%)
- HWB
- hwb(356 81% 2%)
- OKLCH
- oklch(0.889 0.049 13.4)
- OKLab
- oklab(0.889 0.047 0.011)
- CIE Lab
- lab(86.6 15.95 4.5)
- LCH
- lch(86.6 16.58 15.7)
- CMYK
- cmyk(0% 17% 16% 2%)
Tints · Shades · Tones
Tints
- FAD3D6
- FBD8DA
- FBDDDF
- FCE2E3
- FDE6E8
- FDEBEC
- FEF0F1
- FEF5F6
- FFFAFA
Shades
- D9B3B5
- B9989B
- 9A7F81
- 7D6668
- 614E50
- 463839
- 2C2323
- 150F10
- 030202
Tones
- ECC6C9
- E0BEC0
- D4B6B8
- C7AEB0
- BBA6A8
- AF9FA0
- A39798
- 978F90
- 8C8888
Color harmonies
Complementary +180°
- F9CED1
Pinktone
- B6E5E3
≈ Seascape Green
Analogous -30° +30°
- F9CED1
Pinktone
- F3CEE3
≈ Sparkling Pink
- F8D1C1
≈ Demure Pink
Triadic +120° +240°
- F9CED1
Pinktone
- CEE2C1
≈ Irish Folklore
- C5DDFB
≈ Fly a Kite
Split-complementary +150° +210°
- F9CED1
Pinktone
- BEE5D2
≈ Workout Green
- B9E2F2
≈ Breaking the Ice
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
FailOn white
WCAG 1.42:1 · APCA Lc 20
Ag
AAAOn black
WCAG 14.77:1 · APCA Lc 83
Best text color: #000000
WCAG 14.77:1 (AAA) · APCA Lc 83
Contrast pairs
Code snippets
CSS
:root {
--pinktone: #f9ced1;
--pinktone-rgb: 249 206 209;
--pinktone-oklch: oklch(0.889 0.049 13.4);
}
.element {
color: var(--pinktone);
background-color: hsl(356 78% 89%);
border-color: oklch(0.889 0.049 13.4);
}Tailwind CSS v4
@theme {
--color-pinktone: #f9ced1;
--color-pinktone-50: #fff0f0;
--color-pinktone-100: #f8e2e2;
--color-pinktone-200: #e8cccd;
--color-pinktone-300: #cfaeaf;
--color-pinktone-400: #b99396;
--color-pinktone-500: #a4797d;
--color-pinktone-600: #8b676a;
--color-pinktone-700: #6f5254;
--color-pinktone-800: #523c3e;
--color-pinktone-900: #39292b;
--color-pinktone-950: #231718;
}SCSS
$pinktone: #f9ced1;
$pinktone-rgb: 249, 206, 209;
$pinktone-light: mix(#fff, $pinktone, 20%);
$pinktone-dark: mix(#000, $pinktone, 20%);
.element {
color: $pinktone;
box-shadow: 0 0 0 2px rgba($pinktone, 0.35);
}