最接近的命名颜色 · #FFD2C5
#FFD2C5
最接近的命名颜色: Piggy Bank
#FFD2C5（rgb(255 210 197)、hsl(13 100% 89%)、oklch(0.899 0.054 36.7)）最接近命名颜色 Piggy Bank。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
#FFD2C5
oklch(0.899 0.054 36.7)
颜色转换
- 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%)
浅色调 · 深色调 · 灰色调
浅色调
- FFD7CB
- FFDBD1
- FFE0D6
- FFE4DC
- FFE9E2
- FFEDE8
- FFF2ED
- FFF6F3
- FFFBF9
深色调
- DEB6AB
- BE9B92
- 9E8179
- 806861
- 63504B
- 483935
- 2E2421
- 16100E
- 030202
灰色调
- F2CABE
- E5C1B7
- D8B9B0
- CBB0A9
- BEA8A2
- B1A09B
- A59894
- 98908D
- 8C8887
配色和谐
互补色 +180°
- FFD2C5
Piggy Bank
- B6E7F5
≈ Breaking the Ice
类似色 -30° +30°
- FFD2C5
Piggy Bank
- FFD0D8
≈ Love Fumes
- F7D7B8
≈ Porcelain Peach
三角配色 +120° +240°
- FFD2C5
Piggy Bank
- C2E9CF
≈ Lost Lace
- D5DCFF
≈ Icy Plains
分裂互补色 +150° +210°
- FFD2C5
Piggy Bank
- B6EAE3
≈ Tahitian Breeze
- C3E2FF
≈ Dithered Sky
四角配色 +90° +180° +270°
对比度与无障碍
Ag
Fail白底
WCAG 1.37:1 · APCA Lc 18
Ag
AAA黑底
WCAG 15.27:1 · APCA Lc 85
最佳文字颜色: #000000
WCAG 15.27:1 (AAA) · APCA Lc 85
Contrast pairs
代码片段
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);
}