最接近的命名颜色 · #F8F0E6
#F8F0E6
最接近的命名颜色: Magnolia Petal
#F8F0E6（rgb(248 240 230)、hsl(33 56% 94%)、oklch(0.959 0.016 73.7)）最接近命名颜色 Magnolia Petal。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
#F8F0E6
oklch(0.959 0.016 73.7)
颜色转换
- HEX
- #f8f0e6
- RGB
- rgb(248 240 230)
- HSL
- hsl(33 56% 94%)
- HWB
- hwb(33 90% 3%)
- OKLCH
- oklch(0.959 0.016 73.7)
- OKLab
- oklab(0.959 0.004 0.015)
- CIE Lab
- lab(95.22 1.52 5.85)
- LCH
- lch(95.22 6.05 75.4)
- CMYK
- cmyk(0% 3% 7% 3%)
浅色调 · 深色调 · 灰色调
浅色调
- F9F1E8
- F9F3EB
- FAF4ED
- FBF6F0
- FCF7F2
- FCF9F5
- FDFAF7
- FEFCFA
- FEFDFC
深色调
- D8D1C8
- B8B2AB
- 9A958E
- 7C7873
- 605D59
- 454340
- 2C2A28
- 151413
- 030303
灰色调
- EBE4DB
- DFD9D1
- D3CDC6
- C6C2BC
- BAB6B2
- AEABA8
- A2A09D
- 979594
- 8B8B8A
配色和谐
互补色 +180°
- F8F0E6
Magnolia Petal
- EAF2FC
≈ Moon White
类似色 -30° +30°
- F8F0E6
Magnolia Petal
- FBEEE9
≈ Rose White
- F3F2E6
≈ Magnolia Spring
三角配色 +120° +240°
- F8F0E6
Magnolia Petal
- E6F5F4
≈ Milky Way
- F5EEF9
≈ Sentimental Pink
分裂互补色 +150° +210°
- F8F0E6
Magnolia Petal
- E7F4F9
≈ Milky Way
- F0F0FC
≈ Foundation White
四角配色 +90° +180° +270°
- F8F0E6
Magnolia Petal
- E8F5EE
≈ Shiroi White
- EAF2FC
≈ Moon White
- FAEDF4
≈ Sentimental Pink
对比度与无障碍
Ag
Fail白底
WCAG 1.12:1 · APCA Lc 0
Ag
AAA黑底
WCAG 18.59:1 · APCA Lc 99
最佳文字颜色: #000000
WCAG 18.59:1 (AAA) · APCA Lc 99
Contrast pairs
代码片段
CSS
:root {
--magnolia-petal: #f8f0e6;
--magnolia-petal-rgb: 248 240 230;
--magnolia-petal-oklch: oklch(0.959 0.016 73.7);
}
.element {
color: var(--magnolia-petal);
background-color: hsl(33 56% 94%);
border-color: oklch(0.959 0.016 73.7);
}Tailwind CSS v4
@theme {
--color-magnolia-petal: #f8f0e6;
--color-magnolia-petal-50: #f8f5f0;
--color-magnolia-petal-100: #ebe7e2;
--color-magnolia-petal-200: #d8d3cd;
--color-magnolia-petal-300: #bcb6af;
--color-magnolia-petal-400: #a49d94;
--color-magnolia-petal-500: #8d857b;
--color-magnolia-petal-600: #777068;
--color-magnolia-petal-700: #5f5a53;
--color-magnolia-petal-800: #46423c;
--color-magnolia-petal-900: #302d2a;
--color-magnolia-petal-950: #1d1a17;
}SCSS
$magnolia-petal: #f8f0e6;
$magnolia-petal-rgb: 248, 240, 230;
$magnolia-petal-light: mix(#fff, $magnolia-petal, 20%);
$magnolia-petal-dark: mix(#000, $magnolia-petal, 20%);
.element {
color: $magnolia-petal;
box-shadow: 0 0 0 2px rgba($magnolia-petal, 0.35);
}