이름 색상 · #6A8389
Puddle Jumper
Puddle Jumper은(는) #6A8389: rgb(106 131 137), hsl(192 13% 48%), oklch(0.592 0.03 213.9). 틴트, 셰이드, 색 조화, WCAG·APCA 대비, CSS·Tailwind v4·SCSS 코드를 확인하세요.
What does Gray mean? → · Puddle Jumper color name →
#6A8389
oklch(0.592 0.03 213.9)
색상 변환
- HEX
- #6a8389
- RGB
- rgb(106 131 137)
- HSL
- hsl(192 13% 48%)
- HWB
- hwb(192 42% 46%)
- OKLCH
- oklch(0.592 0.03 213.9)
- OKLab
- oklab(0.592 -0.025 -0.017)
- CIE Lab
- lab(52.94 -8.24 -6.39)
- LCH
- lch(52.94 10.43 217.8)
- CMYK
- cmyk(23% 4% 0% 46%)
틴트 · 셰이드 · 톤
틴트
- 788F94
- 869BA0
- 95A7AB
- A3B3B7
- B2BFC2
- C1CCCE
- D0D8DA
- E0E5E6
- EFF2F3
셰이드
- 5B7176
- 4D6064
- 3F4F53
- 313F42
- 242F31
- 182022
- 0D1214
- 040607
- 000101
톤
- 6C8388
- 6F8287
- 718286
- 738285
- 758285
- 788184
- 7A8183
- 7C8182
- 7E8081
색 조화
보색 +180°
- 6A8389
Puddle Jumper
- 8F7872
≈ Venus Deva
유사색 -30° +30°
- 6A8389
Puddle Jumper
- 6B8480
≈ Marsh Creek
- 6F808F
≈ Chain Gang Grey
삼각 배색 +120° +240°
- 6A8389
Puddle Jumper
- 8A7886
≈ Classical Violet
- 847E6A
≈ Serpent
분열 보색 +150° +210°
- 6A8389
Puddle Jumper
- 8E777C
≈ Purple Rubiate
- 8B7B6C
≈ Inca Temple
사각 배색 +90° +180° +270°
- 6A8389
Puddle Jumper
- 827A8D
≈ High Note
- 8F7872
≈ Venus Deva
- 7A816E
≈ Kakadu Trail
대비 및 접근성
Ag
Fail흰색 위
WCAG 4.02:1 · APCA Lc 68
Ag
AA검은색 위
WCAG 5.22:1 · APCA Lc 34
가장 좋은 글자색: #000000
WCAG 5.22:1 (AA) · APCA Lc 34
Contrast pairs
코드 스니펫
CSS
:root {
--puddle-jumper: #6a8389;
--puddle-jumper-rgb: 106 131 137;
--puddle-jumper-oklch: oklch(0.592 0.03 213.9);
}
.element {
color: var(--puddle-jumper);
background-color: hsl(192 13% 48%);
border-color: oklch(0.592 0.03 213.9);
}Tailwind CSS v4
@theme {
--color-puddle-jumper: #6a8389;
--color-puddle-jumper-50: #ecf7fb;
--color-puddle-jumper-100: #ddebee;
--color-puddle-jumper-200: #c7d8dc;
--color-puddle-jumper-300: #a7bcc1;
--color-puddle-jumper-400: #8ba3a9;
--color-puddle-jumper-500: #708c92;
--color-puddle-jumper-600: #5f767c;
--color-puddle-jumper-700: #4c5f63;
--color-puddle-jumper-800: #374548;
--color-puddle-jumper-900: #253032;
--color-puddle-jumper-950: #141c1e;
}SCSS
$puddle-jumper: #6a8389;
$puddle-jumper-rgb: 106, 131, 137;
$puddle-jumper-light: mix(#fff, $puddle-jumper, 20%);
$puddle-jumper-dark: mix(#000, $puddle-jumper, 20%);
.element {
color: $puddle-jumper;
box-shadow: 0 0 0 2px rgba($puddle-jumper, 0.35);
}