Named color · #F5D0D6
Pink Cupcake
Pink Cupcake is #F5D0D6: rgb(245 208 214), hsl(350 65% 89%), oklch(0.891 0.042 7). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Pink mean? → · Pink Cupcake color name →
#F5D0D6
oklch(0.891 0.042 7)
Color conversions
- HEX
- #f5d0d6
- RGB
- rgb(245 208 214)
- HSL
- hsl(350 65% 89%)
- HWB
- hwb(350 82% 4%)
- OKLCH
- oklch(0.891 0.042 7)
- OKLab
- oklab(0.891 0.042 0.005)
- CIE Lab
- lab(86.81 14.09 2.1)
- LCH
- lch(86.81 14.24 8.5)
- CMYK
- cmyk(0% 15% 13% 4%)
Tints · Shades · Tones
Tints
- F6D5DA
- F7D9DE
- F8DEE2
- F9E3E6
- FAE7EA
- FBECEE
- FCF1F3
- FDF6F7
- FEFAFB
Shades
- D5B5BA
- B69A9E
- 988084
- 7B676A
- 5F4F52
- 44393B
- 2B2325
- 151010
- 030202
Tones
- E9C8CD
- DDC0C4
- D1B7BB
- C5AFB3
- B9A7AA
- AD9FA1
- A29799
- 968F91
- 8B8888
Color harmonies
Complementary +180°
- F5D0D6
Pink Cupcake
- BDE5DF
≈ Soothing Sea
Analogous -30° +30°
- F5D0D6
Pink Cupcake
- EED1E5
≈ Lacquer Mauve
- F5D2C8
≈ Pink Cloud
Triadic +120° +240°
- F5D0D6
Pink Cupcake
- D3E1C3
≈ Security
- C5DEF6
≈ Fly a Kite
Split-complementary +150° +210°
- F5D0D6
Pink Cupcake
- C5E4D0
≈ Mint Smoothie
- BDE2ED
≈ Diminished Blue
Tetradic +90° +180° +270°
- F5D0D6
Pink Cupcake
- E2DCBC
≈ Flaxen Fair
- BDE5DF
≈ Soothing Sea
- D3D9F7
≈ Flax Bloom
Contrast & accessibility
Ag
FailOn white
WCAG 1.41:1 · APCA Lc 20
Ag
AAAOn black
WCAG 14.87:1 · APCA Lc 84
Best text color: #000000
WCAG 14.87:1 (AAA) · APCA Lc 84
Contrast pairs
Code snippets
CSS
:root {
--pink-cupcake: #f5d0d6;
--pink-cupcake-rgb: 245 208 214;
--pink-cupcake-oklch: oklch(0.891 0.042 7);
}
.element {
color: var(--pink-cupcake);
background-color: hsl(350 65% 89%);
border-color: oklch(0.891 0.042 7);
}Tailwind CSS v4
@theme {
--color-pink-cupcake: #f5d0d6;
--color-pink-cupcake-50: #fff0f2;
--color-pink-cupcake-100: #f5e2e5;
--color-pink-cupcake-200: #e5cdd0;
--color-pink-cupcake-300: #ccafb3;
--color-pink-cupcake-400: #b5959a;
--color-pink-cupcake-500: #a07b81;
--color-pink-cupcake-600: #87686d;
--color-pink-cupcake-700: #6c5357;
--color-pink-cupcake-800: #503c40;
--color-pink-cupcake-900: #372a2c;
--color-pink-cupcake-950: #221719;
}SCSS
$pink-cupcake: #f5d0d6;
$pink-cupcake-rgb: 245, 208, 214;
$pink-cupcake-light: mix(#fff, $pink-cupcake, 20%);
$pink-cupcake-dark: mix(#000, $pink-cupcake, 20%);
.element {
color: $pink-cupcake;
box-shadow: 0 0 0 2px rgba($pink-cupcake, 0.35);
}