Named color · #00817F
Belly Flop
Belly Flop is #00817F: rgb(0 129 127), hsl(179 100% 25%), oklch(0.545 0.093 192.9). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Teal mean? → · Belly Flop color name →
#00817F
oklch(0.545 0.093 192.9)
Color conversions
- HEX
- #00817f
- RGB
- rgb(0 129 127)
- HSL
- hsl(179 100% 25%)
- HWB
- hwb(179 0% 49%)
- OKLCH
- oklch(0.545 0.093 192.9)
- OKLab
- oklab(0.545 -0.091 -0.021)
- CIE Lab
- lab(48.29 -31.06 -7.94)
- LCH
- lch(48.29 32.06 194.3)
- CMYK
- cmyk(100% 0% 2% 49%)
Tints · Shades · Tones
Tints
- 338D8B
- 4F9A97
- 67A6A4
- 7DB2B0
- 93BFBD
- A9CCCA
- BED8D7
- D4E5E4
- E9F2F2
Shades
- 006F6E
- 005E5D
- 004E4C
- 003E3C
- 002E2D
- 001F1F
- 001211
- 000606
- 000101
Tones
- 23817F
- 35817F
- 42817F
- 4D817F
- 578180
- 608180
- 698180
- 718180
- 798080
Color harmonies
Complementary +180°
- 00817F
Belly Flop
- 9F5861
≈ Cuban Rhythm
Analogous -30° +30°
- 00817F
Belly Flop
- 328160
≈ Adamite Green
- 1C7C98
≈ Pacific Pleasure
Triadic +120° +240°
- 00817F
Belly Flop
- 835F97
≈ Wisteria Purple
- 91672B
≈ Tapenade
Split-complementary +150° +210°
- 00817F
Belly Flop
- 96597F
≈ Immortality
- 9E5D42
≈ Sepia Skin
Tetradic +90° +180° +270°
- 00817F
Belly Flop
- 6969A5
≈ Inner Journey
- 9F5861
≈ Cuban Rhythm
- 7A722A
≈ Wood Garlic
Contrast & accessibility
Ag
AAOn white
WCAG 4.72:1 · APCA Lc 72
Ag
FailOn black
WCAG 4.44:1 · APCA Lc 29
Best text color: #FFFFFF
WCAG 4.72:1 (AA) · APCA Lc 72
Contrast pairs
Code snippets
CSS
:root {
--belly-flop: #00817f;
--belly-flop-rgb: 0 129 127;
--belly-flop-oklch: oklch(0.545 0.093 192.9);
}
.element {
color: var(--belly-flop);
background-color: hsl(179 100% 25%);
border-color: oklch(0.545 0.093 192.9);
}Tailwind CSS v4
@theme {
--color-belly-flop: #00817f;
--color-belly-flop-50: #d7fefd;
--color-belly-flop-100: #c5f2f1;
--color-belly-flop-200: #a5e1e0;
--color-belly-flop-300: #7cc7c6;
--color-belly-flop-400: #52b0ad;
--color-belly-flop-500: #149997;
--color-belly-flop-600: #188280;
--color-belly-flop-700: #146866;
--color-belly-flop-800: #0c4c4a;
--color-belly-flop-900: #083533;
--color-belly-flop-950: #00201f;
}SCSS
$belly-flop: #00817f;
$belly-flop-rgb: 0, 129, 127;
$belly-flop-light: mix(#fff, $belly-flop, 20%);
$belly-flop-dark: mix(#000, $belly-flop, 20%);
.element {
color: $belly-flop;
box-shadow: 0 0 0 2px rgba($belly-flop, 0.35);
}