Named color · #008468
Bosphorus
Bosphorus is #008468: rgb(0 132 104), hsl(167 100% 26%), oklch(0.546 0.107 171). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Teal mean? → · Bosphorus color name →
#008468
oklch(0.546 0.107 171)
Color conversions
- HEX
- #008468
- RGB
- rgb(0 132 104)
- HSL
- hsl(167 100% 26%)
- HWB
- hwb(167 0% 48%)
- OKLCH
- oklch(0.546 0.107 171)
- OKLab
- oklab(0.546 -0.106 0.017)
- CIE Lab
- lab(48.74 -37.52 6.07)
- LCH
- lch(48.74 38.01 170.8)
- CMYK
- cmyk(100% 0% 21% 48%)
Tints · Shades · Tones
Tints
- 339076
- 4F9C84
- 67A893
- 7DB4A2
- 93C1B1
- A9CDC0
- BED9CF
- D4E6DF
- E9F2EF
Shades
- 007259
- 00604B
- 004F3E
- 003F30
- 002F24
- 002018
- 00120C
- 000604
- 000100
Tones
- 24846A
- 35846D
- 42836F
- 4D8372
- 578374
- 608276
- 698279
- 71817B
- 79817E
Color harmonies
Complementary +180°
- 008468
Bosphorus
- 9E5478
≈ Sea Fan Fuchsia
Analogous -30° +30°
- 008468
Bosphorus
- 4B8043
≈ Guinean Green
- 008087
≈ Go Alpha
Triadic +120° +240°
- 008468
Bosphorus
- 7164AA
≈ Genestealer Purple
- A15C31
≈ Glazed Ginger
Split-complementary +150° +210°
- 008468
Bosphorus
- 8D5A96
≈ Wisteria Purple
- A65555
≈ The Ego Has Landed
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
AAOn white
WCAG 4.66:1 · APCA Lc 72
Ag
AAOn black
WCAG 4.50:1 · APCA Lc 30
Best text color: #FFFFFF
WCAG 4.66:1 (AA) · APCA Lc 72
Contrast pairs
Code snippets
CSS
:root {
--bosphorus: #008468;
--bosphorus-rgb: 0 132 104;
--bosphorus-oklch: oklch(0.546 0.107 171);
}
.element {
color: var(--bosphorus);
background-color: hsl(167 100% 26%);
border-color: oklch(0.546 0.107 171);
}Tailwind CSS v4
@theme {
--color-bosphorus: #008468;
--color-bosphorus-50: #d7fff2;
--color-bosphorus-100: #c4f4e4;
--color-bosphorus-200: #a5e4d0;
--color-bosphorus-300: #7bcab2;
--color-bosphorus-400: #52b396;
--color-bosphorus-500: #149d7d;
--color-bosphorus-600: #18846a;
--color-bosphorus-700: #146a54;
--color-bosphorus-800: #0e4e3c;
--color-bosphorus-900: #093629;
--color-bosphorus-950: #002117;
}SCSS
$bosphorus: #008468;
$bosphorus-rgb: 0, 132, 104;
$bosphorus-light: mix(#fff, $bosphorus, 20%);
$bosphorus-dark: mix(#000, $bosphorus, 20%);
.element {
color: $bosphorus;
box-shadow: 0 0 0 2px rgba($bosphorus, 0.35);
}