Adlandırılmış renk · #536151
Whispering Oaks
Whispering Oaks, #536151: rgb(83 97 81), hsl(112 9% 35%), oklch(0.476 0.031 141.7). Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
What does Gray mean? → · Whispering Oaks color name →
#536151
oklch(0.476 0.031 141.7)
Renk dönüşümleri
- HEX
- #536151
- RGB
- rgb(83 97 81)
- HSL
- hsl(112 9% 35%)
- HWB
- hwb(112 32% 62%)
- OKLCH
- oklch(0.476 0.031 141.7)
- OKLab
- oklab(0.476 -0.024 0.019)
- CIE Lab
- lab(39.57 -8.16 7.28)
- LCH
- lch(39.57 10.93 138.3)
- CMYK
- cmyk(14% 0% 16% 62%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- 637061
- 737E71
- 838E82
- 949D92
- A5ADA4
- B6BDB5
- C8CDC7
- DADDDA
- ECEEEC
Koyu tonlar
- 475345
- 3B463A
- 30392F
- 252D24
- 1B211A
- 111510
- 080B07
- 020302
- 000000
Gri tonlar
- 576456
- 5C675A
- 606A5F
- 656D63
- 697068
- 6E736D
- 727772
- 777A76
- 7B7D7B
Renk uyumları
Tamamlayıcı +180°
- 536151
Whispering Oaks
- 655767
≈ Olivine Basalt
Analog -30° +30°
- 536151
Whispering Oaks
- 5D5E4B
≈ Fresh Basil
- 4B625A
≈ Vert Pierre
Üçlü +120° +240°
- 536151
Whispering Oaks
- 535D6E
≈ Suede Indigo
- 6D5655
≈ Bourbon Truffle
Bölünmüş tamamlayıcı +150° +210°
- 536151
Whispering Oaks
- 5C5A6D
≈ Shearwater Black
- 6B565E
≈ Mocha Brown
Dörtlü +90° +180° +270°
- 536151
Whispering Oaks
- 4B606B
≈ Blackthorn Blue
- 655767
≈ Olivine Basalt
- 6B584D
≈ Moor Oak Grey
Kontrast ve erişilebilirlik
Ag
AABeyaz üzerinde
WCAG 6.56:1 · APCA Lc 83
Ag
FailSiyah üzerinde
WCAG 3.19:1 · APCA Lc 19
En iyi metin rengi: #FFFFFF
WCAG 6.56:1 (AA) · APCA Lc 83
Contrast pairs
Kod parçacıkları
CSS
:root {
--whispering-oaks: #536151;
--whispering-oaks-rgb: 83 97 81;
--whispering-oaks-oklch: oklch(0.476 0.031 141.7);
}
.element {
color: var(--whispering-oaks);
background-color: hsl(112 9% 35%);
border-color: oklch(0.476 0.031 141.7);
}Tailwind CSS v4
@theme {
--color-whispering-oaks: #536151;
--color-whispering-oaks-50: #f0f8f0;
--color-whispering-oaks-100: #e2ebe1;
--color-whispering-oaks-200: #cdd8cc;
--color-whispering-oaks-300: #aebcae;
--color-whispering-oaks-400: #95a393;
--color-whispering-oaks-500: #7b8c79;
--color-whispering-oaks-600: #687666;
--color-whispering-oaks-700: #535e52;
--color-whispering-oaks-800: #3d453b;
--color-whispering-oaks-900: #2a3028;
--color-whispering-oaks-950: #171c16;
}SCSS
$whispering-oaks: #536151;
$whispering-oaks-rgb: 83, 97, 81;
$whispering-oaks-light: mix(#fff, $whispering-oaks, 20%);
$whispering-oaks-dark: mix(#000, $whispering-oaks, 20%);
.element {
color: $whispering-oaks;
box-shadow: 0 0 0 2px rgba($whispering-oaks, 0.35);
}