Adlandırılmış renk · #B4AE95
Soothing Sage
Soothing Sage, #B4AE95: rgb(180 174 149), hsl(48 17% 65%), oklch(0.749 0.035 96). Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
What does Yellow mean? → · Soothing Sage color name →
#B4AE95
oklch(0.749 0.035 96)
Renk dönüşümleri
- HEX
- #b4ae95
- RGB
- rgb(180 174 149)
- HSL
- hsl(48 17% 65%)
- HWB
- hwb(48 58% 29%)
- OKLCH
- oklch(0.749 0.035 96)
- OKLab
- oklab(0.749 -0.004 0.035)
- CIE Lab
- lab(71.09 -0.94 13.7)
- LCH
- lch(71.09 13.73 93.9)
- CMYK
- cmyk(0% 3% 17% 29%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- BBB69F
- C3BEAA
- CAC6B4
- D1CEBE
- D9D6C9
- E0DED4
- E8E6DE
- F0EEE9
- F7F7F4
Koyu tonlar
- 9C9781
- 85806D
- 6E6A5A
- 585548
- 444137
- 302E26
- 1D1C16
- 0C0B08
- 020101
Gri tonlar
- AFA993
- A9A591
- A4A08F
- 9F9B8D
- 9A978B
- 949289
- 8F8E86
- 8A8984
- 858582
Renk uyumları
Tamamlayıcı +180°
- B4AE95
Soothing Sage
- A7ACC5
≈ Upscale
Analog -30° +30°
- B4AE95
Soothing Sage
- BEAA97
≈ Western Sandstone
- A8B29A
≈ Banksia
Üçlü +120° +240°
- B4AE95
Soothing Sage
- 95B4BC
≈ Mohair Soft Blue Grey
- BDA6B6
≈ Pansy Posie
Bölünmüş tamamlayıcı +150° +210°
- B4AE95
Soothing Sage
- 9CB0C3
≈ Sterling Silver
- B3A8C0
≈ Transparent Mauve
Dörtlü +90° +180° +270°
- B4AE95
Soothing Sage
- 95B5B1
≈ Lake Forest
- A7ACC5
≈ Upscale
- C2A5AA
≈ Lychee Berry
Kontrast ve erişilebilirlik
Ag
FailBeyaz üzerinde
WCAG 2.22:1 · APCA Lc 44
Ag
AAASiyah üzerinde
WCAG 9.42:1 · APCA Lc 58
En iyi metin rengi: #000000
WCAG 9.42:1 (AAA) · APCA Lc 58
Contrast pairs
Kod parçacıkları
CSS
:root {
--soothing-sage: #b4ae95;
--soothing-sage-rgb: 180 174 149;
--soothing-sage-oklch: oklch(0.749 0.035 96);
}
.element {
color: var(--soothing-sage);
background-color: hsl(48 17% 65%);
border-color: oklch(0.749 0.035 96);
}Tailwind CSS v4
@theme {
--color-soothing-sage: #b4ae95;
--color-soothing-sage-50: #f8f5ea;
--color-soothing-sage-100: #ebe8db;
--color-soothing-sage-200: #d8d5c4;
--color-soothing-sage-300: #bcb8a4;
--color-soothing-sage-400: #a49f87;
--color-soothing-sage-500: #8d866c;
--color-soothing-sage-600: #77725c;
--color-soothing-sage-700: #5f5b49;
--color-soothing-sage-800: #464235;
--color-soothing-sage-900: #312e24;
--color-soothing-sage-950: #1d1b13;
}SCSS
$soothing-sage: #b4ae95;
$soothing-sage-rgb: 180, 174, 149;
$soothing-sage-light: mix(#fff, $soothing-sage, 20%);
$soothing-sage-dark: mix(#000, $soothing-sage, 20%);
.element {
color: $soothing-sage;
box-shadow: 0 0 0 2px rgba($soothing-sage, 0.35);
}