色名 · #2E58E8
Veteran’s Day Blue
Veteran’s Day Blueは#2E58E8：rgb(46 88 232)、hsl(226 80% 55%)、oklch(0.526 0.222 266)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Blue mean? → · Veteran’s Day Blue color name →
#2E58E8
oklch(0.526 0.222 266)
カラー変換
- HEX
- #2e58e8
- RGB
- rgb(46 88 232)
- HSL
- hsl(226 80% 55%)
- HWB
- hwb(226 18% 9%)
- OKLCH
- oklch(0.526 0.222 266)
- OKLab
- oklab(0.526 -0.015 -0.222)
- CIE Lab
- lab(41.99 27.59 -78.46)
- LCH
- lch(41.99 83.17 289.4)
- CMYK
- cmyk(80% 62% 0% 9%)
ティント · シェード · トーン
ティント
- 406CEC
- 537EF0
- 678FF4
- 7CA0F7
- 91B0F9
- A6C0FB
- BCD0FD
- D2E0FE
- E8EFFF
シェード
- 274BCA
- 1F3FAC
- 183390
- 122874
- 0B1D59
- 061240
- 020929
- 010313
- 000003
トーン
- 365FDE
- 3E65D5
- 466ACB
- 4E6EC1
- 5672B7
- 5F76AC
- 6779A2
- 6F7C97
- 787E8C
カラーハーモニー
補色 +180°
- 2E58E8
Veteran’s Day Blue
- 866500
≈ Alligator
類似色 -30° +30°
- 2E58E8
Veteran’s Day Blue
- 0073A3
≈ Quarterdeck
- 7B3DD8
≈ Hokkaido Lavender
トライアド +120° +240°
- 2E58E8
Veteran’s Day Blue
- C9001A
≈ Harvard Crimson
- 008127
≈ Azure Radiance
スプリットコンプリメンタリー +150° +210°
- 2E58E8
Veteran’s Day Blue
- A15300
≈ Windsor Brown
- 687200
≈ Brownish Green
テトラード +90° +180° +270°
- 2E58E8
Veteran’s Day Blue
- C0006E
≈ Aztec Warrior
- 866500
≈ Alligator
- 007D68
≈ Mediaeval Forest
コントラストとアクセシビリティ
Ag
AA白の上
WCAG 5.71:1 · APCA Lc 78
Ag
Fail黒の上
WCAG 3.67:1 · APCA Lc 24
最適な文字色: #FFFFFF
WCAG 5.71:1 (AA) · APCA Lc 78
Contrast pairs
コードスニペット
CSS
:root {
--veteran-s-day-blue: #2e58e8;
--veteran-s-day-blue-rgb: 46 88 232;
--veteran-s-day-blue-oklch: oklch(0.526 0.222 266);
}
.element {
color: var(--veteran-s-day-blue);
background-color: hsl(226 80% 55%);
border-color: oklch(0.526 0.222 266);
}Tailwind CSS v4
@theme {
--color-veteran-s-day-blue: #2e58e8;
--color-veteran-s-day-blue-50: #daf4ff;
--color-veteran-s-day-blue-100: #c8e6ff;
--color-veteran-s-day-blue-200: #acd0ff;
--color-veteran-s-day-blue-300: #87b0ff;
--color-veteran-s-day-blue-400: #6093ff;
--color-veteran-s-day-blue-500: #4073ff;
--color-veteran-s-day-blue-600: #3762ea;
--color-veteran-s-day-blue-700: #2b4fbd;
--color-veteran-s-day-blue-800: #183a8e;
--color-veteran-s-day-blue-900: #0f2864;
--color-veteran-s-day-blue-950: #041545;
}SCSS
$veteran-s-day-blue: #2e58e8;
$veteran-s-day-blue-rgb: 46, 88, 232;
$veteran-s-day-blue-light: mix(#fff, $veteran-s-day-blue, 20%);
$veteran-s-day-blue-dark: mix(#000, $veteran-s-day-blue, 20%);
.element {
color: $veteran-s-day-blue;
box-shadow: 0 0 0 2px rgba($veteran-s-day-blue, 0.35);
}