Named color · #F7D1D1
Pink Dogwood
Pink Dogwood is #F7D1D1: rgb(247 209 209), hsl(0 70% 89%), oklch(0.893 0.043 18). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Pink mean? → · Pink Dogwood color name →
#F7D1D1
oklch(0.893 0.043 18)
Color conversions
- HEX
- #f7d1d1
- RGB
- rgb(247 209 209)
- HSL
- hsl(0 70% 89%)
- HWB
- hwb(0 82% 3%)
- OKLCH
- oklch(0.893 0.043 18)
- OKLab
- oklab(0.893 0.041 0.013)
- CIE Lab
- lab(87.13 13.74 5.23)
- LCH
- lch(87.13 14.7 20.8)
- CMYK
- cmyk(0% 15% 15% 3%)
Tints · Shades · Tones
Tints
- F8D6D6
- F9DADA
- FADFDF
- FBE3E3
- FCE8E8
- FCEDEC
- FDF1F1
- FEF6F6
- FEFAFA
Shades
- D7B5B5
- B79B9B
- 998181
- 7C6868
- 605050
- 453939
- 2C2323
- 151010
- 030202
Tones
- EBC9C9
- DEC0C0
- D2B8B8
- C6B0B0
- BAA8A8
- AEA0A0
- A29898
- 979090
- 8B8888
Color harmonies
Complementary +180°
- F7D1D1
Pink Dogwood
- BCE5E6
≈ Blue Karma
Analogous -30° +30°
- F7D1D1
Pink Dogwood
- F2D1E1
≈ Minimal Rose
- F5D4C4
≈ Nutter Butter
Triadic +120° +240°
- F7D1D1
Pink Dogwood
- CEE3C8
≈ Jocular Green
- CBDDF9
≈ Arc Light
Split-complementary +150° +210°
- F7D1D1
Pink Dogwood
- C1E5D6
≈ Jade Spell
- BFE2F2
≈ Skylark
Tetradic +90° +180° +270°
- F7D1D1
Pink Dogwood
- DEDEBE
≈ Soft Vellum
- BCE5E6
≈ Blue Karma
- DAD8F7
≈ Lavender Sky
Contrast & accessibility
Ag
FailOn white
WCAG 1.40:1 · APCA Lc 19
Ag
AAAOn black
WCAG 14.99:1 · APCA Lc 84
Best text color: #000000
WCAG 14.99:1 (AAA) · APCA Lc 84
Contrast pairs
Code snippets
CSS
:root {
--pink-dogwood: #f7d1d1;
--pink-dogwood-rgb: 247 209 209;
--pink-dogwood-oklch: oklch(0.893 0.043 18);
}
.element {
color: var(--pink-dogwood);
background-color: hsl(0 70% 89%);
border-color: oklch(0.893 0.043 18);
}Tailwind CSS v4
@theme {
--color-pink-dogwood: #f7d1d1;
--color-pink-dogwood-50: #fff1f0;
--color-pink-dogwood-100: #f6e3e2;
--color-pink-dogwood-200: #e6cdcd;
--color-pink-dogwood-300: #cdafae;
--color-pink-dogwood-400: #b79595;
--color-pink-dogwood-500: #a17b7b;
--color-pink-dogwood-600: #886869;
--color-pink-dogwood-700: #6d5354;
--color-pink-dogwood-800: #503d3d;
--color-pink-dogwood-900: #382a2a;
--color-pink-dogwood-950: #221718;
}SCSS
$pink-dogwood: #f7d1d1;
$pink-dogwood-rgb: 247, 209, 209;
$pink-dogwood-light: mix(#fff, $pink-dogwood, 20%);
$pink-dogwood-dark: mix(#000, $pink-dogwood, 20%);
.element {
color: $pink-dogwood;
box-shadow: 0 0 0 2px rgba($pink-dogwood, 0.35);
}