Named color · #F5D8BA
Porcelain Peach
Porcelain Peach is #F5D8BA: rgb(245 216 186), hsl(31 75% 85%), oklch(0.899 0.051 68.1). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Orange mean? → · Porcelain Peach color name →
#F5D8BA
oklch(0.899 0.051 68.1)
Color conversions
- HEX
- #f5d8ba
- RGB
- rgb(245 216 186)
- HSL
- hsl(31 75% 85%)
- HWB
- hwb(31 73% 4%)
- OKLCH
- oklch(0.899 0.051 68.1)
- OKLab
- oklab(0.899 0.019 0.048)
- CIE Lab
- lab(88.22 7.08 18.74)
- LCH
- lch(88.22 20.03 69.3)
- CMYK
- cmyk(0% 12% 24% 4%)
Tints · Shades · Tones
Tints
- F6DCC1
- F7E0C8
- F8E4CF
- F9E8D6
- FAECDD
- FBEFE3
- FCF3EA
- FDF7F1
- FEFBF8
Shades
- D5BCA1
- B6A089
- 988572
- 7B6B5C
- 5F5346
- 443B32
- 2B251E
- 15110D
- 030202
Tones
- E9CFB4
- DDC6AE
- D1BDA8
- C5B4A3
- B9AB9D
- ADA297
- A29A91
- 96918C
- 8B8886
Color harmonies
Complementary +180°
- F5D8BA
Porcelain Peach
- C4E1FF
≈ Dithered Sky
Analogous -30° +30°
- F5D8BA
Porcelain Peach
- FDD3C5
≈ Coral Dune
- E6DFB8
≈ Swan Dance
Triadic +120° +240°
- F5D8BA
Porcelain Peach
- B8E9E4
≈ Tahitian Breeze
- E7D5F8
≈ Lavender Princess
Split-complementary +150° +210°
- F5D8BA
Porcelain Peach
- B8E7F4
≈ First of July
- D5DBFF
≈ Icy Plains
Tetradic +90° +180° +270°
- F5D8BA
Porcelain Peach
- C2E9D1
≈ Martian Moon
- C4E1FF
≈ Dithered Sky
- F5D1EA
≈ Little Smile
Contrast & accessibility
Ag
FailOn white
WCAG 1.36:1 · APCA Lc 18
Ag
AAAOn black
WCAG 15.41:1 · APCA Lc 86
Best text color: #000000
WCAG 15.41:1 (AAA) · APCA Lc 86
Contrast pairs
Code snippets
CSS
:root {
--porcelain-peach: #f5d8ba;
--porcelain-peach-rgb: 245 216 186;
--porcelain-peach-oklch: oklch(0.899 0.051 68.1);
}
.element {
color: var(--porcelain-peach);
background-color: hsl(31 75% 85%);
border-color: oklch(0.899 0.051 68.1);
}Tailwind CSS v4
@theme {
--color-porcelain-peach: #f5d8ba;
--color-porcelain-peach-50: #fff3e6;
--color-porcelain-peach-100: #f3e5d6;
--color-porcelain-peach-200: #e3d1bd;
--color-porcelain-peach-300: #c9b39c;
--color-porcelain-peach-400: #b3997e;
--color-porcelain-peach-500: #9d8061;
--color-porcelain-peach-600: #856d53;
--color-porcelain-peach-700: #6a5742;
--color-porcelain-peach-800: #4f3f2f;
--color-porcelain-peach-900: #372b20;
--color-porcelain-peach-950: #221910;
}SCSS
$porcelain-peach: #f5d8ba;
$porcelain-peach-rgb: 245, 216, 186;
$porcelain-peach-light: mix(#fff, $porcelain-peach, 20%);
$porcelain-peach-dark: mix(#000, $porcelain-peach, 20%);
.element {
color: $porcelain-peach;
box-shadow: 0 0 0 2px rgba($porcelain-peach, 0.35);
}