Benannte Farbe · #2E58E8
Veteran’s Day Blue
Veteran’s Day Blue ist #2E58E8: rgb(46 88 232), hsl(226 80% 55%), oklch(0.526 0.222 266). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Blue mean? → · Veteran’s Day Blue color name →
#2E58E8
oklch(0.526 0.222 266)
Farbumrechnungen
- 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%)
Tints · Shades · Tones
Tints
- 406CEC
- 537EF0
- 678FF4
- 7CA0F7
- 91B0F9
- A6C0FB
- BCD0FD
- D2E0FE
- E8EFFF
Shades
- 274BCA
- 1F3FAC
- 183390
- 122874
- 0B1D59
- 061240
- 020929
- 010313
- 000003
Tones
- 365FDE
- 3E65D5
- 466ACB
- 4E6EC1
- 5672B7
- 5F76AC
- 6779A2
- 6F7C97
- 787E8C
Farbharmonien
Komplementär +180°
- 2E58E8
Veteran’s Day Blue
- 866500
≈ Alligator
Analog -30° +30°
- 2E58E8
Veteran’s Day Blue
- 0073A3
≈ Quarterdeck
- 7B3DD8
≈ Hokkaido Lavender
Triadisch +120° +240°
- 2E58E8
Veteran’s Day Blue
- C9001A
≈ Harvard Crimson
- 008127
≈ Azure Radiance
Geteilt komplementär +150° +210°
- 2E58E8
Veteran’s Day Blue
- A15300
≈ Windsor Brown
- 687200
≈ Brownish Green
Tetradisch +90° +180° +270°
- 2E58E8
Veteran’s Day Blue
- C0006E
≈ Aztec Warrior
- 866500
≈ Alligator
- 007D68
≈ Mediaeval Forest
Kontrast & Barrierefreiheit
Ag
AAAuf Weiß
WCAG 5.71:1 · APCA Lc 78
Ag
FailAuf Schwarz
WCAG 3.67:1 · APCA Lc 24
Beste Textfarbe: #FFFFFF
WCAG 5.71:1 (AA) · APCA Lc 78
Contrast pairs
Code-Snippets
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);
}