Nazwany kolor · #BCAC9F
Teddy’s Taupe
Teddy’s Taupe to #BCAC9F: rgb(188 172 159), hsl(27 18% 68%), oklch(0.754 0.026 61.5). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Gray mean? → · Teddy’s Taupe color name →
#BCAC9F
oklch(0.754 0.026 61.5)
Konwersje koloru
- HEX
- #bcac9f
- RGB
- rgb(188 172 159)
- HSL
- hsl(27 18% 68%)
- HWB
- hwb(27 62% 26%)
- OKLCH
- oklch(0.754 0.026 61.5)
- OKLab
- oklab(0.754 0.012 0.023)
- CIE Lab
- lab(71.46 4.34 8.91)
- LCH
- lch(71.46 9.91 64)
- CMYK
- cmyk(0% 9% 15% 26%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- C3B4A8
- C9BCB2
- D0C4BB
- D6CDC5
- DDD5CE
- E4DDD8
- EBE6E1
- F1EEEB
- F8F6F5
Odcienie ciemniejsze
- A3958A
- 8B7F75
- 736961
- 5D544D
- 47403B
- 322D29
- 1F1B18
- 0D0B09
- 020101
Tony
- B6A89C
- B0A399
- AA9F96
- A49A93
- 9E968F
- 98918C
- 928D89
- 8C8986
- 868483
Harmonie kolorów
Komplementarna +180°
- BCAC9F
Teddy’s Taupe
- A1B2BF
≈ Peace
Analogowa -30° +30°
- BCAC9F
Teddy’s Taupe
- BFAAA5
≈ Embarrassed Shadow
- B5AF9D
≈ Stone Walkway
Triada +120° +240°
- BCAC9F
Teddy’s Taupe
- 9EB5B0
≈ Tropical Bay
- B2ACBE
≈ Wisteria Trellis
Komplementarna rozszczepiona +150° +210°
- BCAC9F
Teddy’s Taupe
- 9DB4B9
≈ Ovation
- A9AFC0
≈ Eclectic
Tetrada +90° +180° +270°
- BCAC9F
Teddy’s Taupe
- A4B4A7
≈ Frosty Green
- A1B2BF
≈ Peace
- BAAAB7
≈ Lola
Kontrast i dostępność
Ag
FailNa bieli
WCAG 2.20:1 · APCA Lc 43
Ag
AAANa czerni
WCAG 9.53:1 · APCA Lc 59
Najlepszy kolor tekstu: #000000
WCAG 9.53:1 (AAA) · APCA Lc 59
Contrast pairs
Fragmenty kodu
CSS
:root {
--teddy-s-taupe: #bcac9f;
--teddy-s-taupe-rgb: 188 172 159;
--teddy-s-taupe-oklch: oklch(0.754 0.026 61.5);
}
.element {
color: var(--teddy-s-taupe);
background-color: hsl(27 18% 68%);
border-color: oklch(0.754 0.026 61.5);
}Tailwind CSS v4
@theme {
--color-teddy-s-taupe: #bcac9f;
--color-teddy-s-taupe-50: #fbf4ee;
--color-teddy-s-taupe-100: #eee6df;
--color-teddy-s-taupe-200: #ddd2c9;
--color-teddy-s-taupe-300: #c1b5aa;
--color-teddy-s-taupe-400: #aa9b8f;
--color-teddy-s-taupe-500: #938375;
--color-teddy-s-taupe-600: #7d6f63;
--color-teddy-s-taupe-700: #64584f;
--color-teddy-s-taupe-800: #49403a;
--color-teddy-s-taupe-900: #332c27;
--color-teddy-s-taupe-950: #1f1916;
}SCSS
$teddy-s-taupe: #bcac9f;
$teddy-s-taupe-rgb: 188, 172, 159;
$teddy-s-taupe-light: mix(#fff, $teddy-s-taupe, 20%);
$teddy-s-taupe-dark: mix(#000, $teddy-s-taupe, 20%);
.element {
color: $teddy-s-taupe;
box-shadow: 0 0 0 2px rgba($teddy-s-taupe, 0.35);
}