Named color · #B1BEA8
Unroasted Coffee
Unroasted Coffee is #B1BEA8: rgb(177 190 168), hsl(95 14% 70%), oklch(0.785 0.034 132.4). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Gray mean? → · Unroasted Coffee color name →
#B1BEA8
oklch(0.785 0.034 132.4)
Color conversions
- HEX
- #b1bea8
- RGB
- rgb(177 190 168)
- HSL
- hsl(95 14% 70%)
- HWB
- hwb(95 66% 25%)
- OKLCH
- oklch(0.785 0.034 132.4)
- OKLab
- oklab(0.785 -0.023 0.025)
- CIE Lab
- lab(75.49 -7.68 9.55)
- LCH
- lch(75.49 12.25 128.8)
- CMYK
- cmyk(7% 0% 12% 25%)
Tints · Shades · Tones
Tints
- B9C4B0
- C0CBB9
- C8D1C2
- D0D8CA
- D7DED3
- DFE5DC
- E7EBE4
- EFF2ED
- F7F8F6
Shades
- 99A592
- 838C7C
- 6C7567
- 575E52
- 42483F
- 2F332C
- 1C1F1A
- 0C0D0A
- 010201
Tones
- ACB8A4
- A7B1A0
- A2AB9C
- 9DA598
- 989E94
- 939890
- 8E928C
- 8A8C88
- 858684
Color harmonies
Complementary +180°
- B1BEA8
Unroasted Coffee
- C0B3C9
≈ Orchid Petal
Analogous -30° +30°
- B1BEA8
Unroasted Coffee
- BDBAA2
≈ Heavy Hammock
- A7C0B3
≈ Folk Tales
Triadic +120° +240°
- B1BEA8
Unroasted Coffee
- AABBCF
≈ Wood Pigeon
- CEB1B3
≈ Izmir Pink
Split-complementary +150° +210°
- B1BEA8
Unroasted Coffee
- B5B7CF
≈ Madder Blue
- C9B1BF
≈ Maverick
Tetradic +90° +180° +270°
- B1BEA8
Unroasted Coffee
- A3BEC9
≈ Juliet Blue
- C0B3C9
≈ Orchid Petal
- CDB3A8
≈ Cosmic Aura
Contrast & accessibility
Ag
FailOn white
WCAG 1.94:1 · APCA Lc 37
Ag
AAAOn black
WCAG 10.80:1 · APCA Lc 65
Best text color: #000000
WCAG 10.80:1 (AAA) · APCA Lc 65
Contrast pairs
Code snippets
CSS
:root {
--unroasted-coffee: #b1bea8;
--unroasted-coffee-rgb: 177 190 168;
--unroasted-coffee-oklch: oklch(0.785 0.034 132.4);
}
.element {
color: var(--unroasted-coffee);
background-color: hsl(95 14% 70%);
border-color: oklch(0.785 0.034 132.4);
}Tailwind CSS v4
@theme {
--color-unroasted-coffee: #b1bea8;
--color-unroasted-coffee-50: #f1f7ee;
--color-unroasted-coffee-100: #e3ebdf;
--color-unroasted-coffee-200: #ced8c9;
--color-unroasted-coffee-300: #b0bbaa;
--color-unroasted-coffee-400: #97a38f;
--color-unroasted-coffee-500: #7e8b74;
--color-unroasted-coffee-600: #6b7663;
--color-unroasted-coffee-700: #555e4f;
--color-unroasted-coffee-800: #3e4539;
--color-unroasted-coffee-900: #2b3027;
--color-unroasted-coffee-950: #181c15;
}SCSS
$unroasted-coffee: #b1bea8;
$unroasted-coffee-rgb: 177, 190, 168;
$unroasted-coffee-light: mix(#fff, $unroasted-coffee, 20%);
$unroasted-coffee-dark: mix(#000, $unroasted-coffee, 20%);
.element {
color: $unroasted-coffee;
box-shadow: 0 0 0 2px rgba($unroasted-coffee, 0.35);
}