Named color · #75C7E0
Hawaiian Breeze
Hawaiian Breeze is #75C7E0: rgb(117 199 224), hsl(194 63% 67%), oklch(0.786 0.088 219.6). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Cyan mean? → · Hawaiian Breeze color name →
#75C7E0
oklch(0.786 0.088 219.6)
Color conversions
- HEX
- #75c7e0
- RGB
- rgb(117 199 224)
- HSL
- hsl(194 63% 67%)
- HWB
- hwb(194 46% 12%)
- OKLCH
- oklch(0.786 0.088 219.6)
- OKLab
- oklab(0.786 -0.067 -0.056)
- CIE Lab
- lab(75.71 -21.12 -20.74)
- LCH
- lch(75.71 29.6 224.5)
- CMYK
- cmyk(48% 11% 0% 12%)
Tints · Shades · Tones
Tints
- 84CDE3
- 93D2E6
- A1D8EA
- AFDEED
- BDE3F0
- CAE9F3
- D8EEF6
- E5F4F9
- F2FAFC
Shades
- 65ADC3
- 5593A6
- 467A8A
- 376270
- 294C56
- 1C363E
- 0F2127
- 050E12
- 010202
Tones
- 78C0D6
- 7AB9CC
- 7CB1C2
- 7DAAB9
- 7EA3AF
- 7F9CA6
- 80959C
- 808E93
- 808789
Color harmonies
Complementary +180°
- 75C7E0
Hawaiian Breeze
- EBA78F
≈ Aloha Sunset
Analogous -30° +30°
- 75C7E0
Hawaiian Breeze
- 71CCC5
≈ Turkish Teal
- 8EBEF0
≈ Electric Eel
Triadic +120° +240°
- 75C7E0
Hawaiian Breeze
- E0A4CC
≈ Chateau Rose
- C7BB78
≈ Pistachio Shortbread
Split-complementary +150° +210°
- 75C7E0
Hawaiian Breeze
- EBA2AD
≈ Pinque
- DEB07B
≈ Wooden Sword
Tetradic +90° +180° +270°
- 75C7E0
Hawaiian Breeze
- CAAAE4
≈ Tropical Violet
- EBA78F
≈ Aloha Sunset
- A7C589
≈ Cos
Contrast & accessibility
Ag
FailOn white
WCAG 1.90:1 · APCA Lc 36
Ag
AAAOn black
WCAG 11.00:1 · APCA Lc 66
Best text color: #000000
WCAG 11.00:1 (AAA) · APCA Lc 66
Contrast pairs
Code snippets
CSS
:root {
--hawaiian-breeze: #75c7e0;
--hawaiian-breeze-rgb: 117 199 224;
--hawaiian-breeze-oklch: oklch(0.786 0.088 219.6);
}
.element {
color: var(--hawaiian-breeze);
background-color: hsl(194 63% 67%);
border-color: oklch(0.786 0.088 219.6);
}Tailwind CSS v4
@theme {
--color-hawaiian-breeze: #75c7e0;
--color-hawaiian-breeze-50: #dbfcff;
--color-hawaiian-breeze-100: #c9effd;
--color-hawaiian-breeze-200: #acddef;
--color-hawaiian-breeze-300: #84c2d7;
--color-hawaiian-breeze-400: #5eabc2;
--color-hawaiian-breeze-500: #3293ae;
--color-hawaiian-breeze-600: #2d7d93;
--color-hawaiian-breeze-700: #246476;
--color-hawaiian-breeze-800: #174a56;
--color-hawaiian-breeze-900: #0f333c;
--color-hawaiian-breeze-950: #021f26;
}SCSS
$hawaiian-breeze: #75c7e0;
$hawaiian-breeze-rgb: 117, 199, 224;
$hawaiian-breeze-light: mix(#fff, $hawaiian-breeze, 20%);
$hawaiian-breeze-dark: mix(#000, $hawaiian-breeze, 20%);
.element {
color: $hawaiian-breeze;
box-shadow: 0 0 0 2px rgba($hawaiian-breeze, 0.35);
}