色名 · #446CCF
Han Blue
Han Blueは#446CCF：rgb(68 108 207)、hsl(223 59% 54%)、oklch(0.554 0.159 265.1)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Blue mean? → · Han Blue color name →
#446CCF
oklch(0.554 0.159 265.1)
カラー変換
- HEX
- #446ccf
- RGB
- rgb(68 108 207)
- HSL
- hsl(223 59% 54%)
- HWB
- hwb(223 27% 19%)
- OKLCH
- oklch(0.554 0.159 265.1)
- OKLab
- oklab(0.554 -0.014 -0.159)
- CIE Lab
- lab(46.74 11.17 -56.55)
- LCH
- lch(46.74 57.64 281.2)
- CMYK
- cmyk(67% 48% 0% 19%)
ティント · シェード · トーン
ティント
- 557BD5
- 678ADB
- 7999E0
- 8BA8E5
- 9EB6EA
- B1C5EF
- C4D3F3
- D7E2F8
- EBF0FB
シェード
- 3A5DB4
- 304E99
- 26407F
- 1D3267
- 14254F
- 0C1938
- 050D23
- 020410
- 000002
トーン
- 4A6FC8
- 5072C0
- 5674B9
- 5C77B1
- 6279A9
- 687AA1
- 6E7C99
- 747E91
- 7A7F89
カラーハーモニー
補色 +180°
- 446CCF
Han Blue
- 916C00
≈ Honey Yellow Green
類似色 -30° +30°
- 446CCF
Han Blue
- 007CAD
≈ Jacuzzi
- 7C5AC5
≈ Fuchsia Blue
トライアド +120° +240°
- 446CCF
Han Blue
- BE4340
≈ Chuckles
- 1E8A2F
≈ Temperamental Green
スプリットコンプリメンタリー +150° +210°
- 446CCF
Han Blue
- AE5800
≈ Tijolo
- 717B00
≈ Flag Green
テトラード +90° +180° +270°
コントラストとアクセシビリティ
Ag
AA白の上
WCAG 4.89:1 · APCA Lc 74
Ag
Fail黒の上
WCAG 4.29:1 · APCA Lc 28
最適な文字色: #FFFFFF
WCAG 4.89:1 (AA) · APCA Lc 74
Contrast pairs
コードスニペット
CSS
:root {
--han-blue: #446ccf;
--han-blue-rgb: 68 108 207;
--han-blue-oklch: oklch(0.554 0.159 265.1);
}
.element {
color: var(--han-blue);
background-color: hsl(223 59% 54%);
border-color: oklch(0.554 0.159 265.1);
}Tailwind CSS v4
@theme {
--color-han-blue: #446ccf;
--color-han-blue-50: #e1f5ff;
--color-han-blue-100: #d0e7ff;
--color-han-blue-200: #b6d3ff;
--color-han-blue-300: #93b4ff;
--color-han-blue-400: #709afc;
--color-han-blue-500: #517fee;
--color-han-blue-600: #456cc9;
--color-han-blue-700: #3756a2;
--color-han-blue-800: #243f79;
--color-han-blue-900: #182c55;
--color-han-blue-950: #09183a;
}SCSS
$han-blue: #446ccf;
$han-blue-rgb: 68, 108, 207;
$han-blue-light: mix(#fff, $han-blue, 20%);
$han-blue-dark: mix(#000, $han-blue, 20%);
.element {
color: $han-blue;
box-shadow: 0 0 0 2px rgba($han-blue, 0.35);
}