命名颜色 · #F4EABA
Yellow Bliss
Yellow Bliss 即 #F4EABA：rgb(244 234 186)、hsl(50 73% 84%)、oklch(0.933 0.063 97.6)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Yellow mean? → · Yellow Bliss color name →
#F4EABA
oklch(0.933 0.063 97.6)
颜色转换
- HEX
- #f4eaba
- RGB
- rgb(244 234 186)
- HSL
- hsl(50 73% 84%)
- HWB
- hwb(50 73% 4%)
- OKLCH
- oklch(0.933 0.063 97.6)
- OKLab
- oklab(0.933 -0.008 0.063)
- CIE Lab
- lab(92.61 -1.97 24.7)
- LCH
- lch(92.61 24.78 94.6)
- CMYK
- cmyk(0% 4% 24% 4%)
浅色调 · 深色调 · 灰色调
浅色调
- F5ECC1
- F6EEC8
- F7F0CF
- F8F3D6
- F9F5DD
- FBF7E4
- FCF9EB
- FDFBF1
- FEFDF8
深色调
- D4CBA1
- B5AE89
- 979172
- 7A755C
- 5E5A46
- 444132
- 2B291E
- 14130D
- 030302
灰色调
- E8DFB4
- DCD4AF
- D0C9A9
- C4BEA3
- B8B49D
- ADA997
- A19F92
- 96948C
- 8B8A86
配色和谐
互补色 +180°
- F4EABA
Yellow Bliss
- E3E7FF
≈ Cyber Lavender
类似色 -30° +30°
- F4EABA
Yellow Bliss
- FFE4C8
≈ Apple Crunch
- DDF2C5
≈ Green Veil
三角配色 +120° +240°
- F4EABA
Yellow Bliss
- C5F2FF
≈ Heaven’s Gate
- FFDDF4
≈ Silky Pink
分裂互补色 +150° +210°
- F4EABA
Yellow Bliss
- D8ECFF
≈ Hoarfrost
- F0E2FF
≈ Lavender Savour
四角配色 +90° +180° +270°
- F4EABA
Yellow Bliss
- B9F7F0
≈ Ice Citadel
- E3E7FF
≈ Cyber Lavender
- FFE0E4
≈ Pink Pleasure
对比度与无障碍
Ag
Fail白底
WCAG 1.21:1 · APCA Lc 10
Ag
AAA黑底
WCAG 17.32:1 · APCA Lc 94
最佳文字颜色: #000000
WCAG 17.32:1 (AAA) · APCA Lc 94
Contrast pairs
代码片段
CSS
:root {
--yellow-bliss: #f4eaba;
--yellow-bliss-rgb: 244 234 186;
--yellow-bliss-oklch: oklch(0.933 0.063 97.6);
}
.element {
color: var(--yellow-bliss);
background-color: hsl(50 73% 84%);
border-color: oklch(0.933 0.063 97.6);
}Tailwind CSS v4
@theme {
--color-yellow-bliss: #f4eaba;
--color-yellow-bliss-50: #f9f6e2;
--color-yellow-bliss-100: #ede9d1;
--color-yellow-bliss-200: #dad5b7;
--color-yellow-bliss-300: #bfb994;
--color-yellow-bliss-400: #a89f74;
--color-yellow-bliss-500: #918755;
--color-yellow-bliss-600: #7b7249;
--color-yellow-bliss-700: #625b3a;
--color-yellow-bliss-800: #494229;
--color-yellow-bliss-900: #332e1b;
--color-yellow-bliss-950: #1e1b0c;
}SCSS
$yellow-bliss: #f4eaba;
$yellow-bliss-rgb: 244, 234, 186;
$yellow-bliss-light: mix(#fff, $yellow-bliss, 20%);
$yellow-bliss-dark: mix(#000, $yellow-bliss, 20%);
.element {
color: $yellow-bliss;
box-shadow: 0 0 0 2px rgba($yellow-bliss, 0.35);
}