Named color · #BAE9E0
Barely Aqua
Barely Aqua is #BAE9E0: rgb(186 233 224), hsl(169 52% 82%), oklch(0.899 0.05 182.2). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Teal mean? → · Barely Aqua color name →
#BAE9E0
oklch(0.899 0.05 182.2)
Color conversions
- HEX
- #bae9e0
- RGB
- rgb(186 233 224)
- HSL
- hsl(169 52% 82%)
- HWB
- hwb(169 73% 9%)
- OKLCH
- oklch(0.899 0.05 182.2)
- OKLab
- oklab(0.899 -0.05 -0.002)
- CIE Lab
- lab(88.86 -17.05 -0.87)
- LCH
- lch(88.86 17.07 182.9)
- CMYK
- cmyk(20% 0% 4% 9%)
Tints · Shades · Tones
Tints
- C1EBE3
- C8EDE6
- CFF0E9
- D6F2EC
- DDF4EF
- E4F6F3
- EBF8F6
- F2FBF9
- F8FDFC
Shades
- A1CBC3
- 89ADA6
- 72908A
- 5C7470
- 465A56
- 32413E
- 1E2927
- 0D1312
- 020302
Tones
- B4DED6
- AFD3CC
- A9C8C2
- A3BEB8
- 9DB3AF
- 97A9A5
- 929E9C
- 8C9492
- 868A89
Color harmonies
Complementary +180°
- BAE9E0
Barely Aqua
- FBD0DB
≈ Summer Cosmos
Analogous -30° +30°
- BAE9E0
Barely Aqua
- C6E8CE
≈ Granny Apple
- B8E7F1
≈ First of July
Triadic +120° +240°
- BAE9E0
Barely Aqua
- E3D6FA
≈ Japan Blush
- F7D7BC
≈ Beyond the Pale
Split-complementary +150° +210°
- BAE9E0
Barely Aqua
- F2D2EC
≈ Scented Spring
- FDD2C9
≈ Snow Pa
Tetradic +90° +180° +270°
- BAE9E0
Barely Aqua
- D2DCFF
≈ Arc Light
- FBD0DB
≈ Summer Cosmos
- E9DDB9
≈ Jodhpurs
Contrast & accessibility
Ag
FailOn white
WCAG 1.32:1 · APCA Lc 16
Ag
AAAOn black
WCAG 15.81:1 · APCA Lc 88
Best text color: #000000
WCAG 15.81:1 (AAA) · APCA Lc 88
Contrast pairs
Code snippets
CSS
:root {
--barely-aqua: #bae9e0;
--barely-aqua-rgb: 186 233 224;
--barely-aqua-oklch: oklch(0.899 0.05 182.2);
}
.element {
color: var(--barely-aqua);
background-color: hsl(169 52% 82%);
border-color: oklch(0.899 0.05 182.2);
}Tailwind CSS v4
@theme {
--color-barely-aqua: #bae9e0;
--color-barely-aqua-50: #e6faf7;
--color-barely-aqua-100: #d7eeea;
--color-barely-aqua-200: #bedcd7;
--color-barely-aqua-300: #9cc0ba;
--color-barely-aqua-400: #7ea9a1;
--color-barely-aqua-500: #609189;
--color-barely-aqua-600: #527b74;
--color-barely-aqua-700: #41625c;
--color-barely-aqua-800: #2f4843;
--color-barely-aqua-900: #20322e;
--color-barely-aqua-950: #0f1e1b;
}SCSS
$barely-aqua: #bae9e0;
$barely-aqua-rgb: 186, 233, 224;
$barely-aqua-light: mix(#fff, $barely-aqua, 20%);
$barely-aqua-dark: mix(#000, $barely-aqua, 20%);
.element {
color: $barely-aqua;
box-shadow: 0 0 0 2px rgba($barely-aqua, 0.35);
}