A study in green
Bootstrap Teal
#20C997
- Family
- Green
- L
- 0.744
- C
- 0.148
- H
- 166°
Notes
Bootstrap Teal is a brighter, more saturated accent color introduced in Bootstrap 5's extended palette. It sits between Success green and Info cyan, and is typically used in marketing components, dashboards, and data visualization rather than core UI chrome. The hex reads as fresh against both white and dark surfaces, and works well for charts and graphs where it can carry data alongside other accent colors without competing for foreground attention. A deep navy or charcoal handles type contrast. Body text contrast against white passes AA at headline sizes but is borderline below 14px.
Palette built around Bootstrap Teal
Related colors
Frequently asked questions
What is Bootstrap Teal?
Bootstrap Teal is a brighter, more saturated accent color introduced in Bootstrap 5's extended palette. It sits between Success green and Info cyan, and is typically used in marketing components, dashboards, and data visualization rather than core UI chrome. Its hex code is #20C997.
What are the tints and shades of Bootstrap Teal?
uishades builds an 11-step OKLCH ramp for Bootstrap Teal (#20C997) - its lightest tints through its darkest shades - plus an 11-stop Tailwind scale (50–950), both keyed to the same 50–950 stops. Lightness steps stay evenly spaced and the hue stays stable, so the mid-tones don't go muddy.
What colors pair well with Bootstrap Teal?
Its complementary color is #EE83BF. Triadic partners are #A69CFF and #F78B55; analogous neighbours are #00C7CB and #7FC15F.
What are the OKLCH and RGB values of Bootstrap Teal?
Bootstrap Teal is #20C997 - OKLCH 0.744 0.148 166°, rgb(32 201 151), in the green family.