이름 색상 · #314A76
Dragonfly
Dragonfly은(는) #314A76: rgb(49 74 118), hsl(218 41% 33%), oklch(0.411 0.08 261.1). 틴트, 셰이드, 색 조화, WCAG·APCA 대비, CSS·Tailwind v4·SCSS 코드를 확인하세요.
What does Blue mean? → · Dragonfly color name →
#314A76
oklch(0.411 0.08 261.1)
색상 변환
- HEX
- #314a76
- RGB
- rgb(49 74 118)
- HSL
- hsl(218 41% 33%)
- HWB
- hwb(218 19% 54%)
- OKLCH
- oklch(0.411 0.08 261.1)
- OKLab
- oklab(0.411 -0.012 -0.079)
- CIE Lab
- lab(31.09 1.22 -28.58)
- LCH
- lch(31.09 28.61 272.4)
- CMYK
- cmyk(58% 37% 0% 54%)
틴트 · 셰이드 · 톤
틴트
- 435B83
- 566C91
- 6A7D9F
- 7E8FAC
- 92A1BA
- A7B3C7
- BCC6D5
- D2D9E3
- E8ECF1
셰이드
- 293F66
- 223556
- 1A2A47
- 132038
- 0C1729
- 060E1C
- 03060F
- 010205
- 000001
톤
- 395077
- 405579
- 485B7A
- 50607B
- 58657C
- 606B7D
- 68707E
- 70757F
- 787B7F
색 조화
보색 +180°
- 314A76
Dragonfly
- 614509
≈ Mud Brown
유사색 -30° +30°
- 314A76
Dragonfly
- 06526E
≈ Captain Blue
- 4B4273
≈ Izmir Purple
삼각 배색 +120° +240°
- 314A76
Dragonfly
- 703737
≈ Red Theatre
- 30552B
≈ Moor-Monster
분열 보색 +150° +210°
- 314A76
Dragonfly
- 6D3C1E
≈ Searing Gorge Brown
- 4D4E11
≈ Scorzonera Brown
사각 배색 +90° +180° +270°
대비 및 접근성
Ag
AAA흰색 위
WCAG 8.85:1 · APCA Lc 90
Ag
Fail검은색 위
WCAG 2.37:1 · APCA Lc 12
가장 좋은 글자색: #FFFFFF
WCAG 8.85:1 (AAA) · APCA Lc 90
Contrast pairs
코드 스니펫
CSS
:root {
--dragonfly: #314a76;
--dragonfly-rgb: 49 74 118;
--dragonfly-oklch: oklch(0.411 0.08 261.1);
}
.element {
color: var(--dragonfly);
background-color: hsl(218 41% 33%);
border-color: oklch(0.411 0.08 261.1);
}Tailwind CSS v4
@theme {
--color-dragonfly: #314a76;
--color-dragonfly-50: #e9f6ff;
--color-dragonfly-100: #dae8ff;
--color-dragonfly-200: #c2d5f8;
--color-dragonfly-300: #a2b8e1;
--color-dragonfly-400: #849fce;
--color-dragonfly-500: #6886bc;
--color-dragonfly-600: #58729e;
--color-dragonfly-700: #465b7f;
--color-dragonfly-800: #31435e;
--color-dragonfly-900: #212e42;
--color-dragonfly-950: #111b2a;
}SCSS
$dragonfly: #314a76;
$dragonfly-rgb: 49, 74, 118;
$dragonfly-light: mix(#fff, $dragonfly, 20%);
$dragonfly-dark: mix(#000, $dragonfly, 20%);
.element {
color: $dragonfly;
box-shadow: 0 0 0 2px rgba($dragonfly, 0.35);
}