色名 · #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);
}