#2BBBBC Tiffany Blue
rgb(43, 187, 188)
Color conversions
- HEX
- #2BBBBC
- RGB
- rgb(43, 187, 188)
- RGBA
- rgba(43, 187, 188, 1)
- HSL
- hsl(180, 63%, 45%)
- HSV / HSB
- hsv(180, 77%, 74%)
- CMYK
- cmyk(77%, 1%, 0%, 26%)
Wide-gamut spaces
- XYZ
- xyz(27.839, 39.682, 53.759)
- LAB
- lab(69.24 -35.37 -11.1)
- LCH
- lch(69.24 37.07 197.43)
- OKLAB
- oklab(72.16% -0.1103 -0.0309)
- OKLCH
- oklch(72.16% 0.1146 195.64)
- Nearest name
- Tiffany Blue
Shades, tints and tones
Color harmonies
The hue directly opposite on the color wheel. Maximum contrast, ideal for a single accent against a dominant brand color.
Neighbouring hues that share a temperature. The safest harmony for calm, cohesive interfaces.
Three hues evenly spaced 120 degrees apart. Vibrant and balanced — use one as dominant and the other two sparingly.
The complement split into two adjacent hues. Nearly the contrast of complementary with noticeably less tension.
Four hues at 90-degree intervals. A rich set for illustration, data visualisation, and category coding.
Two complementary pairs offset by 60 degrees. Gives two warm and two cool options in one system.
Similar colors
Opacity variations
#2bbbbc1a
#2bbbbc33
#2bbbbc4d
#2bbbbc66
#2bbbbc80
#2bbbbc99
#2bbbbcb3
#2bbbbccc
#2bbbbce6
#2bbbbcff
Accessibility and contrast
On white
2.35:1
Body text Fail · Large text Fail
On black
8.94:1
Body text AAA · Large text AA
White-on-color contrast is 2.35:1.
Color blindness preview
Protanopia
No red cones — ~1% of men
Protanomaly
Reduced red sensitivity — ~1% of men
Deuteranopia
No green cones — ~1% of men
Deuteranomaly
Reduced green sensitivity — ~5% of men
Tritanopia
No blue cones — very rare
Tritanomaly
Reduced blue sensitivity — very rare
Achromatopsia
No color perception — ~1 in 30,000
Achromatomaly
Partial color perception — rare
Meaning, psychology and brand usage
Clean, technical, and effortlessly modern
Cyan and teal sit between blue's trust and green's calm, reading as clinical and precise. They perform well in data visualisation because they remain distinguishable for most forms of colour vision deficiency.
Water, hygiene, and clarity almost universally. Teal specifically carries a mid-century and medical association in Western design history.
Cyan entered common vocabulary through four-colour printing, where it is one of the process inks. Egyptian blue and later cerulean gave artists the closest historical equivalents.
Excellent for healthcare, SaaS, and fintech seeking approachability without blue's ubiquity. Deepen it for text use — bright cyan rarely reaches AA on white.
Common industries: Healthcare, SaaS, Travel, Water & utilities, Beauty. Pairs well with coral for warmth, deep navy for hierarchy, soft gray for restraint.
Code exports
CSS
:root {
--color-tiffany-blue: #2bbbbc;
--color-tiffany-blue-rgb: 43 187 188;
--color-tiffany-blue-hsl: 180 63% 45%;
--color-tiffany-blue-oklch: 72.16% 0.1146 195.64;
}
.element {
color: #2bbbbc;
background-color: hsl(180, 63%, 45%);
border: 1px solid rgb(43 187 188 / 40%);
}SCSS
$tiffany-blue: #2bbbbc;
$tiffany-blue-light: #95ddde;
$tiffany-blue-dark: #165e5e;
.element {
color: $tiffany-blue;
background: rgba($tiffany-blue, 0.12);
&:hover {
color: darken($tiffany-blue, 8%);
}
}LESS
@tiffany-blue: #2bbbbc;
@tiffany-blue-light: lighten(@tiffany-blue, 12%);
@tiffany-blue-dark: darken(@tiffany-blue, 12%);
.element {
color: @tiffany-blue;
background: fade(@tiffany-blue, 12%);
}Tailwind CSS
/* Tailwind v4 — src/styles.css */
@theme {
--color-tiffany-blue-50: #d5f1f2;
--color-tiffany-blue-100: #bfebeb;
--color-tiffany-blue-200: #aae4e4;
--color-tiffany-blue-300: #80d6d7;
--color-tiffany-blue-400: #55c9c9;
--color-tiffany-blue-500: #2bbbbc;
--color-tiffany-blue-600: #27a8a9;
--color-tiffany-blue-700: #1e8384;
--color-tiffany-blue-800: #165e5e;
--color-tiffany-blue-900: #0d3838;
}
/* Usage */
<div class="bg-tiffany-blue-500 text-tiffany-blue-50 ring-tiffany-blue-600" />
/* Arbitrary value, no config needed */
<div class="bg-[#2bbbbc]" />Bootstrap
// Bootstrap 5 — _variables.scss (before importing bootstrap)
$tiffany-blue: #2bbbbc;
$primary: $tiffany-blue;
$theme-colors: map-merge($theme-colors, (
"tiffany-blue": $tiffany-blue
));
// Generates .text-tiffany-blue, .bg-tiffany-blue, .btn-tiffany-blue
@import "bootstrap/scss/bootstrap";Flutter
import 'package:flutter/material.dart';
const Color tiffanyBlue = Color(0xFF2BBBBC);
// As a MaterialColor swatch
const MaterialColor tiffanyBlueSwatch = MaterialColor(0xFF2BBBBC, <int, Color>{
50: Color(0xFFD5F1F2),
100: Color(0xFFBFEBEB),
200: Color(0xFFAAE4E4),
300: Color(0xFF80D6D7),
400: Color(0xFF55C9C9),
500: Color(0xFF2BBBBC),
600: Color(0xFF27A8A9),
700: Color(0xFF1E8384),
800: Color(0xFF165E5E),
900: Color(0xFF0D3838),
});Swift / SwiftUI
import SwiftUI
extension Color {
/// #2bbbbc — Tiffany Blue
static let tiffanyBlue = Color(
red: 0.1686,
green: 0.7333,
blue: 0.7373
)
}
// UIKit
extension UIColor {
static let tiffanyBlue = UIColor(
red: 0.1686,
green: 0.7333,
blue: 0.7373,
alpha: 1.0
)
}Android
<!-- res/values/colors.xml -->
<resources>
<color name="tiffany_blue">#2BBBBC</color>
<color name="tiffany_blue_translucent">#802BBBBC</color>
</resources>
<!-- Jetpack Compose -->
val TiffanyBlue = Color(0xFF2BBBBC)JavaScript
export const TIFFANY_BLUE = {
hex: "#2bbbbc",
rgb: [43, 187, 188],
hsl: [180, 63, 45],
oklch: "oklch(72.16% 0.1146 195.64)",
};JSON tokens
{
"$schema": "https://design-tokens.org/schema.json",
"tiffany-blue": {
"$type": "color",
"$value": "#2bbbbc",
"$description": "Tiffany Blue — generated by ColorVerse AI"
}
}