命名颜色 · #BFB9A3
Tidal Foam
Tidal Foam 即 #BFB9A3：rgb(191 185 163)、hsl(47 18% 69%)、oklch(0.785 0.031 94.4)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Gray mean? → · Tidal Foam color name →
#BFB9A3
oklch(0.785 0.031 94.4)
颜色转换
- HEX
- #bfb9a3
- RGB
- rgb(191 185 163)
- HSL
- hsl(47 18% 69%)
- HWB
- hwb(47 64% 25%)
- OKLCH
- oklch(0.785 0.031 94.4)
- OKLab
- oklab(0.785 -0.002 0.031)
- CIE Lab
- lab(75.2 -0.59 12.01)
- LCH
- lch(75.2 12.03 92.8)
- CMYK
- cmyk(0% 3% 15% 25%)
浅色调 · 深色调 · 灰色调
浅色调
- C5C0AC
- CCC7B5
- D2CEBE
- D8D5C7
- DFDCD0
- E5E3DA
- EBEAE3
- F2F1EC
- F8F8F6
深色调
- A6A08D
- 8D8978
- 757163
- 5E5B4F
- 48463C
- 33312A
- 1F1E19
- 0D0D0A
- 020201
灰色调
- B8B39F
- B2AD9C
- ACA898
- A5A295
- 9F9C91
- 99968E
- 92918A
- 8C8B87
- 868683
配色和谐
互补色 +180°
- BFB9A3
Tidal Foam
- B2B8CD
≈ Ethereal Mist
类似色 -30° +30°
- BFB9A3
Tidal Foam
- C7B5A5
≈ Cool Beige
- B4BDA7
≈ Unroasted Coffee
三角配色 +120° +240°
- BFB9A3
Tidal Foam
- A3BEC5
≈ Clear Vista
- C6B2C1
≈ Maverick
分裂互补色 +150° +210°
- BFB9A3
Tidal Foam
- A9BCCC
≈ Glacier Mist
- BDB4C9
≈ Decency
四角配色 +90° +180° +270°
- BFB9A3
Tidal Foam
- A4C0BB
≈ Botanical Bliss
- B2B8CD
≈ Ethereal Mist
- CBB1B6
≈ Izmir Pink
对比度与无障碍
Ag
Fail白底
WCAG 1.96:1 · APCA Lc 38
Ag
AAA黑底
WCAG 10.68:1 · APCA Lc 65
最佳文字颜色: #000000
WCAG 10.68:1 (AAA) · APCA Lc 65
Contrast pairs
代码片段
CSS
:root {
--tidal-foam: #bfb9a3;
--tidal-foam-rgb: 191 185 163;
--tidal-foam-oklch: oklch(0.785 0.031 94.4);
}
.element {
color: var(--tidal-foam);
background-color: hsl(47 18% 69%);
border-color: oklch(0.785 0.031 94.4);
}Tailwind CSS v4
@theme {
--color-tidal-foam: #bfb9a3;
--color-tidal-foam-50: #f7f5eb;
--color-tidal-foam-100: #ebe8dd;
--color-tidal-foam-200: #d8d4c6;
--color-tidal-foam-300: #bcb8a6;
--color-tidal-foam-400: #a49f8a;
--color-tidal-foam-500: #8d866f;
--color-tidal-foam-600: #77725e;
--color-tidal-foam-700: #5f5b4b;
--color-tidal-foam-800: #464236;
--color-tidal-foam-900: #302e25;
--color-tidal-foam-950: #1d1a14;
}SCSS
$tidal-foam: #bfb9a3;
$tidal-foam-rgb: 191, 185, 163;
$tidal-foam-light: mix(#fff, $tidal-foam, 20%);
$tidal-foam-dark: mix(#000, $tidal-foam, 20%);
.element {
color: $tidal-foam;
box-shadow: 0 0 0 2px rgba($tidal-foam, 0.35);
}