이름 색상 · #818581

Happy Hippo

Happy Hippo은(는) #818581: rgb(129 133 129), hsl(120 2% 51%), oklch(0.612 0.008 145.5). 틴트, 셰이드, 색 조화, WCAG·APCA 대비, CSS·Tailwind v4·SCSS 코드를 확인하세요.

What does Gray mean? → · Happy Hippo color name →

#818581

oklch(0.612 0.008 145.5)

색상 변환

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%)

틴트 · 셰이드 · 톤

틴트

8D918D
999C99
A5A8A5
B1B4B1
BEC0BE
CBCCCB
D8D9D8
E5E5E5
F2F2F2

셰이드

6F736F
5E615E
4E504E
3E403E
2E302E
1F211F
121312
060606
010101

톤

818481
818481
818381
818381
818281
808280
808180
808180
808080

색 조화

보색 +180°

818581
Happy Hippo
868286
≈ Suva Grey

유사색 -30° +30°

삼각 배색 +120° +240°

분열 보색 +150° +210°

사각 배색 +90° +180° +270°

대비 및 접근성

흰색 위

WCAG 3.74:1 · APCA Lc 65

Fail

검은색 위

WCAG 5.60:1 · APCA Lc 37

가장 좋은 글자색: #000000

WCAG 5.60:1 (AA) · APCA Lc 37

Contrast pairs

코드 스니펫

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);
}

비슷한 이름 색상

Palettes with similar colors

도구에서 열기

피커 조합 대비 검사기 Studio JSON API