Named color · #77A7A9
Cresting Waves
Cresting Waves is #77A7A9: rgb(119 167 169), hsl(182 23% 56%), oklch(0.695 0.051 199.3). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Teal mean? → · Cresting Waves color name →
#77A7A9
oklch(0.695 0.051 199.3)
Color conversions
- HEX
- #77a7a9
- RGB
- rgb(119 167 169)
- HSL
- hsl(182 23% 56%)
- HWB
- hwb(182 47% 34%)
- OKLCH
- oklch(0.695 0.051 199.3)
- OKLab
- oklab(0.695 -0.048 -0.017)
- CIE Lab
- lab(65.13 -16.24 -6.49)
- LCH
- lch(65.13 17.49 201.8)
- CMYK
- cmyk(30% 1% 0% 34%)
Tints · Shades · Tones
Tints
- 85B0B1
- 92B8BA
- A0C1C2
- ADCACB
- BBD2D3
- C8DBDC
- D6E4E5
- E3EDED
- F1F6F6
Shades
- 679192
- 577B7C
- 476667
- 385253
- 2A3E3F
- 1C2C2C
- 101A1B
- 050A0A
- 010101
Tones
- 78A3A5
- 7A9FA1
- 7B9B9D
- 7C9798
- 7D9394
- 7E9090
- 7E8C8C
- 7F8888
- 808484
Color harmonies
Complementary +180°
- 77A7A9
Cresting Waves
- BB9190
≈ Rosy Brown
Analogous -30° +30°
- 77A7A9
Cresting Waves
- 7EA898
≈ Verdigreen
- 7CA4B7
≈ Inner Sanctum
Triadic +120° +240°
- 77A7A9
Cresting Waves
- AB93B1
≈ Enthroned Above
- AE9A79
≈ Dry Starfish
Split-complementary +150° +210°
- 77A7A9
Cresting Waves
- B690A2
≈ Lover’s Tryst
- B89481
≈ Caramelised
Tetradic +90° +180° +270°
- 77A7A9
Cresting Waves
- 9B98BB
≈ Thistle Down
- BB9190
≈ Rosy Brown
- 9FA07B
≈ French Parsley
Contrast & accessibility
Ag
FailOn white
WCAG 2.66:1 · APCA Lc 52
Ag
AAAOn black
WCAG 7.88:1 · APCA Lc 50
Best text color: #000000
WCAG 7.88:1 (AAA) · APCA Lc 50
Contrast pairs
Code snippets
CSS
:root {
--cresting-waves: #77a7a9;
--cresting-waves-rgb: 119 167 169;
--cresting-waves-oklch: oklch(0.695 0.051 199.3);
}
.element {
color: var(--cresting-waves);
background-color: hsl(182 23% 56%);
border-color: oklch(0.695 0.051 199.3);
}Tailwind CSS v4
@theme {
--color-cresting-waves: #77a7a9;
--color-cresting-waves-50: #e5fafb;
--color-cresting-waves-100: #d5edef;
--color-cresting-waves-200: #bcdbdd;
--color-cresting-waves-300: #99c0c2;
--color-cresting-waves-400: #7ba8aa;
--color-cresting-waves-500: #5c9193;
--color-cresting-waves-600: #4e7b7c;
--color-cresting-waves-700: #3e6264;
--color-cresting-waves-800: #2c4849;
--color-cresting-waves-900: #1e3232;
--color-cresting-waves-950: #0e1e1e;
}SCSS
$cresting-waves: #77a7a9;
$cresting-waves-rgb: 119, 167, 169;
$cresting-waves-light: mix(#fff, $cresting-waves, 20%);
$cresting-waves-dark: mix(#000, $cresting-waves, 20%);
.element {
color: $cresting-waves;
box-shadow: 0 0 0 2px rgba($cresting-waves, 0.35);
}