Color con nombre · #22BB22
Lush Plains
Lush Plains es #22BB22: rgb(34 187 34), hsl(120 69% 43%), oklch(0.69 0.221 142.7). Mira tintes, sombras, armonías, contraste WCAG y APCA, y código CSS, Tailwind v4 y SCSS.
What does Green mean? → · Lush Plains color name →
#22BB22
oklch(0.69 0.221 142.7)
Conversiones de color
- HEX
- #22bb22
- RGB
- rgb(34 187 34)
- HSL
- hsl(120 69% 43%)
- HWB
- hwb(120 13% 27%)
- OKLCH
- oklch(0.69 0.221 142.7)
- OKLab
- oklab(0.69 -0.176 0.134)
- CIE Lab
- lab(66.58 -59.65 58.95)
- LCH
- lch(66.58 83.87 135.3)
- CMYK
- cmyk(82% 0% 82% 27%)
Tintes · Sombras · Tonos
Tintes
- 48C344
- 62CA5D
- 79D173
- 8ED888
- A1DF9C
- B5E6B0
- C8ECC4
- DAF3D8
- EDF9EB
Sombras
- 1CA21C
- 168A16
- 117311
- 0B5C0B
- 074607
- 033203
- 011F01
- 000D00
- 000200
Tonos
- 38B535
- 47B043
- 52AA4E
- 5CA557
- 649F60
- 6B9967
- 71936E
- 778D74
- 7B867A
Armonías de color
Complementario +180°
- 22BB22
Lush Plains
- D960E9
≈ Clematis Magenta
Análogo -30° +30°
- 22BB22
Lush Plains
- 9DA400
≈ Fistfull of Green
- 00B593
≈ Aloha
Triádico +120° +240°
- 22BB22
Lush Plains
- 6498FF
≈ Blue Chaos
- FF5B5F
≈ Fusion Red
Complementario dividido +150° +210°
- 22BB22
Lush Plains
- A181FF
≈ Purple Illusionist
- FB4FA8
≈ Barbie Pink
Tetrádico +90° +180° +270°
Contraste y accesibilidad
Ag
FailSobre blanco
WCAG 2.56:1 · APCA Lc 49
Ag
AAASobre negro
WCAG 8.19:1 · APCA Lc 52
Mejor color de texto: #000000
WCAG 8.19:1 (AAA) · APCA Lc 52
Contrast pairs
Fragmentos de código
CSS
:root {
--lush-plains: #22bb22;
--lush-plains-rgb: 34 187 34;
--lush-plains-oklch: oklch(0.69 0.221 142.7);
}
.element {
color: var(--lush-plains);
background-color: hsl(120 69% 43%);
border-color: oklch(0.69 0.221 142.7);
}Tailwind CSS v4
@theme {
--color-lush-plains: #22bb22;
--color-lush-plains-50: #ceffce;
--color-lush-plains-100: #bafcba;
--color-lush-plains-200: #96ed98;
--color-lush-plains-300: #64d46b;
--color-lush-plains-400: #35bd33;
--color-lush-plains-500: #00a700;
--color-lush-plains-600: #008d00;
--color-lush-plains-700: #007100;
--color-lush-plains-800: #005300;
--color-lush-plains-900: #003a00;
--color-lush-plains-950: #002400;
}SCSS
$lush-plains: #22bb22;
$lush-plains-rgb: 34, 187, 34;
$lush-plains-light: mix(#fff, $lush-plains, 20%);
$lush-plains-dark: mix(#000, $lush-plains, 20%);
.element {
color: $lush-plains;
box-shadow: 0 0 0 2px rgba($lush-plains, 0.35);
}