Named color · #77B033
Natural Order
Natural Order is #77B033: rgb(119 176 51), hsl(87 55% 45%), oklch(0.693 0.165 131). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Green mean? → · Natural Order color name →
#77B033
oklch(0.693 0.165 131)
Color conversions
- HEX
- #77b033
- RGB
- rgb(119 176 51)
- HSL
- hsl(87 55% 45%)
- HWB
- hwb(87 20% 31%)
- OKLCH
- oklch(0.693 0.165 131)
- OKLab
- oklab(0.693 -0.108 0.124)
- CIE Lab
- lab(66.08 -33.96 54.33)
- LCH
- lch(66.08 64.07 122)
- CMYK
- cmyk(32% 0% 71% 31%)
Tints · Shades · Tones
Tints
- 84B84E
- 92C064
- 9FC879
- ACD08D
- BAD8A0
- C8E0B3
- D5E8C6
- E3F0D9
- F1F7EC
Shades
- 67992B
- 578223
- 476C1C
- 385614
- 2A420D
- 1C2E07
- 101C03
- 050B01
- 010100
Tones
- 78AB40
- 79A74B
- 7BA254
- 7C9D5C
- 7C9963
- 7D946A
- 7E8F70
- 7F8A76
- 7F857B
Color harmonies
Complementary +180°
- 77B033
Natural Order
- BD7BE6
≈ Lavender Blossom
Analogous -30° +30°
- 77B033
Natural Order
- B09E00
≈ Lucky
- 00B97C
≈ Fennel Fiesta
Triadic +120° +240°
- 77B033
Natural Order
- 3FA0FE
≈ Sky Dancer
- EF6A83
≈ Grapefruit Juice
Split-complementary +150° +210°
- 77B033
Natural Order
- 8C8DFF
≈ Lavender Blue Shadow
- DE6EBA
≈ Explicit Pink
Tetradic +90° +180° +270°
- 77B033
Natural Order
- 00ADD3
≈ Hú Lán Blue
- BD7BE6
≈ Lavender Blossom
- EE7343
≈ Aurora Orange
Contrast & accessibility
Ag
FailOn white
WCAG 2.61:1 · APCA Lc 51
Ag
AAAOn black
WCAG 8.04:1 · APCA Lc 51
Best text color: #000000
WCAG 8.04:1 (AAA) · APCA Lc 51
Contrast pairs
Code snippets
CSS
:root {
--natural-order: #77b033;
--natural-order-rgb: 119 176 51;
--natural-order-oklch: oklch(0.693 0.165 131);
}
.element {
color: var(--natural-order);
background-color: hsl(87 55% 45%);
border-color: oklch(0.693 0.165 131);
}Tailwind CSS v4
@theme {
--color-natural-order: #77b033;
--color-natural-order-50: #e3ffd0;
--color-natural-order-100: #d3f4bc;
--color-natural-order-200: #b9e49b;
--color-natural-order-300: #96c96f;
--color-natural-order-400: #7bb13e;
--color-natural-order-500: #5d9a00;
--color-natural-order-600: #4f8300;
--color-natural-order-700: #3f6900;
--color-natural-order-800: #304c00;
--color-natural-order-900: #203500;
--color-natural-order-950: #102000;
}SCSS
$natural-order: #77b033;
$natural-order-rgb: 119, 176, 51;
$natural-order-light: mix(#fff, $natural-order, 20%);
$natural-order-dark: mix(#000, $natural-order, 20%);
.element {
color: $natural-order;
box-shadow: 0 0 0 2px rgba($natural-order, 0.35);
}