Named color · #47BA87
Aragon Green
Aragon Green is #47BA87: rgb(71 186 135), hsl(153 45% 50%), oklch(0.71 0.129 161). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Green mean? → · Aragon Green color name →
#47BA87
oklch(0.71 0.129 161)
Color conversions
- HEX
- #47ba87
- RGB
- rgb(71 186 135)
- HSL
- hsl(153 45% 50%)
- HWB
- hwb(153 28% 27%)
- OKLCH
- oklch(0.71 0.129 161)
- OKLab
- oklab(0.71 -0.122 0.042)
- CIE Lab
- lab(68.07 -43.03 15.92)
- LCH
- lch(68.07 45.88 159.7)
- CMYK
- cmyk(62% 0% 27% 27%)
Tints · Shades · Tones
Tints
- 5FC193
- 74C89E
- 87CFAA
- 99D6B6
- ABDDC2
- BCE4CE
- CDEBDA
- DEF2E6
- EEF8F3
Shades
- 3DA175
- 328963
- 287251
- 1F5C41
- 164631
- 0D3221
- 061E13
- 020D06
- 000201
Tones
- 51B486
- 5AAF86
- 61A985
- 68A385
- 6D9D84
- 729783
- 769282
- 7A8C82
- 7D8681
Color harmonies
Complementary +180°
- 47BA87
Aragon Green
- D780B9
≈ Pink Punk
Analogous -30° +30°
- 47BA87
Aragon Green
- 85B258
≈ Usumoegi Green
- 00B9B4
≈ Jade Gravel
Triadic +120° +240°
- 47BA87
Aragon Green
- 9497F0
≈ Periwinkle Blue
- E48460
≈ Brewed Mustard
Split-complementary +150° +210°
- 47BA87
Aragon Green
- BB89DC
≈ Luminous Lavender
- E57D8D
≈ True Love
Tetradic +90° +180° +270°
- 47BA87
Aragon Green
- 60A6EF
≈ Cerulean
- D780B9
≈ Pink Punk
- D39239
≈ Hint of Caramel
Contrast & accessibility
Ag
FailOn white
WCAG 2.43:1 · APCA Lc 48
Ag
AAAOn black
WCAG 8.64:1 · APCA Lc 54
Best text color: #000000
WCAG 8.64:1 (AAA) · APCA Lc 54
Contrast pairs
Code snippets
CSS
:root {
--aragon-green: #47ba87;
--aragon-green-rgb: 71 186 135;
--aragon-green-oklch: oklch(0.71 0.129 161);
}
.element {
color: var(--aragon-green);
background-color: hsl(153 45% 50%);
border-color: oklch(0.71 0.129 161);
}Tailwind CSS v4
@theme {
--color-aragon-green: #47ba87;
--color-aragon-green-50: #d5ffeb;
--color-aragon-green-100: #c2f6dc;
--color-aragon-green-200: #a1e6c5;
--color-aragon-green-300: #75cca4;
--color-aragon-green-400: #4bb685;
--color-aragon-green-500: #009f69;
--color-aragon-green-600: #00875a;
--color-aragon-green-700: #056c47;
--color-aragon-green-800: #074f32;
--color-aragon-green-900: #053722;
--color-aragon-green-950: #002211;
}SCSS
$aragon-green: #47ba87;
$aragon-green-rgb: 71, 186, 135;
$aragon-green-light: mix(#fff, $aragon-green, 20%);
$aragon-green-dark: mix(#000, $aragon-green, 20%);
.element {
color: $aragon-green;
box-shadow: 0 0 0 2px rgba($aragon-green, 0.35);
}