Nearest named color · #FFD2C5
#FFD2C5
Nearest named color: Piggy Bank
#FFD2C5 (rgb(255 210 197), hsl(13 100% 89%), oklch(0.899 0.054 36.7)) is closest to the named color Piggy Bank. See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
#FFD2C5
oklch(0.899 0.054 36.7)
Color conversions
- HEX
- #ffd2c5
- RGB
- rgb(255 210 197)
- HSL
- hsl(13 100% 89%)
- HWB
- hwb(13 77% 0%)
- OKLCH
- oklch(0.899 0.054 36.7)
- OKLab
- oklab(0.899 0.043 0.032)
- CIE Lab
- lab(87.89 14.9 12.72)
- LCH
- lch(87.89 19.59 40.5)
- CMYK
- cmyk(0% 18% 23% 0%)
Tints · Shades · Tones
Tints
- FFD7CB
- FFDBD1
- FFE0D6
- FFE4DC
- FFE9E2
- FFEDE8
- FFF2ED
- FFF6F3
- FFFBF9
Shades
- DEB6AB
- BE9B92
- 9E8179
- 806861
- 63504B
- 483935
- 2E2421
- 16100E
- 030202
Tones
- F2CABE
- E5C1B7
- D8B9B0
- CBB0A9
- BEA8A2
- B1A09B
- A59894
- 98908D
- 8C8887
Color harmonies
Complementary +180°
- FFD2C5
Piggy Bank
- B6E7F5
≈ Breaking the Ice
Analogous -30° +30°
- FFD2C5
Piggy Bank
- FFD0D8
≈ Love Fumes
- F7D7B8
≈ Porcelain Peach
Triadic +120° +240°
- FFD2C5
Piggy Bank
- C2E9CF
≈ Lost Lace
- D5DCFF
≈ Icy Plains
Split-complementary +150° +210°
- FFD2C5
Piggy Bank
- B6EAE3
≈ Tahitian Breeze
- C3E2FF
≈ Dithered Sky
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
FailOn white
WCAG 1.37:1 · APCA Lc 18
Ag
AAAOn black
WCAG 15.27:1 · APCA Lc 85
Best text color: #000000
WCAG 15.27:1 (AAA) · APCA Lc 85
Contrast pairs
Code snippets
CSS
:root {
--piggy-bank: #ffd2c5;
--piggy-bank-rgb: 255 210 197;
--piggy-bank-oklch: oklch(0.899 0.054 36.7);
}
.element {
color: var(--piggy-bank);
background-color: hsl(13 100% 89%);
border-color: oklch(0.899 0.054 36.7);
}Tailwind CSS v4
@theme {
--color-piggy-bank: #ffd2c5;
--color-piggy-bank-50: #fff0ea;
--color-piggy-bank-100: #f9e2db;
--color-piggy-bank-200: #eacdc4;
--color-piggy-bank-300: #d1afa3;
--color-piggy-bank-400: #bc9488;
--color-piggy-bank-500: #a67a6d;
--color-piggy-bank-600: #8d675d;
--color-piggy-bank-700: #71534a;
--color-piggy-bank-800: #533c36;
--color-piggy-bank-900: #3a2925;
--color-piggy-bank-950: #241713;
}SCSS
$piggy-bank: #ffd2c5;
$piggy-bank-rgb: 255, 210, 197;
$piggy-bank-light: mix(#fff, $piggy-bank, 20%);
$piggy-bank-dark: mix(#000, $piggy-bank, 20%);
.element {
color: $piggy-bank;
box-shadow: 0 0 0 2px rgba($piggy-bank, 0.35);
}