命名颜色 · #BDB98F
Back to Nature
Back to Nature 即 #BDB98F：rgb(189 185 143)、hsl(55 26% 65%)、oklch(0.778 0.057 103.1)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Yellow mean? → · Back to Nature color name →
#BDB98F
oklch(0.778 0.057 103.1)
颜色转换
- HEX
- #bdb98f
- RGB
- rgb(189 185 143)
- HSL
- hsl(55 26% 65%)
- HWB
- hwb(55 56% 26%)
- OKLCH
- oklch(0.778 0.057 103.1)
- OKLab
- oklab(0.778 -0.013 0.055)
- CIE Lab
- lab(74.68 -3.58 21.95)
- LCH
- lch(74.68 22.24 99.3)
- CMYK
- cmyk(0% 2% 24% 26%)
浅色调 · 深色调 · 灰色调
浅色调
- C3C09A
- CAC7A5
- D0CEB0
- D7D5BB
- DDDCC6
- E4E3D2
- EBEADD
- F1F1E8
- F8F8F4
深色调
- A4A07C
- 8C8969
- 747157
- 5D5B45
- 474634
- 333124
- 1F1E15
- 0D0D07
- 020201
灰色调
- B7B38E
- B0AD8C
- AAA88B
- A4A28A
- 9E9C88
- 989687
- 929185
- 8C8B83
- 868682
配色和谐
互补色 +180°
- BDB98F
Back to Nature
- B1B3DB
≈ Beloved
类似色 -30° +30°
- BDB98F
Back to Nature
- CEB28F
≈ Moraine
- A9BF9A
≈ Rolling Glen
三角配色 +120° +240°
- BDB98F
Back to Nature
- 8FC0D2
≈ Eastern Sky
- D2A9C0
≈ Heart to Heart
分裂互补色 +150° +210°
- BDB98F
Back to Nature
- 9EBADB
≈ Wings of Pegasus
- C4ADD1
≈ Meadow Thistle
四角配色 +90° +180° +270°
- BDB98F
Back to Nature
- 8CC3C1
≈ Cabana Bay
- B1B3DB
≈ Beloved
- D9A9AC
≈ Silver Pink
对比度与无障碍
Ag
Fail白底
WCAG 2.00:1 · APCA Lc 39
Ag
AAA黑底
WCAG 10.49:1 · APCA Lc 64
最佳文字颜色: #000000
WCAG 10.49:1 (AAA) · APCA Lc 64
Contrast pairs
代码片段
CSS
:root {
--back-to-nature: #bdb98f;
--back-to-nature-rgb: 189 185 143;
--back-to-nature-oklch: oklch(0.778 0.057 103.1);
}
.element {
color: var(--back-to-nature);
background-color: hsl(55 26% 65%);
border-color: oklch(0.778 0.057 103.1);
}Tailwind CSS v4
@theme {
--color-back-to-nature: #bdb98f;
--color-back-to-nature-50: #f7f6e4;
--color-back-to-nature-100: #eae9d4;
--color-back-to-nature-200: #d7d6ba;
--color-back-to-nature-300: #bbba98;
--color-back-to-nature-400: #a4a079;
--color-back-to-nature-500: #8d885c;
--color-back-to-nature-600: #77734e;
--color-back-to-nature-700: #5f5c3e;
--color-back-to-nature-800: #46432c;
--color-back-to-nature-900: #312e1e;
--color-back-to-nature-950: #1d1b0e;
}SCSS
$back-to-nature: #bdb98f;
$back-to-nature-rgb: 189, 185, 143;
$back-to-nature-light: mix(#fff, $back-to-nature, 20%);
$back-to-nature-dark: mix(#000, $back-to-nature, 20%);
.element {
color: $back-to-nature;
box-shadow: 0 0 0 2px rgba($back-to-nature, 0.35);
}