Nearest named color · #38BDF8
#38BDF8
Nearest named color: Capri
#38BDF8 (rgb(56 189 248), hsl(198 93% 60%), oklch(0.754 0.139 232.7)) is closest to the named color Capri. See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
#38BDF8
oklch(0.754 0.139 232.7)
Color conversions
- HEX
- #38bdf8
- RGB
- rgb(56 189 248)
- HSL
- hsl(198 93% 60%)
- HWB
- hwb(198 22% 3%)
- OKLCH
- oklch(0.754 0.139 232.7)
- OKLab
- oklab(0.754 -0.084 -0.111)
- CIE Lab
- lab(71.59 -21.72 -40.13)
- LCH
- lch(71.59 45.63 241.6)
- CMYK
- cmyk(77% 24% 0% 3%)
Tints · Shades · Tones
Tints
- 56C4F9
- 6ECBFA
- 83D2FB
- 96D9FC
- A9DFFD
- BBE6FE
- CCECFE
- DDF3FF
- EEF9FF
Shades
- 2FA4D8
- 278CB8
- 1F749A
- 175D7C
- 0F4760
- 083345
- 041F2C
- 010D15
- 000203
Tones
- 48B7EC
- 53B1E0
- 5CABD3
- 64A5C7
- 6B9FBB
- 7099AF
- 7593A3
- 798D98
- 7D868C
Color harmonies
Complementary +180°
- 38BDF8
Capri
- F39455
≈ Toucan
Analogous -30° +30°
- 38BDF8
Capri
- 00C6D2
≈ Turquoise Surf
- 84AEFF
≈ Kitten’s Eye
Triadic +120° +240°
- 38BDF8
Capri
- F188B7
≈ Brown Knapweed
- B0B843
≈ Hopscotch
Split-complementary +150° +210°
- 38BDF8
Capri
- FB8986
≈ Red Mull
- DAA632
≈ Golden Grass
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
FailOn white
WCAG 2.14:1 · APCA Lc 42
Ag
AAAOn black
WCAG 9.80:1 · APCA Lc 61
Best text color: #000000
WCAG 9.80:1 (AAA) · APCA Lc 61
Contrast pairs
Code snippets
CSS
:root {
--capri: #38bdf8;
--capri-rgb: 56 189 248;
--capri-oklch: oklch(0.754 0.139 232.7);
}
.element {
color: var(--capri);
background-color: hsl(198 93% 60%);
border-color: oklch(0.754 0.139 232.7);
}Tailwind CSS v4
@theme {
--color-capri: #38bdf8;
--color-capri-50: #cffdff;
--color-capri-100: #bbf0ff;
--color-capri-200: #98dfff;
--color-capri-300: #69c3f4;
--color-capri-400: #2cabe2;
--color-capri-500: #0093d2;
--color-capri-600: #007cb1;
--color-capri-700: #00648e;
--color-capri-800: #004a69;
--color-capri-900: #00334a;
--color-capri-950: #001f31;
}SCSS
$capri: #38bdf8;
$capri-rgb: 56, 189, 248;
$capri-light: mix(#fff, $capri, 20%);
$capri-dark: mix(#000, $capri, 20%);
.element {
color: $capri;
box-shadow: 0 0 0 2px rgba($capri, 0.35);
}