Adlandırılmış renk · #818581
Happy Hippo
Happy Hippo, #818581: rgb(129 133 129), hsl(120 2% 51%), oklch(0.612 0.008 145.5). Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
What does Gray mean? → · Happy Hippo color name →
#818581
oklch(0.612 0.008 145.5)
Renk dönüşümleri
- HEX
- #818581
- RGB
- rgb(129 133 129)
- HSL
- hsl(120 2% 51%)
- HWB
- hwb(120 51% 48%)
- OKLCH
- oklch(0.612 0.008 145.5)
- OKLab
- oklab(0.612 -0.006 0.004)
- CIE Lab
- lab(55.1 -2.13 1.62)
- LCH
- lch(55.1 2.68 142.8)
- CMYK
- cmyk(3% 0% 3% 48%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- 8D918D
- 999C99
- A5A8A5
- B1B4B1
- BEC0BE
- CBCCCB
- D8D9D8
- E5E5E5
- F2F2F2
Koyu tonlar
- 6F736F
- 5E615E
- 4E504E
- 3E403E
- 2E302E
- 1F211F
- 121312
- 060606
- 010101
Gri tonlar
- 818481
- 818481
- 818381
- 818381
- 818281
- 808280
- 808180
- 808180
- 808080
Renk uyumları
Tamamlayıcı +180°
- 818581
Happy Hippo
- 868286
≈ Suva Grey
Analog -30° +30°
- 818581
Happy Hippo
- 83847F
≈ Tank Grey
- 7F8583
≈ Happy Hippo
Üçlü +120° +240°
- 818581
Happy Hippo
- 818488
≈ Mission Control
- 888281
≈ Lunar Federation
Bölünmüş tamamlayıcı +150° +210°
- 818581
Happy Hippo
- 848388
≈ Victorian Pewter
- 888284
≈ Suva Grey
Dörtlü +90° +180° +270°
- 818581
Happy Hippo
- 808588
≈ Distant Thunder
- 868286
≈ Suva Grey
- 88837F
≈ Lunar Federation
Kontrast ve erişilebilirlik
Ag
FailBeyaz üzerinde
WCAG 3.74:1 · APCA Lc 65
Ag
AASiyah üzerinde
WCAG 5.60:1 · APCA Lc 37
En iyi metin rengi: #000000
WCAG 5.60:1 (AA) · APCA Lc 37
Contrast pairs
Kod parçacıkları
CSS
:root {
--happy-hippo: #818581;
--happy-hippo-rgb: 129 133 129;
--happy-hippo-oklch: oklch(0.612 0.008 145.5);
}
.element {
color: var(--happy-hippo);
background-color: hsl(120 2% 51%);
border-color: oklch(0.612 0.008 145.5);
}Tailwind CSS v4
@theme {
--color-happy-hippo: #818581;
--color-happy-hippo-50: #f4f6f4;
--color-happy-hippo-100: #e6e8e6;
--color-happy-hippo-200: #d2d5d2;
--color-happy-hippo-300: #b5b8b5;
--color-happy-hippo-400: #9ca09c;
--color-happy-hippo-500: #838783;
--color-happy-hippo-600: #6f736f;
--color-happy-hippo-700: #595c59;
--color-happy-hippo-800: #414341;
--color-happy-hippo-900: #2d2e2d;
--color-happy-hippo-950: #1a1b1a;
}SCSS
$happy-hippo: #818581;
$happy-hippo-rgb: 129, 133, 129;
$happy-hippo-light: mix(#fff, $happy-hippo, 20%);
$happy-hippo-dark: mix(#000, $happy-hippo, 20%);
.element {
color: $happy-hippo;
box-shadow: 0 0 0 2px rgba($happy-hippo, 0.35);
}