Nearest named color · #2BA4FF
#2BA4FF
Nearest named color: Cerulean
#2BA4FF (rgb(43 164 255), hsl(206 100% 58%), oklch(0.698 0.168 246.9)) is closest to the named color Cerulean. See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
#2BA4FF
oklch(0.698 0.168 246.9)
Color conversions
- HEX
- #2ba4ff
- RGB
- rgb(43 164 255)
- HSL
- hsl(206 100% 58%)
- HWB
- hwb(206 17% 0%)
- OKLCH
- oklch(0.698 0.168 246.9)
- OKLab
- oklab(0.698 -0.066 -0.154)
- CIE Lab
- lab(64.33 -8.75 -55.27)
- LCH
- lch(64.33 55.96 261)
- CMYK
- cmyk(83% 36% 0% 0%)
Tints · Shades · Tones
Tints
- 4BAEFF
- 63B7FF
- 79C1FF
- 8DCAFF
- A1D3FF
- B4DCFF
- C7E5FF
- DAEEFF
- ECF6FF
Shades
- 248EDE
- 1D79BE
- 16649E
- 105080
- 0A3D63
- 052B48
- 021A2E
- 010A16
- 000103
Tones
- 3CA1F2
- 499EE5
- 539BD9
- 5C97CC
- 6494BF
- 6B90B3
- 718CA6
- 76889A
- 7B848D
Color harmonies
Complementary +180°
- 2BA4FF
Cerulean
- DC8700
≈ Fleur de Sel Caramel
Analogous -30° +30°
- 2BA4FF
Cerulean
- 00B0D0
≈ Aquarius
- 8691FF
≈ Lavender Blue Shadow
Triadic +120° +240°
- 2BA4FF
Cerulean
- F16A8C
≈ Cupid’s Arrow
- 82B023
≈ Football Field
Split-complementary +150° +210°
- 2BA4FF
Cerulean
- F3724C
≈ Fiery Sky
- B79D00
≈ Perennial
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
FailOn white
WCAG 2.67:1 · APCA Lc 51
Ag
AAAOn black
WCAG 7.85:1 · APCA Lc 50
Best text color: #000000
WCAG 7.85:1 (AAA) · APCA Lc 50
Contrast pairs
Code snippets
CSS
:root {
--cerulean: #2ba4ff;
--cerulean-rgb: 43 164 255;
--cerulean-oklch: oklch(0.698 0.168 246.9);
}
.element {
color: var(--cerulean);
background-color: hsl(206 100% 58%);
border-color: oklch(0.698 0.168 246.9);
}Tailwind CSS v4
@theme {
--color-cerulean: #2ba4ff;
--color-cerulean-50: #d1faff;
--color-cerulean-100: #bdedff;
--color-cerulean-200: #9bdaff;
--color-cerulean-300: #6ebdff;
--color-cerulean-400: #37a5fb;
--color-cerulean-500: #008bed;
--color-cerulean-600: #0075c8;
--color-cerulean-700: #005ea1;
--color-cerulean-800: #004678;
--color-cerulean-900: #003054;
--color-cerulean-950: #001c39;
}SCSS
$cerulean: #2ba4ff;
$cerulean-rgb: 43, 164, 255;
$cerulean-light: mix(#fff, $cerulean, 20%);
$cerulean-dark: mix(#000, $cerulean, 20%);
.element {
color: $cerulean;
box-shadow: 0 0 0 2px rgba($cerulean, 0.35);
}