Adlandırılmış renk · #C4AA5E
Hedgehog Cactus Yellow Green
Hedgehog Cactus Yellow Green, #C4AA5E: rgb(196 170 94), hsl(45 46% 57%), oklch(0.745 0.101 91). Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
What does Yellow mean? → · Hedgehog Cactus Yellow Green color name →
#C4AA5E
oklch(0.745 0.101 91)
Renk dönüşümleri
- HEX
- #c4aa5e
- RGB
- rgb(196 170 94)
- HSL
- hsl(45 46% 57%)
- HWB
- hwb(45 37% 23%)
- OKLCH
- oklch(0.745 0.101 91)
- OKLab
- oklab(0.745 -0.002 0.101)
- CIE Lab
- lab(70.72 2.67 42.43)
- LCH
- lch(70.72 42.51 86.4)
- CMYK
- cmyk(0% 13% 52% 23%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- CAB26F
- D0BB80
- D5C390
- DBCCA0
- E1D4B0
- E7DDC0
- EDE5D0
- F3EEDF
- F9F6EF
Koyu tonlar
- AA9351
- 917D44
- 786837
- 61532B
- 4A3F1F
- 352D14
- 211B0A
- 0E0B03
- 020100
Gri tonlar
- BDA663
- B6A268
- AF9E6C
- A8996F
- A19573
- 9B9176
- 948D79
- 8D897B
- 87847E
Renk uyumları
Tamamlayıcı +180°
- C4AA5E
Hedgehog Cactus Yellow Green
- 95A9EC
≈ Kitten’s Eye
Analog -30° +30°
- C4AA5E
Hedgehog Cactus Yellow Green
- DB9D69
≈ Coyote
- A3B66C
≈ Around the Gills
Üçlü +120° +240°
- C4AA5E
Hedgehog Cactus Yellow Green
- 53BDD0
≈ Faded Jeans
- D195CA
≈ Ineffable Magenta
Bölünmüş tamamlayıcı +150° +210°
- C4AA5E
Hedgehog Cactus Yellow Green
- 6FB4E6
≈ Xavier Blue
- B79DE2
≈ Violet Velvet
Dörtlü +90° +180° +270°
- C4AA5E
Hedgehog Cactus Yellow Green
- 59C1B0
≈ Treasured Teal
- 95A9EC
≈ Kitten’s Eye
- E191A8
≈ Kobi
Kontrast ve erişilebilirlik
Beyaz üzerinde
WCAG 2.26:1 · APCA Lc 45
Siyah üzerinde
WCAG 9.25:1 · APCA Lc 57
En iyi metin rengi: #000000
WCAG 9.25:1 (AAA) · APCA Lc 57
Contrast pairs
Kod parçacıkları
CSS
:root {
--hedgehog-cactus-yellow-green: #c4aa5e;
--hedgehog-cactus-yellow-green-rgb: 196 170 94;
--hedgehog-cactus-yellow-green-oklch: oklch(0.745 0.101 91);
}
.element {
color: var(--hedgehog-cactus-yellow-green);
background-color: hsl(45 46% 57%);
border-color: oklch(0.745 0.101 91);
}Tailwind CSS v4
@theme {
--color-hedgehog-cactus-yellow-green: #c4aa5e;
--color-hedgehog-cactus-yellow-green-50: #fff5d5;
--color-hedgehog-cactus-yellow-green-100: #f3e8c3;
--color-hedgehog-cactus-yellow-green-200: #e3d4a4;
--color-hedgehog-cactus-yellow-green-300: #c9b77b;
--color-hedgehog-cactus-yellow-green-400: #b59c55;
--color-hedgehog-cactus-yellow-green-500: #9f8329;
--color-hedgehog-cactus-yellow-green-600: #866f25;
--color-hedgehog-cactus-yellow-green-700: #6c591e;
--color-hedgehog-cactus-yellow-green-800: #504013;
--color-hedgehog-cactus-yellow-green-900: #382c0c;
--color-hedgehog-cactus-yellow-green-950: #231901;
}SCSS
$hedgehog-cactus-yellow-green: #c4aa5e;
$hedgehog-cactus-yellow-green-rgb: 196, 170, 94;
$hedgehog-cactus-yellow-green-light: mix(#fff, $hedgehog-cactus-yellow-green, 20%);
$hedgehog-cactus-yellow-green-dark: mix(#000, $hedgehog-cactus-yellow-green, 20%);
.element {
color: $hedgehog-cactus-yellow-green;
box-shadow: 0 0 0 2px rgba($hedgehog-cactus-yellow-green, 0.35);
}