命名颜色 · #BB8D4E
Barista’s Favourite
Barista’s Favourite 即 #BB8D4E：rgb(187 141 78)、hsl(35 44% 52%)、oklch(0.674 0.098 73.5)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Orange mean? → · Barista’s Favourite color name →
#BB8D4E
oklch(0.674 0.098 73.5)
颜色转换
- HEX
- #bb8d4e
- RGB
- rgb(187 141 78)
- HSL
- hsl(35 44% 52%)
- HWB
- hwb(35 31% 27%)
- OKLCH
- oklch(0.674 0.098 73.5)
- OKLab
- oklab(0.674 0.028 0.094)
- CIE Lab
- lab(62.18 12.82 40.24)
- LCH
- lch(62.18 42.23 72.3)
- CMYK
- cmyk(0% 25% 58% 27%)
浅色调 · 深色调 · 灰色调
浅色调
- C29861
- C9A373
- D0AF84
- D7BA96
- DEC5A7
- E4D1B9
- EBDCCA
- F2E8DC
- F8F3ED
深色调
- A27A43
- 8A6738
- 73552D
- 5C4423
- 463319
- 32230F
- 1F1407
- 0D0702
- 020100
灰色调
- B58C55
- AF8B5B
- A98A60
- A48866
- 9E876B
- 98866F
- 928574
- 8C8378
- 86827C
配色和谐
互补色 +180°
- BB8D4E
Barista’s Favourite
- 6B9AD2
≈ Sea Loch
类似色 -30° +30°
- BB8D4E
Barista’s Favourite
- C98264
≈ Clove Bud
- A1994E
≈ Formosan Green
三角配色 +120° +240°
- BB8D4E
Barista’s Favourite
- 3BA9A8
≈ Tidal Teal
- AC84C1
≈ African Violet
分裂互补色 +150° +210°
- BB8D4E
Barista’s Favourite
- 47A4C3
≈ Oasis Spring
- 8F8ED1
≈ Adora
四角配色 +90° +180° +270°
- BB8D4E
Barista’s Favourite
- 57AA86
≈ Julep
- 6B9AD2
≈ Sea Loch
- C17EA6
≈ Romanov Mauve
对比度与无障碍
Ag
Fail白底
WCAG 2.98:1 · APCA Lc 56
Ag
AAA黑底
WCAG 7.03:1 · APCA Lc 45
最佳文字颜色: #000000
WCAG 7.03:1 (AAA) · APCA Lc 45
Contrast pairs
代码片段
CSS
:root {
--barista-s-favourite: #bb8d4e;
--barista-s-favourite-rgb: 187 141 78;
--barista-s-favourite-oklch: oklch(0.674 0.098 73.5);
}
.element {
color: var(--barista-s-favourite);
background-color: hsl(35 44% 52%);
border-color: oklch(0.674 0.098 73.5);
}Tailwind CSS v4
@theme {
--color-barista-s-favourite: #bb8d4e;
--color-barista-s-favourite-50: #fff2d7;
--color-barista-s-favourite-100: #fbe4c4;
--color-barista-s-favourite-200: #edcfa6;
--color-barista-s-favourite-300: #d5b17e;
--color-barista-s-favourite-400: #c1955a;
--color-barista-s-favourite-500: #ad7b32;
--color-barista-s-favourite-600: #92682c;
--color-barista-s-favourite-700: #755323;
--color-barista-s-favourite-800: #573c18;
--color-barista-s-favourite-900: #3d290f;
--color-barista-s-favourite-950: #261703;
}SCSS
$barista-s-favourite: #bb8d4e;
$barista-s-favourite-rgb: 187, 141, 78;
$barista-s-favourite-light: mix(#fff, $barista-s-favourite, 20%);
$barista-s-favourite-dark: mix(#000, $barista-s-favourite, 20%);
.element {
color: $barista-s-favourite;
box-shadow: 0 0 0 2px rgba($barista-s-favourite, 0.35);
}