Adlandırılmış renk · #B1B48C
Sumptuous Sage
Sumptuous Sage, #B1B48C: rgb(177 180 140), hsl(65 21% 63%), oklch(0.757 0.055 111.2). Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
What does Yellow mean? → · Sumptuous Sage color name →
#B1B48C
oklch(0.757 0.055 111.2)
Renk dönüşümleri
- HEX
- #b1b48c
- RGB
- rgb(177 180 140)
- HSL
- hsl(65 21% 63%)
- HWB
- hwb(65 55% 29%)
- OKLCH
- oklch(0.757 0.055 111.2)
- OKLab
- oklab(0.757 -0.02 0.051)
- CIE Lab
- lab(72.29 -6.11 20.13)
- LCH
- lch(72.29 21.04 106.9)
- CMYK
- cmyk(2% 0% 22% 29%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- B9BB97
- C0C3A3
- C8CAAE
- CFD2B9
- D7D9C5
- DFE1D0
- E7E8DC
- EFF0E7
- F7F7F3
Koyu tonlar
- 999C79
- 838567
- 6C6E55
- 575843
- 424433
- 2F3023
- 1C1D14
- 0C0C07
- 010201
Gri tonlar
- ACAF8B
- A7A98A
- A2A489
- 9D9F88
- 989A87
- 939585
- 8E8F84
- 8A8A83
- 858581
Renk uyumları
Tamamlayıcı +180°
- B1B48C
Sumptuous Sage
- B0ABD1
≈ Monastic
Analog -30° +30°
- B1B48C
Sumptuous Sage
- C2AD89
≈ Oat Field
- 9EB999
≈ Quiet Green
Üçlü +120° +240°
- B1B48C
Sumptuous Sage
- 8DB7CD
≈ Moon Jellyfish
- CDA2B4
≈ Raspberry Smoothie
Bölünmüş tamamlayıcı +150° +210°
- B1B48C
Sumptuous Sage
- 9DB1D4
≈ Heartsong
- C1A5C6
≈ Novel Lilac
Dörtlü +90° +180° +270°
- B1B48C
Sumptuous Sage
- 87BBBF
≈ Misty Cold Sea
- B0ABD1
≈ Monastic
- D1A3A1
≈ Ruby Eye
Kontrast ve erişilebilirlik
Ag
FailBeyaz üzerinde
WCAG 2.14:1 · APCA Lc 42
Ag
AAASiyah üzerinde
WCAG 9.77:1 · APCA Lc 60
En iyi metin rengi: #000000
WCAG 9.77:1 (AAA) · APCA Lc 60
Contrast pairs
Kod parçacıkları
CSS
:root {
--sumptuous-sage: #b1b48c;
--sumptuous-sage-rgb: 177 180 140;
--sumptuous-sage-oklch: oklch(0.757 0.055 111.2);
}
.element {
color: var(--sumptuous-sage);
background-color: hsl(65 21% 63%);
border-color: oklch(0.757 0.055 111.2);
}Tailwind CSS v4
@theme {
--color-sumptuous-sage: #b1b48c;
--color-sumptuous-sage-50: #f5f7e6;
--color-sumptuous-sage-100: #e7ead6;
--color-sumptuous-sage-200: #d4d7bd;
--color-sumptuous-sage-300: #b7bb9b;
--color-sumptuous-sage-400: #9fa27d;
--color-sumptuous-sage-500: #878a5f;
--color-sumptuous-sage-600: #727551;
--color-sumptuous-sage-700: #5b5d41;
--color-sumptuous-sage-800: #44442e;
--color-sumptuous-sage-900: #2f2f1f;
--color-sumptuous-sage-950: #1b1c0f;
}SCSS
$sumptuous-sage: #b1b48c;
$sumptuous-sage-rgb: 177, 180, 140;
$sumptuous-sage-light: mix(#fff, $sumptuous-sage, 20%);
$sumptuous-sage-dark: mix(#000, $sumptuous-sage, 20%);
.element {
color: $sumptuous-sage;
box-shadow: 0 0 0 2px rgba($sumptuous-sage, 0.35);
}