이름 색상 · #4C5E87
Indigo Navy Blue
Indigo Navy Blue은(는) #4C5E87: rgb(76 94 135), hsl(222 28% 41%), oklch(0.485 0.07 265.7). 틴트, 셰이드, 색 조화, WCAG·APCA 대비, CSS·Tailwind v4·SCSS 코드를 확인하세요.
What does Blue mean? → · Indigo Navy Blue color name →
#4C5E87
oklch(0.485 0.07 265.7)
색상 변환
- HEX
- #4c5e87
- RGB
- rgb(76 94 135)
- HSL
- hsl(222 28% 41%)
- HWB
- hwb(222 30% 47%)
- OKLCH
- oklch(0.485 0.07 265.7)
- OKLab
- oklab(0.485 -0.005 -0.07)
- CIE Lab
- lab(39.75 1.67 -25.36)
- LCH
- lch(39.75 25.41 273.8)
- CMYK
- cmyk(44% 30% 0% 47%)
틴트 · 셰이드 · 톤
틴트
- 5C6D93
- 6D7C9F
- 7E8CAB
- 8F9CB6
- A1ACC2
- B3BCCE
- C6CCDB
- D9DDE7
- ECEEF3
셰이드
- 415175
- 364463
- 2C3751
- 222B41
- 181F31
- 0F1421
- 060A13
- 020306
- 000001
톤
- 516287
- 566586
- 5B6886
- 606C85
- 666F84
- 6B7384
- 707683
- 757982
- 7B7D81
색 조화
보색 +180°
- 4C5E87
Indigo Navy Blue
- 715C2D
≈ Moss Brown
유사색 -30° +30°
- 4C5E87
Indigo Navy Blue
- 346581
≈ Southern Evening
- 625782
≈ Vigorous Violet
삼각 배색 +120° +240°
- 4C5E87
Indigo Navy Blue
- 824F4A
≈ Cherokee Red
- 446A47
≈ Jungle Adventure
분열 보색 +150° +210°
- 4C5E87
Indigo Navy Blue
- 7D5437
≈ Pheasant Brown
- 5D6434
≈ Marsh Mix
사각 배색 +90° +180° +270°
- 4C5E87
Indigo Navy Blue
- 7F4E60
≈ Artful Magenta
- 715C2D
≈ Moss Brown
- 2C6C5D
≈ Antique Green
대비 및 접근성
Ag
AA흰색 위
WCAG 6.44:1 · APCA Lc 82
Ag
Fail검은색 위
WCAG 3.25:1 · APCA Lc 20
가장 좋은 글자색: #FFFFFF
WCAG 6.44:1 (AA) · APCA Lc 82
Contrast pairs
코드 스니펫
CSS
:root {
--indigo-navy-blue: #4c5e87;
--indigo-navy-blue-rgb: 76 94 135;
--indigo-navy-blue-oklch: oklch(0.485 0.07 265.7);
}
.element {
color: var(--indigo-navy-blue);
background-color: hsl(222 28% 41%);
border-color: oklch(0.485 0.07 265.7);
}Tailwind CSS v4
@theme {
--color-indigo-navy-blue: #4c5e87;
--color-indigo-navy-blue-50: #ecf5ff;
--color-indigo-navy-blue-100: #dee8ff;
--color-indigo-navy-blue-200: #c7d4f3;
--color-indigo-navy-blue-300: #a8b7dc;
--color-indigo-navy-blue-400: #8b9ec9;
--color-indigo-navy-blue-500: #7085b5;
--color-indigo-navy-blue-600: #5f7199;
--color-indigo-navy-blue-700: #4c5a7b;
--color-indigo-navy-blue-800: #36425b;
--color-indigo-navy-blue-900: #252e40;
--color-indigo-navy-blue-950: #131a29;
}SCSS
$indigo-navy-blue: #4c5e87;
$indigo-navy-blue-rgb: 76, 94, 135;
$indigo-navy-blue-light: mix(#fff, $indigo-navy-blue, 20%);
$indigo-navy-blue-dark: mix(#000, $indigo-navy-blue, 20%);
.element {
color: $indigo-navy-blue;
box-shadow: 0 0 0 2px rgba($indigo-navy-blue, 0.35);
}