Nearest named color · #3F90BA
#3F90BA
Nearest named color: Swimmer
#3F90BA (rgb(63 144 186), hsl(200 49% 49%), oklch(0.621 0.101 234.3)) is closest to the named color Swimmer. See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
#3F90BA
oklch(0.621 0.101 234.3)
Color conversions
- HEX
- #3f90ba
- RGB
- rgb(63 144 186)
- HSL
- hsl(200 49% 49%)
- HWB
- hwb(200 25% 27%)
- OKLCH
- oklch(0.621 0.101 234.3)
- OKLab
- oklab(0.621 -0.059 -0.082)
- CIE Lab
- lab(56.16 -15.41 -29.81)
- LCH
- lch(56.16 33.56 242.7)
- CMYK
- cmyk(66% 23% 0% 27%)
Tints · Shades · Tones
Tints
- 559BC1
- 69A6C8
- 7DB1CF
- 8FBCD6
- A2C7DD
- B5D2E4
- C7DDEB
- DAE9F2
- ECF4F8
Shades
- 357DA1
- 2C6A89
- 235772
- 1B455C
- 123446
- 0A2432
- 04151E
- 01070D
- 000102
Tones
- 498FB4
- 518DAF
- 588CA9
- 5F8AA3
- 66899D
- 6B8798
- 718592
- 76848C
- 7B8286
Color harmonies
Complementary +180°
- 3F90BA
Swimmer
- B57549
≈ Copper Mine
Analogous -30° +30°
- 3F90BA
Swimmer
- 1B98A3
≈ Mediterranean Swirl
- 6885C4
≈ Livid
Triadic +120° +240°
- 3F90BA
Swimmer
- B66C8A
≈ Pinky Pickle
- 858D41
≈ Vegetable Garden
Split-complementary +150° +210°
- 3F90BA
Swimmer
- BC6D68
≈ Shepherd’s Warning
- A38137
≈ Cloisonné Gold
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
FailOn white
WCAG 3.55:1 · APCA Lc 63
Ag
AAOn black
WCAG 5.90:1 · APCA Lc 39
Best text color: #000000
WCAG 5.90:1 (AA) · APCA Lc 39
Contrast pairs
Code snippets
CSS
:root {
--swimmer: #3f90ba;
--swimmer-rgb: 63 144 186;
--swimmer-oklch: oklch(0.621 0.101 234.3);
}
.element {
color: var(--swimmer);
background-color: hsl(200 49% 49%);
border-color: oklch(0.621 0.101 234.3);
}Tailwind CSS v4
@theme {
--color-swimmer: #3f90ba;
--color-swimmer-50: #dbfaff;
--color-swimmer-100: #c9eeff;
--color-swimmer-200: #acdcfa;
--color-swimmer-300: #85c0e4;
--color-swimmer-400: #5da8d1;
--color-swimmer-500: #3290bf;
--color-swimmer-600: #2d7aa1;
--color-swimmer-700: #246281;
--color-swimmer-800: #16485f;
--color-swimmer-900: #0e3243;
--color-swimmer-950: #021e2b;
}SCSS
$swimmer: #3f90ba;
$swimmer-rgb: 63, 144, 186;
$swimmer-light: mix(#fff, $swimmer, 20%);
$swimmer-dark: mix(#000, $swimmer, 20%);
.element {
color: $swimmer;
box-shadow: 0 0 0 2px rgba($swimmer, 0.35);
}