Named color · #27B692
Aoife’s Green
Aoife’s Green is #27B692: rgb(39 182 146), hsl(165 65% 43%), oklch(0.695 0.128 170.8). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Teal mean? → · Aoife’s Green color name →
#27B692
oklch(0.695 0.128 170.8)
Color conversions
- HEX
- #27b692
- RGB
- rgb(39 182 146)
- HSL
- hsl(165 65% 43%)
- HWB
- hwb(165 15% 29%)
- OKLCH
- oklch(0.695 0.128 170.8)
- OKLab
- oklab(0.695 -0.126 0.02)
- CIE Lab
- lab(66.31 -44.65 7.42)
- LCH
- lch(66.31 45.26 170.6)
- CMYK
- cmyk(79% 0% 20% 29%)
Tints · Shades · Tones
Tints
- 4BBE9C
- 65C5A7
- 7BCCB2
- 90D4BC
- A3DBC7
- B6E2D2
- C9EADD
- DBF1E8
- EDF8F4
Shades
- 209E7E
- 1A866B
- 146F58
- 0E5946
- 084435
- 043025
- 021D16
- 010C08
- 000201
Tones
- 3CB190
- 4AAB8E
- 55A68D
- 5EA18B
- 659B89
- 6C9687
- 729185
- 778B84
- 7C8682
Color harmonies
Complementary +180°
- 27B692
Aoife’s Green
- D87AA7
≈ Wild Orchid
Analogous -30° +30°
- 27B692
Aoife’s Green
- 6EB063
≈ Arugula
- 00B2BB
≈ Marrakech Mile
Triadic +120° +240°
- 27B692
Aoife’s Green
- 9D8EE6
≈ Perrywinkle
- DB844E
≈ Seraphim Sepia
Split-complementary +150° +210°
- 27B692
Aoife’s Green
- C181CD
≈ Purception
- E17A7A
≈ Babe
Tetradic +90° +180° +270°
- 27B692
Aoife’s Green
- 6F9CEC
≈ Feather Star
- D87AA7
≈ Wild Orchid
- C5932E
≈ Oro
Contrast & accessibility
Ag
FailOn white
WCAG 2.56:1 · APCA Lc 50
Ag
AAAOn black
WCAG 8.19:1 · APCA Lc 52
Best text color: #000000
WCAG 8.19:1 (AAA) · APCA Lc 52
Contrast pairs
Code snippets
CSS
:root {
--aoife-s-green: #27b692;
--aoife-s-green-rgb: 39 182 146;
--aoife-s-green-oklch: oklch(0.695 0.128 170.8);
}
.element {
color: var(--aoife-s-green);
background-color: hsl(165 65% 43%);
border-color: oklch(0.695 0.128 170.8);
}Tailwind CSS v4
@theme {
--color-aoife-s-green: #27b692;
--color-aoife-s-green-50: #d1fff1;
--color-aoife-s-green-100: #bdf6e4;
--color-aoife-s-green-200: #9ae7cf;
--color-aoife-s-green-300: #6bcdb1;
--color-aoife-s-green-400: #37b694;
--color-aoife-s-green-500: #00a07a;
--color-aoife-s-green-600: #008868;
--color-aoife-s-green-700: #006d53;
--color-aoife-s-green-800: #00503a;
--color-aoife-s-green-900: #003828;
--color-aoife-s-green-950: #002216;
}SCSS
$aoife-s-green: #27b692;
$aoife-s-green-rgb: 39, 182, 146;
$aoife-s-green-light: mix(#fff, $aoife-s-green, 20%);
$aoife-s-green-dark: mix(#000, $aoife-s-green, 20%);
.element {
color: $aoife-s-green;
box-shadow: 0 0 0 2px rgba($aoife-s-green, 0.35);
}