Couleur nommée · #BB8D4E
Barista’s Favourite
Barista’s Favourite correspond à #BB8D4E : rgb(187 141 78), hsl(35 44% 52%), oklch(0.674 0.098 73.5). Teintes, ombres, harmonies, contraste WCAG et APCA, et code CSS, Tailwind v4 et SCSS.
What does Orange mean? → · Barista’s Favourite color name →
#BB8D4E
oklch(0.674 0.098 73.5)
Conversions de couleur
- 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%)
Teintes · Ombres · Tons
Teintes
- C29861
- C9A373
- D0AF84
- D7BA96
- DEC5A7
- E4D1B9
- EBDCCA
- F2E8DC
- F8F3ED
Ombres
- A27A43
- 8A6738
- 73552D
- 5C4423
- 463319
- 32230F
- 1F1407
- 0D0702
- 020100
Tons
- B58C55
- AF8B5B
- A98A60
- A48866
- 9E876B
- 98866F
- 928574
- 8C8378
- 86827C
Harmonies de couleurs
Complémentaire +180°
- BB8D4E
Barista’s Favourite
- 6B9AD2
≈ Sea Loch
Analogue -30° +30°
- BB8D4E
Barista’s Favourite
- C98264
≈ Clove Bud
- A1994E
≈ Formosan Green
Triadique +120° +240°
- BB8D4E
Barista’s Favourite
- 3BA9A8
≈ Tidal Teal
- AC84C1
≈ African Violet
Complémentaire divisée +150° +210°
- BB8D4E
Barista’s Favourite
- 47A4C3
≈ Oasis Spring
- 8F8ED1
≈ Adora
Tétradique +90° +180° +270°
- BB8D4E
Barista’s Favourite
- 57AA86
≈ Julep
- 6B9AD2
≈ Sea Loch
- C17EA6
≈ Romanov Mauve
Contraste et accessibilité
Ag
FailSur blanc
WCAG 2.98:1 · APCA Lc 56
Ag
AAASur noir
WCAG 7.03:1 · APCA Lc 45
Meilleure couleur de texte: #000000
WCAG 7.03:1 (AAA) · APCA Lc 45
Contrast pairs
Extraits de code
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);
}