Named color · #2B62F4
Retro Blue
Retro Blue is #2B62F4: rgb(43 98 244), hsl(224 90% 56%), oklch(0.553 0.226 264.3). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Blue mean? → · Retro Blue color name →
#2B62F4
oklch(0.553 0.226 264.3)
Color conversions
- HEX
- #2b62f4
- RGB
- rgb(43 98 244)
- HSL
- hsl(224 90% 56%)
- HWB
- hwb(224 17% 4%)
- OKLCH
- oklch(0.553 0.226 264.3)
- OKLab
- oklab(0.553 -0.022 -0.225)
- CIE Lab
- lab(45.33 25.07 -79.75)
- LCH
- lch(45.33 83.6 287.5)
- CMYK
- cmyk(82% 60% 0% 4%)
Tints · Shades · Tones
Tints
- 3F75F7
- 5486FA
- 6896FC
- 7DA6FE
- 92B5FF
- A7C4FF
- BDD3FF
- D3E2FF
- E9F1FF
Shades
- 2454D4
- 1D47B5
- 163A97
- 102D7A
- 0A215E
- 051644
- 020B2B
- 010314
- 000003
Tones
- 3468E9
- 3D6CDE
- 4671D3
- 4F74C8
- 5777BC
- 607AB1
- 687CA5
- 707E99
- 787F8D
Color harmonies
Complementary +180°
- 2B62F4
Retro Blue
- 916C00
≈ Honey Yellow Green
Analogous -30° +30°
- 2B62F4
Retro Blue
- 007CAC
≈ Jacuzzi
- 8046E6
≈ Candy Grape Fizz
Triadic +120° +240°
- 2B62F4
Retro Blue
- D70026
≈ Cardinal Rage
- 008B1E
≈ Verse Green
Split-complementary +150° +210°
- 2B62F4
Retro Blue
- AE5800
≈ Tijolo
- 727A00
≈ Flag Green
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
AAOn white
WCAG 5.05:1 · APCA Lc 74
Ag
FailOn black
WCAG 4.15:1 · APCA Lc 28
Best text color: #FFFFFF
WCAG 5.05:1 (AA) · APCA Lc 74
Contrast pairs
Code snippets
CSS
:root {
--retro-blue: #2b62f4;
--retro-blue-rgb: 43 98 244;
--retro-blue-oklch: oklch(0.553 0.226 264.3);
}
.element {
color: var(--retro-blue);
background-color: hsl(224 90% 56%);
border-color: oklch(0.553 0.226 264.3);
}Tailwind CSS v4
@theme {
--color-retro-blue: #2b62f4;
--color-retro-blue-50: #d7f4ff;
--color-retro-blue-100: #c5e6ff;
--color-retro-blue-200: #a7d1ff;
--color-retro-blue-300: #81b1ff;
--color-retro-blue-400: #5894ff;
--color-retro-blue-500: #3574ff;
--color-retro-blue-600: #2e63ec;
--color-retro-blue-700: #244fbe;
--color-retro-blue-800: #113b8f;
--color-retro-blue-900: #0b2865;
--color-retro-blue-950: #011546;
}SCSS
$retro-blue: #2b62f4;
$retro-blue-rgb: 43, 98, 244;
$retro-blue-light: mix(#fff, $retro-blue, 20%);
$retro-blue-dark: mix(#000, $retro-blue, 20%);
.element {
color: $retro-blue;
box-shadow: 0 0 0 2px rgba($retro-blue, 0.35);
}