이름 색상 · #404664
Blue Wonder
Blue Wonder은(는) #404664: rgb(64 70 100), hsl(230 22% 32%), oklch(0.402 0.051 275.2). 틴트, 셰이드, 색 조화, WCAG·APCA 대비, CSS·Tailwind v4·SCSS 코드를 확인하세요.
What does Blue mean? → · Blue Wonder color name →
#404664
oklch(0.402 0.051 275.2)
색상 변환
- HEX
- #404664
- RGB
- rgb(64 70 100)
- HSL
- hsl(230 22% 32%)
- HWB
- hwb(230 25% 61%)
- OKLCH
- oklch(0.402 0.051 275.2)
- OKLab
- oklab(0.402 0.005 -0.051)
- CIE Lab
- lab(30.17 3.63 -18.6)
- LCH
- lch(30.17 18.95 281.1)
- CMYK
- cmyk(36% 30% 0% 61%)
틴트 · 셰이드 · 톤
틴트
- 515773
- 626881
- 747990
- 878BA0
- 9A9EAF
- ADB1BF
- C1C4CF
- D5D7DF
- EAEBEF
셰이드
- 363C56
- 2D3248
- 24283B
- 1B1E2E
- 131522
- 0B0D16
- 05050B
- 010203
- 000000
톤
- 464C67
- 4C516A
- 52576D
- 595D70
- 5F6372
- 656875
- 6C6E78
- 73747B
- 797A7D
색 조화
보색 +180°
- 404664
Blue Wonder
- 514827
≈ Codium Fragile
유사색 -30° +30°
- 404664
Blue Wonder
- 304B62
≈ Blue Fedora
- 4F415F
≈ Royal Indigo
삼각 배색 +120° +240°
- 404664
Blue Wonder
- 613E35
≈ Painted Bark
- 31513C
≈ Goblin
분열 보색 +150° +210°
- 404664
Blue Wonder
- 5B422A
≈ Brown Hen
- 424D2E
≈ Bronze Tone
사각 배색 +90° +180° +270°
- 404664
Blue Wonder
- 603C44
≈ Stag Beetle
- 514827
≈ Codium Fragile
- 23514C
≈ Lacustral
대비 및 접근성
Ag
AAA흰색 위
WCAG 9.21:1 · APCA Lc 91
Ag
Fail검은색 위
WCAG 2.27:1 · APCA Lc 11
가장 좋은 글자색: #FFFFFF
WCAG 9.21:1 (AAA) · APCA Lc 91
Contrast pairs
코드 스니펫
CSS
:root {
--blue-wonder: #404664;
--blue-wonder-rgb: 64 70 100;
--blue-wonder-oklch: oklch(0.402 0.051 275.2);
}
.element {
color: var(--blue-wonder);
background-color: hsl(230 22% 32%);
border-color: oklch(0.402 0.051 275.2);
}Tailwind CSS v4
@theme {
--color-blue-wonder: #404664;
--color-blue-wonder-50: #f1f4ff;
--color-blue-wonder-100: #e3e7f9;
--color-blue-wonder-200: #ced3eb;
--color-blue-wonder-300: #b0b6d2;
--color-blue-wonder-400: #959dbd;
--color-blue-wonder-500: #7c84a9;
--color-blue-wonder-600: #69708e;
--color-blue-wonder-700: #545972;
--color-blue-wonder-800: #3c4154;
--color-blue-wonder-900: #292d3b;
--color-blue-wonder-950: #171a25;
}SCSS
$blue-wonder: #404664;
$blue-wonder-rgb: 64, 70, 100;
$blue-wonder-light: mix(#fff, $blue-wonder, 20%);
$blue-wonder-dark: mix(#000, $blue-wonder, 20%);
.element {
color: $blue-wonder;
box-shadow: 0 0 0 2px rgba($blue-wonder, 0.35);
}