Blue Bikini
#00bbee
Softer sky-blue for friendly buttons and charts
About Blue Bikini
Blue Bikini sits closer to cyan than its neighbors, but it doesn't announce itself the way Capri does. It's got genuine saturation without the electric demand, bright enough to work on interactive elements, restrained enough that it doesn't feel like it's trying too hard. Think of it as the version of Capri that remembers there's actual content on the page.
Reach for this in product interfaces where you need color that reads as intentional and approachable: health apps, fintech dashboards, SaaS onboarding. Works as button states, card accents, or the kind of secondary surface that draws the eye without becoming the hierarchy problem. It's lighter and slightly cooler than Caribbean Blue, which means it sits somewhere between playful and professional without leaning too hard either direction. Pair it with dark text or charcoal backgrounds and it snaps into focus immediately.
On warmer monitors it'll drift toward true cyan, which honestly makes it feel friendlier. On cooler displays it holds tighter to blue. Test it early against your actual content backgrounds, the brightness means it needs the right neighboring color to settle in.
Code snippets
Copy this color into your project.
Contrast checker
WCAG 2.1 contrast ratios. AA requires 4.5:1 for normal text, 3:1 for large. AAA requires 7:1 / 4.5:1.
On White #ffffff
On Gray 100 #f5f5f5
On Gray 900 #18181b
On Black #000000
Variations
Shades
Darker variations, created by mixing toward black.
Tints
Lighter variations, created by mixing toward white.
Tones
Muted variations, created by reducing saturation.
Hues
Hue rotations around the color wheel.
Temperatures
Warm and cool shifts of this color.
Color harmonies
Suggested palettes
Palettes built around this color.
Community palettes
Published palettes that include this color.