En yakın adlandırılmış renk · #9D6037
#9D6037
En yakın adlandırılmış renk: Gingerbread Crumble
#9D6037 (rgb(157 96 55), hsl(24 48% 42%), oklch(0.548 0.097 53.2)) en çok Gingerbread Crumble adlı renge yakındır. Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
#9D6037
oklch(0.548 0.097 53.2)
Renk dönüşümleri
- HEX
- #9d6037
- RGB
- rgb(157 96 55)
- HSL
- hsl(24 48% 42%)
- HWB
- hwb(24 22% 38%)
- OKLCH
- oklch(0.548 0.097 53.2)
- OKLab
- oklab(0.548 0.058 0.078)
- CIE Lab
- lab(47.13 22.64 33.95)
- LCH
- lch(47.13 40.8 56.3)
- CMYK
- cmyk(0% 39% 65% 38%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- A76F4B
- B27F5F
- BC8E72
- C69E86
- CFAE99
- D9BEAD
- E3CEC1
- ECDED6
- F6EEEA
Koyu tonlar
- 88522E
- 734526
- 5F381E
- 4C2C16
- 3A200F
- 281508
- 180A03
- 090301
- 010000
Gri tonlar
- 9B6440
- 986748
- 966B4F
- 936E57
- 90715E
- 8D7465
- 8A776C
- 877A73
- 847D79
Renk uyumları
Tamamlayıcı +180°
- 9D6037
Gingerbread Crumble
- 287AA1
≈ In the Mood
Analog -30° +30°
- 9D6037
Gingerbread Crumble
- A25956
≈ Cheek Red
- 8C6B23
≈ Sassy Olive
Üçlü +120° +240°
- 9D6037
Gingerbread Crumble
- 1C836C
≈ Viridis
- 7466A5
≈ Reign Over Me
Bölünmüş tamamlayıcı +150° +210°
- 9D6037
Gingerbread Crumble
- 008189
≈ Go Alpha
- 5370AA
≈ Plunder
Dörtlü +90° +180° +270°
- 9D6037
Gingerbread Crumble
- 4D804B
≈ Tarmac Green
- 287AA1
≈ In the Mood
- 8C5D92
≈ Chakra
Kontrast ve erişilebilirlik
Ag
AABeyaz üzerinde
WCAG 5.04:1 · APCA Lc 75
Ag
FailSiyah üzerinde
WCAG 4.16:1 · APCA Lc 27
En iyi metin rengi: #FFFFFF
WCAG 5.04:1 (AA) · APCA Lc 75
Contrast pairs
Kod parçacıkları
CSS
:root {
--gingerbread-crumble: #9d6037;
--gingerbread-crumble-rgb: 157 96 55;
--gingerbread-crumble-oklch: oklch(0.548 0.097 53.2);
}
.element {
color: var(--gingerbread-crumble);
background-color: hsl(24 48% 42%);
border-color: oklch(0.548 0.097 53.2);
}Tailwind CSS v4
@theme {
--color-gingerbread-crumble: #9d6037;
--color-gingerbread-crumble-50: #ffefdb;
--color-gingerbread-crumble-100: #ffe0ca;
--color-gingerbread-crumble-200: #f6caad;
--color-gingerbread-crumble-300: #dfab88;
--color-gingerbread-crumble-400: #cc8e67;
--color-gingerbread-crumble-500: #b87345;
--color-gingerbread-crumble-600: #9c623b;
--color-gingerbread-crumble-700: #7d4e2f;
--color-gingerbread-crumble-800: #5d3822;
--color-gingerbread-crumble-900: #412616;
--color-gingerbread-crumble-950: #2a1407;
}SCSS
$gingerbread-crumble: #9d6037;
$gingerbread-crumble-rgb: 157, 96, 55;
$gingerbread-crumble-light: mix(#fff, $gingerbread-crumble, 20%);
$gingerbread-crumble-dark: mix(#000, $gingerbread-crumble, 20%);
.element {
color: $gingerbread-crumble;
box-shadow: 0 0 0 2px rgba($gingerbread-crumble, 0.35);
}