이름 색상 · #556CB5
Amparo Blue
Amparo Blue은(는) #556CB5: rgb(85 108 181), hsl(226 39% 52%), oklch(0.547 0.117 269.1). 틴트, 셰이드, 색 조화, WCAG·APCA 대비, CSS·Tailwind v4·SCSS 코드를 확인하세요.
What does Blue mean? → · Amparo Blue color name →
#556CB5
oklch(0.547 0.117 269.1)
색상 변환
- HEX
- #556cb5
- RGB
- rgb(85 108 181)
- HSL
- hsl(226 39% 52%)
- HWB
- hwb(226 33% 29%)
- OKLCH
- oklch(0.547 0.117 269.1)
- OKLab
- oklab(0.547 -0.002 -0.117)
- CIE Lab
- lab(46.41 7.73 -42.07)
- LCH
- lch(46.41 42.77 280.4)
- CMYK
- cmyk(53% 40% 0% 29%)
틴트 · 셰이드 · 톤
틴트
- 647ABD
- 7489C5
- 8497CD
- 95A6D4
- A6B4DC
- B7C3E3
- C9D2EA
- DBE1F1
- EDF0F8
셰이드
- 495D9D
- 3D4E86
- 31406F
- 263259
- 1C2544
- 111930
- 080D1D
- 02040C
- 000002
톤
- 596FB0
- 5D71AB
- 6273A6
- 6675A1
- 6A779C
- 6E7996
- 737B91
- 777D8C
- 7C7E86
색 조화
보색 +180°
- 556CB5
Amparo Blue
- 8B6C00
≈ Muddy Brown
유사색 -30° +30°
- 556CB5
Amparo Blue
- 1479AD
≈ Larimar Blue
- 7B60AB
≈ Genestealer Purple
삼각 배색 +120° +240°
- 556CB5
Amparo Blue
- AA5347
≈ Maine-Anjou Cattle
- 368349
≈ Green Grass
분열 보색 +150° +210°
- 556CB5
Amparo Blue
- A25D1B
≈ Tortoiseshell Specs
- 6A7A1B
≈ Murky Green
사각 배색 +90° +180° +270°
- 556CB5
Amparo Blue
- A6506F
≈ China Rose
- 8B6C00
≈ Muddy Brown
- 008372
≈ Summer Turquoise
대비 및 접근성
Ag
AA흰색 위
WCAG 5.00:1 · APCA Lc 74
Ag
Fail검은색 위
WCAG 4.19:1 · APCA Lc 27
가장 좋은 글자색: #FFFFFF
WCAG 5.00:1 (AA) · APCA Lc 74
Contrast pairs
코드 스니펫
CSS
:root {
--amparo-blue: #556cb5;
--amparo-blue-rgb: 85 108 181;
--amparo-blue-oklch: oklch(0.547 0.117 269.1);
}
.element {
color: var(--amparo-blue);
background-color: hsl(226 39% 52%);
border-color: oklch(0.547 0.117 269.1);
}Tailwind CSS v4
@theme {
--color-amparo-blue: #556cb5;
--color-amparo-blue-50: #e8f4ff;
--color-amparo-blue-100: #d9e7ff;
--color-amparo-blue-200: #c1d2ff;
--color-amparo-blue-300: #a1b4f4;
--color-amparo-blue-400: #829be4;
--color-amparo-blue-500: #6781d4;
--color-amparo-blue-600: #576db3;
--color-amparo-blue-700: #45578f;
--color-amparo-blue-800: #30406b;
--color-amparo-blue-900: #212c4b;
--color-amparo-blue-950: #101932;
}SCSS
$amparo-blue: #556cb5;
$amparo-blue-rgb: 85, 108, 181;
$amparo-blue-light: mix(#fff, $amparo-blue, 20%);
$amparo-blue-dark: mix(#000, $amparo-blue, 20%);
.element {
color: $amparo-blue;
box-shadow: 0 0 0 2px rgba($amparo-blue, 0.35);
}