Nearest named color · #52A6BD
#52A6BD
Nearest named color: Surgical
#52A6BD (rgb(82 166 189), hsl(193 45% 53%), oklch(0.682 0.088 218.2)) is closest to the named color Surgical. See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
#52A6BD
oklch(0.682 0.088 218.2)
Color conversions
- HEX
- #52a6bd
- RGB
- rgb(82 166 189)
- HSL
- hsl(193 45% 53%)
- HWB
- hwb(193 32% 26%)
- OKLCH
- oklch(0.682 0.088 218.2)
- OKLab
- oklab(0.682 -0.069 -0.054)
- CIE Lab
- lab(63.59 -21.51 -20.1)
- LCH
- lch(63.59 29.44 223.1)
- CMYK
- cmyk(57% 12% 0% 26%)
Tints · Shades · Tones
Tints
- 66AFC4
- 78B8CA
- 8AC1D1
- 9BC9D7
- ACD2DE
- BCDBE5
- CDE4EB
- DEEDF2
- EEF6F8
Shades
- 4690A4
- 3B7A8C
- 2F6574
- 25515D
- 1A3E47
- 112B33
- 081A1F
- 020A0D
- 000102
Tones
- 59A2B7
- 5F9FB1
- 659BAB
- 6A97A4
- 6F939E
- 739098
- 768C92
- 7A888C
- 7D8486
Color harmonies
Complementary +180°
- 52A6BD
Surgical
- C88671
≈ Secluded Canyon
Analogous -30° +30°
- 52A6BD
Surgical
- 4FAAA3
≈ Paradise Island
- 6C9ECD
≈ Blue Electress
Triadic +120° +240°
- 52A6BD
Surgical
- BD84AC
≈ Joie de Vivre
- A79A58
≈ Iyanden Darksun
Split-complementary +150° +210°
- 52A6BD
Surgical
- C8828E
≈ Fake Crush
- BD8F5C
≈ Corner Café
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
FailOn white
WCAG 2.78:1 · APCA Lc 53
Ag
AAAOn black
WCAG 7.54:1 · APCA Lc 48
Best text color: #000000
WCAG 7.54:1 (AAA) · APCA Lc 48
Contrast pairs
Code snippets
CSS
:root {
--surgical: #52a6bd;
--surgical-rgb: 82 166 189;
--surgical-oklch: oklch(0.682 0.088 218.2);
}
.element {
color: var(--surgical);
background-color: hsl(193 45% 53%);
border-color: oklch(0.682 0.088 218.2);
}Tailwind CSS v4
@theme {
--color-surgical: #52a6bd;
--color-surgical-50: #dbfcff;
--color-surgical-100: #c9effc;
--color-surgical-200: #abdeee;
--color-surgical-300: #84c2d7;
--color-surgical-400: #5dabc1;
--color-surgical-500: #3094ad;
--color-surgical-600: #2b7d92;
--color-surgical-700: #226475;
--color-surgical-800: #164a56;
--color-surgical-900: #0e333c;
--color-surgical-950: #011f26;
}SCSS
$surgical: #52a6bd;
$surgical-rgb: 82, 166, 189;
$surgical-light: mix(#fff, $surgical, 20%);
$surgical-dark: mix(#000, $surgical, 20%);
.element {
color: $surgical;
box-shadow: 0 0 0 2px rgba($surgical, 0.35);
}