Named color · #EBEDEE
Tropical Breeze
Tropical Breeze is #EBEDEE: rgb(235 237 238), hsl(200 8% 93%), oklch(0.945 0.003 228.8). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Gray mean? → · Tropical Breeze color name →
#EBEDEE
oklch(0.945 0.003 228.8)
Color conversions
- HEX
- #ebedee
- RGB
- rgb(235 237 238)
- HSL
- hsl(200 8% 93%)
- HWB
- hwb(200 92% 7%)
- OKLCH
- oklch(0.945 0.003 228.8)
- OKLab
- oklab(0.945 -0.002 -0.002)
- CIE Lab
- lab(93.61 -0.56 -0.73)
- LCH
- lch(93.61 0.92 232.7)
- CMYK
- cmyk(1% 0% 0% 7%)
Tints · Shades · Tones
Tints
- EDEFF0
- EFF1F1
- F1F2F3
- F3F4F5
- F5F6F6
- F7F8F8
- F9FAFA
- FBFBFC
- FDFDFD
Shades
- CCCECF
- AEB0B1
- 919393
- 757777
- 5B5C5C
- 414242
- 292A2A
- 131414
- 030303
Tones
- E0E2E2
- D5D6D7
- CACBCC
- BFC0C1
- B4B5B5
- A9AAAA
- 9F9FA0
- 949595
- 8A8A8A
Color harmonies
Complementary +180°
- EBEDEE
Tropical Breeze
- EEECEB
≈ Coronation
Analogous -30° +30°
- EBEDEE
Tropical Breeze
- EBEDED
≈ Tropical Breeze
- ECEDEE
≈ Tropical Breeze
Triadic +120° +240°
- EBEDEE
Tropical Breeze
- EEECED
≈ Snowberry
- EDEDEB
≈ Snow Storm
Split-complementary +150° +210°
- EBEDEE
Tropical Breeze
- EEECEC
≈ Coronation
- EEECEB
≈ Coronation
Tetradic +90° +180° +270°
- EBEDEE
Tropical Breeze
- EDECEE
≈ Sheikh White
- EEECEB
≈ Coronation
- ECEDEB
≈ Vibrant White
Contrast & accessibility
Ag
FailOn white
WCAG 1.17:1 · APCA Lc 8
Ag
AAAOn black
WCAG 17.88:1 · APCA Lc 96
Best text color: #000000
WCAG 17.88:1 (AAA) · APCA Lc 96
Contrast pairs
Code snippets
CSS
:root {
--tropical-breeze: #ebedee;
--tropical-breeze-rgb: 235 237 238;
--tropical-breeze-oklch: oklch(0.945 0.003 228.8);
}
.element {
color: var(--tropical-breeze);
background-color: hsl(200 8% 93%);
border-color: oklch(0.945 0.003 228.8);
}Tailwind CSS v4
@theme {
--color-tropical-breeze: #ebedee;
--color-tropical-breeze-50: #f4f5f6;
--color-tropical-breeze-100: #e7e8e8;
--color-tropical-breeze-200: #d3d4d5;
--color-tropical-breeze-300: #b6b7b8;
--color-tropical-breeze-400: #9d9f9f;
--color-tropical-breeze-500: #848687;
--color-tropical-breeze-600: #707273;
--color-tropical-breeze-700: #5a5b5c;
--color-tropical-breeze-800: #414243;
--color-tropical-breeze-900: #2d2e2e;
--color-tropical-breeze-950: #1a1b1b;
}SCSS
$tropical-breeze: #ebedee;
$tropical-breeze-rgb: 235, 237, 238;
$tropical-breeze-light: mix(#fff, $tropical-breeze, 20%);
$tropical-breeze-dark: mix(#000, $tropical-breeze, 20%);
.element {
color: $tropical-breeze;
box-shadow: 0 0 0 2px rgba($tropical-breeze, 0.35);
}