色名 · #AAAA99
Humble Hippo
Humble Hippoは#AAAA99：rgb(170 170 153)、hsl(60 9% 63%)、oklch(0.733 0.024 107)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Gray mean? → · Humble Hippo color name →
#AAAA99
oklch(0.733 0.024 107)
カラー変換
- HEX
- #aaaa99
- RGB
- rgb(170 170 153)
- HSL
- hsl(60 9% 63%)
- HWB
- hwb(60 60% 33%)
- OKLCH
- oklch(0.733 0.024 107)
- OKLab
- oklab(0.733 -0.007 0.023)
- CIE Lab
- lab(69.25 -2.27 8.81)
- LCH
- lch(69.25 9.09 104.5)
- CMYK
- cmyk(0% 0% 10% 33%)
ティント · シェード · トーン
ティント
- B2B2A3
- BABBAD
- C3C3B7
- CBCBC1
- D4D4CB
- DCDCD5
- E5E5E0
- EDEEEA
- F6F6F4
シェード
- 939384
- 7D7D70
- 68685D
- 53534A
- 3F3F38
- 2D2D27
- 1B1B17
- 0B0B08
- 010101
トーン
- A6A697
- A1A194
- 9D9D92
- 99998F
- 95958D
- 91918A
- 8C8C88
- 888885
- 848483
カラーハーモニー
補色 +180°
- AAAA99
Humble Hippo
- A7A7B7
≈ Curated Lilac
類似色 -30° +30°
- AAAA99
Humble Hippo
- B1A798
≈ Sediment
- A2AC9E
≈ Green Balsam
トライアド +120° +240°
- AAAA99
Humble Hippo
- 9AACB5
≈ Smoke on the Water
- B5A3AC
≈ Foggy Plum
スプリットコンプリメンタリー +150° +210°
- AAAA99
Humble Hippo
- 9FAAB8
≈ Scribe
- AFA4B3
≈ Midsummer Twilight
テトラード +90° +180° +270°
- AAAA99
Humble Hippo
- 98AEAE
≈ Sliding
- A7A7B7
≈ Curated Lilac
- B7A3A3
≈ Lilac Smoke
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 2.35:1 · APCA Lc 46
Ag
AAA黒の上
WCAG 8.91:1 · APCA Lc 56
最適な文字色: #000000
WCAG 8.91:1 (AAA) · APCA Lc 56
Contrast pairs
コードスニペット
CSS
:root {
--humble-hippo: #aaaa99;
--humble-hippo-rgb: 170 170 153;
--humble-hippo-oklch: oklch(0.733 0.024 107);
}
.element {
color: var(--humble-hippo);
background-color: hsl(60 9% 63%);
border-color: oklch(0.733 0.024 107);
}Tailwind CSS v4
@theme {
--color-humble-hippo: #aaaa99;
--color-humble-hippo-50: #f5f6ee;
--color-humble-hippo-100: #e8e9e0;
--color-humble-hippo-200: #d5d5ca;
--color-humble-hippo-300: #b8b9ab;
--color-humble-hippo-400: #a0a090;
--color-humble-hippo-500: #888876;
--color-humble-hippo-600: #737364;
--color-humble-hippo-700: #5c5c50;
--color-humble-hippo-800: #43433a;
--color-humble-hippo-900: #2f2e27;
--color-humble-hippo-950: #1b1b16;
}SCSS
$humble-hippo: #aaaa99;
$humble-hippo-rgb: 170, 170, 153;
$humble-hippo-light: mix(#fff, $humble-hippo, 20%);
$humble-hippo-dark: mix(#000, $humble-hippo, 20%);
.element {
color: $humble-hippo;
box-shadow: 0 0 0 2px rgba($humble-hippo, 0.35);
}