이름 색상 · #3F5A5D
Otter Creek
Otter Creek은(는) #3F5A5D: rgb(63 90 93), hsl(186 19% 31%), oklch(0.447 0.033 204.7). 틴트, 셰이드, 색 조화, WCAG·APCA 대비, CSS·Tailwind v4·SCSS 코드를 확인하세요.
What does Gray mean? → · Otter Creek color name →
#3F5A5D
oklch(0.447 0.033 204.7)
색상 변환
- HEX
- #3f5a5d
- RGB
- rgb(63 90 93)
- HSL
- hsl(186 19% 31%)
- HWB
- hwb(186 25% 64%)
- OKLCH
- oklch(0.447 0.033 204.7)
- OKLab
- oklab(0.447 -0.03 -0.014)
- CIE Lab
- lab(36.17 -9.85 -5.17)
- LCH
- lch(36.17 11.12 207.7)
- CMYK
- cmyk(32% 3% 0% 64%)
틴트 · 셰이드 · 톤
틴트
- 51696C
- 63797B
- 75888A
- 88989A
- 9BA9AA
- AEBABB
- C2CBCB
- D6DCDC
- EAEDEE
셰이드
- 354D50
- 2C4143
- 233537
- 1B292A
- 121E1F
- 0A1314
- 04090A
- 010303
- 000000
톤
- 465E60
- 4C6264
- 536567
- 59696B
- 606D6E
- 667172
- 6C7475
- 737879
- 797C7C
색 조화
보색 +180°
- 3F5A5D
Otter Creek
- 664E4C
≈ Robeson Rose
유사색 -30° +30°
- 3F5A5D
Otter Creek
- 425B53
≈ Canadian Fir
- 435864
≈ Saxon Blue
삼각 배색 +120° +240°
- 3F5A5D
Otter Creek
- 5E4F5F
≈ Napa Grape
- 5D5340
≈ Hiking Boots
분열 보색 +150° +210°
- 3F5A5D
Otter Creek
- 644D55
≈ Berry Wine
- 635044
≈ Gobo Brown
사각 배색 +90° +180° +270°
- 3F5A5D
Otter Creek
- 555165
≈ Freefall
- 664E4C
≈ Robeson Rose
- 545742
≈ Freshwater Marsh
대비 및 접근성
Ag
AAA흰색 위
WCAG 7.41:1 · APCA Lc 86
Ag
Fail검은색 위
WCAG 2.83:1 · APCA Lc 16
가장 좋은 글자색: #FFFFFF
WCAG 7.41:1 (AAA) · APCA Lc 86
Contrast pairs
코드 스니펫
CSS
:root {
--otter-creek: #3f5a5d;
--otter-creek-rgb: 63 90 93;
--otter-creek-oklch: oklch(0.447 0.033 204.7);
}
.element {
color: var(--otter-creek);
background-color: hsl(186 19% 31%);
border-color: oklch(0.447 0.033 204.7);
}Tailwind CSS v4
@theme {
--color-otter-creek: #3f5a5d;
--color-otter-creek-50: #ebf8fa;
--color-otter-creek-100: #dcebed;
--color-otter-creek-200: #c5d8db;
--color-otter-creek-300: #a5bcc0;
--color-otter-creek-400: #89a4a7;
--color-otter-creek-500: #6d8d90;
--color-otter-creek-600: #5d777a;
--color-otter-creek-700: #4a5f62;
--color-otter-creek-800: #354647;
--color-otter-creek-900: #243031;
--color-otter-creek-950: #131d1d;
}SCSS
$otter-creek: #3f5a5d;
$otter-creek-rgb: 63, 90, 93;
$otter-creek-light: mix(#fff, $otter-creek, 20%);
$otter-creek-dark: mix(#000, $otter-creek, 20%);
.element {
color: $otter-creek;
box-shadow: 0 0 0 2px rgba($otter-creek, 0.35);
}