Nearest named color · #1FA8B1
#1FA8B1
Nearest named color: Baltic
#1FA8B1 (rgb(31 168 177), hsl(184 70% 41%), oklch(0.668 0.108 202)) is closest to the named color Baltic. See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
#1FA8B1
oklch(0.668 0.108 202)
Color conversions
- HEX
- #1fa8b1
- RGB
- rgb(31 168 177)
- HSL
- hsl(184 70% 41%)
- HWB
- hwb(184 12% 31%)
- OKLCH
- oklch(0.668 0.108 202)
- OKLab
- oklab(0.668 -0.1 -0.04)
- CIE Lab
- lab(62.54 -33.17 -15.16)
- LCH
- lch(62.54 36.47 204.6)
- CMYK
- cmyk(82% 5% 0% 31%)
Tints · Shades · Tones
Tints
- 45B1B9
- 60BAC0
- 76C2C8
- 8CCBD0
- A0D4D8
- B3DCDF
- C6E5E7
- D9EEEF
- ECF6F7
Shades
- 199299
- 147C83
- 0F676C
- 0A5257
- 063F42
- 032C2F
- 011A1C
- 000A0C
- 000101
Tones
- 36A4AC
- 45A0A7
- 509CA2
- 5A989D
- 629598
- 699193
- 708C8F
- 76888A
- 7B8485
Color harmonies
Complementary +180°
- 1FA8B1
Baltic
- CF7977
≈ Hearts Afire
Analogous -30° +30°
- 1FA8B1
Baltic
- 3DAA8D
≈ Zomp
- 43A0CC
≈ Sea Ridge
Triadic +120° +240°
- 1FA8B1
Baltic
- B47EBC
≈ Colombo Red Mauve
- B68E3E
≈ Mayan Gold
Split-complementary +150° +210°
- 1FA8B1
Baltic
- C7789C
≈ Dolomite Red
- C98154
≈ Apricot Buff
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
FailOn white
WCAG 2.87:1 · APCA Lc 55
Ag
AAAOn black
WCAG 7.29:1 · APCA Lc 47
Best text color: #000000
WCAG 7.29:1 (AAA) · APCA Lc 47
Contrast pairs
Code snippets
CSS
:root {
--baltic: #1fa8b1;
--baltic-rgb: 31 168 177;
--baltic-oklch: oklch(0.668 0.108 202);
}
.element {
color: var(--baltic);
background-color: hsl(184 70% 41%);
border-color: oklch(0.668 0.108 202);
}Tailwind CSS v4
@theme {
--color-baltic: #1fa8b1;
--color-baltic-50: #d2ffff;
--color-baltic-100: #bef3f8;
--color-baltic-200: #9ce2e9;
--color-baltic-300: #6fc8d1;
--color-baltic-400: #3bb1ba;
--color-baltic-500: #009aa5;
--color-baltic-600: #00838b;
--color-baltic-700: #00696f;
--color-baltic-800: #004d51;
--color-baltic-900: #003638;
--color-baltic-950: #002123;
}SCSS
$baltic: #1fa8b1;
$baltic-rgb: 31, 168, 177;
$baltic-light: mix(#fff, $baltic, 20%);
$baltic-dark: mix(#000, $baltic, 20%);
.element {
color: $baltic;
box-shadow: 0 0 0 2px rgba($baltic, 0.35);
}