Named color · #B4E2D5
Cruise
Cruise is #B4E2D5: rgb(180 226 213), hsl(163 44% 80%), oklch(0.877 0.051 176). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Teal mean? → · Cruise color name →
#B4E2D5
oklch(0.877 0.051 176)
Color conversions
- HEX
- #b4e2d5
- RGB
- rgb(180 226 213)
- HSL
- hsl(163 44% 80%)
- HWB
- hwb(163 71% 11%)
- OKLCH
- oklch(0.877 0.051 176)
- OKLab
- oklab(0.877 -0.051 0.004)
- CIE Lab
- lab(86.36 -17.42 1.21)
- LCH
- lch(86.36 17.46 176)
- CMYK
- cmyk(20% 0% 6% 11%)
Tints · Shades · Tones
Tints
- BCE5D9
- C3E8DD
- CBEBE1
- D2EEE6
- DAF1EA
- E1F3EE
- E9F6F2
- F0F9F6
- F8FCFB
Shades
- 9CC4B9
- 85A89E
- 6E8C83
- 58716A
- 445751
- 303E3A
- 1D2724
- 0C1210
- 020302
Tones
- AFD8CC
- AACEC3
- A5C4BB
- A0BAB2
- 9AB0AA
- 95A6A1
- 909C99
- 8B9390
- 858988
Color harmonies
Complementary +180°
- B4E2D5
Cruise
- F3C9D7
≈ Mountain Laurel
Analogous -30° +30°
- B4E2D5
Cruise
- C2E0C3
≈ Pallid Green
- B0E1E7
≈ Powder Blue
Triadic +120° +240°
- B4E2D5
Cruise
- D9D0F5
≈ Pale Lavender
- F2CFB7
≈ Apricot Freeze
Split-complementary +150° +210°
- B4E2D5
Cruise
- E9CBE9
≈ Bubblegum Crisis
- F7CAC5
≈ Cake Pop Pink
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
FailOn white
WCAG 1.42:1 · APCA Lc 20
Ag
AAAOn black
WCAG 14.78:1 · APCA Lc 83
Best text color: #000000
WCAG 14.78:1 (AAA) · APCA Lc 83
Contrast pairs
Code snippets
CSS
:root {
--cruise: #b4e2d5;
--cruise-rgb: 180 226 213;
--cruise-oklch: oklch(0.877 0.051 176);
}
.element {
color: var(--cruise);
background-color: hsl(163 44% 80%);
border-color: oklch(0.877 0.051 176);
}Tailwind CSS v4
@theme {
--color-cruise: #b4e2d5;
--color-cruise-50: #e7faf5;
--color-cruise-100: #d7eee8;
--color-cruise-200: #bedcd4;
--color-cruise-300: #9cc0b7;
--color-cruise-400: #7fa99d;
--color-cruise-500: #619285;
--color-cruise-600: #537b70;
--color-cruise-700: #42635a;
--color-cruise-800: #2f4841;
--color-cruise-900: #20322d;
--color-cruise-950: #101e1a;
}SCSS
$cruise: #b4e2d5;
$cruise-rgb: 180, 226, 213;
$cruise-light: mix(#fff, $cruise, 20%);
$cruise-dark: mix(#000, $cruise, 20%);
.element {
color: $cruise;
box-shadow: 0 0 0 2px rgba($cruise, 0.35);
}