Named color · #F8E1D0
Pastry Pink
Pastry Pink is #F8E1D0: rgb(248 225 208), hsl(25 74% 89%), oklch(0.924 0.034 58.8). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Gray mean? → · Pastry Pink color name →
#F8E1D0
oklch(0.924 0.034 58.8)
Color conversions
- HEX
- #f8e1d0
- RGB
- rgb(248 225 208)
- HSL
- hsl(25 74% 89%)
- HWB
- hwb(25 82% 3%)
- OKLCH
- oklch(0.924 0.034 58.8)
- OKLab
- oklab(0.924 0.018 0.029)
- CIE Lab
- lab(91.09 6.16 11.36)
- LCH
- lch(91.09 12.93 61.5)
- CMYK
- cmyk(0% 9% 16% 3%)
Tints · Shades · Tones
Tints
- F9E4D5
- FAE7D9
- FAEADE
- FBEDE3
- FCF0E7
- FCF3EC
- FDF6F1
- FEF9F6
- FEFCFA
Shades
- D8C4B5
- B8A79A
- 9A8B80
- 7C7067
- 60564F
- 453E39
- 2C2723
- 151210
- 030202
Tones
- EBD7C8
- DFCDC0
- D3C3B7
- C6B9AF
- BAAFA7
- AEA69F
- A39C97
- 97938F
- 8B8988
Color harmonies
Complementary +180°
- F8E1D0
Pastry Pink
- D2EAFB
≈ Cloudless
Analogous -30° +30°
- F8E1D0
Pastry Pink
- FCDED9
≈ Pink Glitter
- EFE5CD
≈ Someday
Triadic +120° +240°
- F8E1D0
Pastry Pink
- CFEEE6
≈ Underwater
- E8E1FA
≈ Lavender Mist
Split-complementary +150° +210°
- F8E1D0
Pastry Pink
- CDEDF2
≈ Hand Sanitizer
- DCE6FE
≈ Lavender Mist
Tetradic +90° +180° +270°
- F8E1D0
Pastry Pink
- D7EDDA
≈ Silky Mint
- D2EAFB
≈ Cloudless
- F3DEF1
≈ Divine Dove
Contrast & accessibility
Ag
FailOn white
WCAG 1.25:1 · APCA Lc 13
Ag
AAAOn black
WCAG 16.67:1 · APCA Lc 91
Best text color: #000000
WCAG 16.67:1 (AAA) · APCA Lc 91
Contrast pairs
Code snippets
CSS
:root {
--pastry-pink: #f8e1d0;
--pastry-pink-rgb: 248 225 208;
--pastry-pink-oklch: oklch(0.924 0.034 58.8);
}
.element {
color: var(--pastry-pink);
background-color: hsl(25 74% 89%);
border-color: oklch(0.924 0.034 58.8);
}Tailwind CSS v4
@theme {
--color-pastry-pink: #f8e1d0;
--color-pastry-pink-50: #fdf3ec;
--color-pastry-pink-100: #f1e6dd;
--color-pastry-pink-200: #e0d1c6;
--color-pastry-pink-300: #c5b4a6;
--color-pastry-pink-400: #ae9a8b;
--color-pastry-pink-500: #988170;
--color-pastry-pink-600: #806d5f;
--color-pastry-pink-700: #67574c;
--color-pastry-pink-800: #4c4037;
--color-pastry-pink-900: #352c26;
--color-pastry-pink-950: #201914;
}SCSS
$pastry-pink: #f8e1d0;
$pastry-pink-rgb: 248, 225, 208;
$pastry-pink-light: mix(#fff, $pastry-pink, 20%);
$pastry-pink-dark: mix(#000, $pastry-pink, 20%);
.element {
color: $pastry-pink;
box-shadow: 0 0 0 2px rgba($pastry-pink, 0.35);
}