Named color · #16698C
Bondi
Bondi is #16698C: rgb(22 105 140), hsl(198 73% 32%), oklch(0.491 0.093 232.2). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Blue mean? → · Bondi color name →
#16698C
oklch(0.491 0.093 232.2)
Color conversions
- HEX
- #16698c
- RGB
- rgb(22 105 140)
- HSL
- hsl(198 73% 32%)
- HWB
- hwb(198 9% 45%)
- OKLCH
- oklch(0.491 0.093 232.2)
- OKLab
- oklab(0.491 -0.057 -0.073)
- CIE Lab
- lab(41.05 -14.63 -26.57)
- LCH
- lch(41.05 30.33 241.2)
- CMYK
- cmyk(84% 25% 0% 45%)
Tints · Shades · Tones
Tints
- 357797
- 4D86A3
- 6495AE
- 7AA3BA
- 90B2C5
- A6C1D1
- BCD1DC
- D2E0E8
- E8EFF3
Shades
- 125A79
- 0D4C67
- 093E55
- 063143
- 032433
- 021823
- 010C14
- 000407
- 000001
Tones
- 286C8B
- 356E8A
- 417189
- 4B7388
- 557587
- 5E7886
- 677A84
- 6F7C83
- 787E82
Color harmonies
Complementary +180°
- 16698C
Bondi
- 89502B
≈ Plane Brown
Analogous -30° +30°
- 16698C
Bondi
- 006E75
≈ Teal Motif
- 436095
≈ Last Light Blue
Triadic +120° +240°
- 16698C
Bondi
- 884966
≈ Noble Tone
- 62661E
≈ Earthy Khaki Green
Split-complementary +150° +210°
- 16698C
Bondi
- 8E4A48
≈ Rojo Oxide
- 7B5B14
≈ Blackfire Earth
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
AAOn white
WCAG 6.11:1 · APCA Lc 80
Ag
FailOn black
WCAG 3.43:1 · APCA Lc 22
Best text color: #FFFFFF
WCAG 6.11:1 (AA) · APCA Lc 80
Contrast pairs
Code snippets
CSS
:root {
--bondi: #16698c;
--bondi-rgb: 22 105 140;
--bondi-oklch: oklch(0.491 0.093 232.2);
}
.element {
color: var(--bondi);
background-color: hsl(198 73% 32%);
border-color: oklch(0.491 0.093 232.2);
}Tailwind CSS v4
@theme {
--color-bondi: #16698c;
--color-bondi-50: #dcfaff;
--color-bondi-100: #cbeeff;
--color-bondi-200: #aedcf6;
--color-bondi-300: #88c0e0;
--color-bondi-400: #62a8cc;
--color-bondi-500: #3a90b9;
--color-bondi-600: #337a9c;
--color-bondi-700: #28627d;
--color-bondi-800: #1a485c;
--color-bondi-900: #113241;
--color-bondi-950: #031e29;
}SCSS
$bondi: #16698c;
$bondi-rgb: 22, 105, 140;
$bondi-light: mix(#fff, $bondi, 20%);
$bondi-dark: mix(#000, $bondi, 20%);
.element {
color: $bondi;
box-shadow: 0 0 0 2px rgba($bondi, 0.35);
}