이름 색상 · #5AB9A4
Shylock
Shylock은(는) #5AB9A4: rgb(90 185 164), hsl(167 40% 54%), oklch(0.722 0.096 177). 틴트, 셰이드, 색 조화, WCAG·APCA 대비, CSS·Tailwind v4·SCSS 코드를 확인하세요.
What does Teal mean? → · Shylock color name →
#5AB9A4
oklch(0.722 0.096 177)
색상 변환
- HEX
- #5ab9a4
- RGB
- rgb(90 185 164)
- HSL
- hsl(167 40% 54%)
- HWB
- hwb(167 35% 27%)
- OKLCH
- oklch(0.722 0.096 177)
- OKLab
- oklab(0.722 -0.096 0.005)
- CIE Lab
- lab(68.97 -33.38 1.63)
- LCH
- lch(68.97 33.42 177.2)
- CMYK
- cmyk(51% 0% 11% 27%)
틴트 · 셰이드 · 톤
틴트
- 6DC0AD
- 7FC7B6
- 90CEBF
- A1D5C8
- B1DCD1
- C1E3DA
- D0EAE3
- E0F1EC
- F0F8F6
셰이드
- 4DA08E
- 418979
- 357164
- 295B50
- 1E463D
- 13312B
- 091E1A
- 030D0A
- 000201
톤
- 61B3A0
- 66AE9D
- 6BA899
- 6FA295
- 739D92
- 76978E
- 79918B
- 7C8B87
- 7E8684
색 조화
보색 +180°
- 5AB9A4
Shylock
- D68CA6
≈ Kiss
유사색 -30° +30°
- 5AB9A4
Shylock
- 7CB682
≈ Absinthe Green
- 50B6C4
≈ Cave Lake
삼각 배색 +120° +240°
- 5AB9A4
Shylock
- AB99DA
≈ Biloba Flower
- D39668
≈ Pumpkin Patch
분열 보색 +150° +210°
- 5AB9A4
Shylock
- C690C5
≈ Rose Souvenir
- DB8E85
≈ Coral Banks
사각 배색 +90° +180° +270°
- 5AB9A4
Shylock
- 8AA4E2
≈ Blue Cue
- D68CA6
≈ Kiss
- BFA15B
≈ Magic Lamp
대비 및 접근성
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 {
--shylock: #5ab9a4;
--shylock-rgb: 90 185 164;
--shylock-oklch: oklch(0.722 0.096 177);
}
.element {
color: var(--shylock);
background-color: hsl(167 40% 54%);
border-color: oklch(0.722 0.096 177);
}Tailwind CSS v4
@theme {
--color-shylock: #5ab9a4;
--color-shylock-50: #d9fff6;
--color-shylock-100: #c6f3e8;
--color-shylock-200: #a8e2d5;
--color-shylock-300: #7fc8b8;
--color-shylock-400: #58b19d;
--color-shylock-500: #259b85;
--color-shylock-600: #238371;
--color-shylock-700: #1c695a;
--color-shylock-800: #144d40;
--color-shylock-900: #0d362c;
--color-shylock-950: #012119;
}SCSS
$shylock: #5ab9a4;
$shylock-rgb: 90, 185, 164;
$shylock-light: mix(#fff, $shylock, 20%);
$shylock-dark: mix(#000, $shylock, 20%);
.element {
color: $shylock;
box-shadow: 0 0 0 2px rgba($shylock, 0.35);
}