colores html verde


El color verde, es uno de los más utilizados para representar elementos que tienen que ver con la naturaleza, la ecología, las plantas y el reciclaje.

Pero también puede ser utilizado en industrias como la agronomía o agricultura. En combinación con otras paletas de colores.

Pero ojo, que el color verde no es exclusivo de estos sectores del mercado, de hecho podemos verlo a diario en una marca tan usada como lo es Whatsapp, la app de mensajería más conocida del mundo.

En esta ocasión, quiero mostrarte distintas tonalidades de color verde que puedes usar para tu blog.

Antes que nada hay que comenzar por el principio:

¿Cómo crear el color verde?


Existen numerosos sistemas que permiten crear un color específico a través de códigos, los más conocidos son Hexadecimal o HEX, RGB, HSL y Pantone.

La utilización de estos sistemas queda a la elección de cada quien, sin embargo, cuando hablamos de diseño web, por lo general se usan los sistemas Hexadeximal y RGB.

Cada uno de ellos tiene una codificación diferente, pero este artículo no va a ser tan técnico para abarcar esos conceptos.

Sin embargo expliquemos un poco para que tengas una idea:

El color verde RGB:


En el sistema RGB, el color verde se identifica en el segundo valor, por lo tanto, para obtener un color verde máximo en RGB, usaremos los valores siguientes:

rgb(0,255,0)

En este caso, tendremos un color verde lima. No es el color verde puro, pero sí el más alto valor en cuanto a pureza.

El color verde hexadecimal:


Al igual que en el anterior, utilizaremos los valores centrales para obtener un color verde lima:

#00ff00

Recuerda que la "f" es el valor más alto en el sistema hexadecimal.

Este color que obtenemos con los valores centrales (ff) de nuestro código hex, es el equivalente al código RGB anterior.


Existen numerosos sistemas para crear colores en diseño web, los más conocidos son HEX y RGB


Click to tweet


Variaciones del verde:


Las variaciones de este color son las que nos darán las distintas tonalidades que podemos usar, decirlas todas es imposible, ya que sería combinar miles de códigos para poder elaborarlos.

Dichas variaciones se obtienen modificando los valores rojo y azul, los cuales se encuentran a la izquierda y a la derecha respectivamente en cualquiera de los dos sistemas que hayas elegido.

Sin embargo, voy a utilizar un truco que tenemos bajo la manga los desarrolladores y son los nombres de los colores.

Así es, los colores también tienen nombres.

Los navegadores modernos, soportan 140 nombres de colores, los cuales pueden ser usados en HTML y CSS ya bien por el nombre, el código hexadecimal o el código RGB.

23 de esos nombres, corresponden a los colores verdes o a su paleta propiamente dicha, y serán los que veremos a continuación:

  • Greenyellow: #adff2f RGB (173, 255, 47)
  • Chartreuse: #7fff00 RGB (127, 255, 0)
  • Lawngreen: #7CFC00 RGB (124, 252, 0)
  • Lime: #00FF00 RGB (0, 255, 0)
  • Limegreen: #32CD32 RGB (50, 205, 50)
  • Palegreen: #98FB98 RGB (152, 251, 152)
  • Lightgreen: #90EE90 RGB (144, 238, 144)
  • Mediumspringgreen: #00FA9A RGB (0, 250, 154)
  • Springgreen: #00FF7F RGB (0, 255, 127)
  • Mediumseagreen: #3CB371 RGB (60, 179, 113)
  • Seagreen: #2E8B57 RGB (46, 139, 87)
  • Forestgreen: #228B22 RGB (34, 139, 34)
  • Green: #008000 RGB (0, 128, 0)
  • Darkgreen: #006400 RGB (0, 100, 0)
  • Yellowgreen: #9ACD32 RGB (154, 205, 50)
  • Olivedrab: #6B8E23 RGB (107, 142, 35)
  • Olive: #808000 RGB (128, 128, 0)
  • Darkolivegreen: #556B2F RGB (85, 107, 47)
  • Mediumaquamarine: #66CDAA RGB (102, 205, 170)
  • Darkseagreen: #8FBC8B RGB (143, 188, 139)
  • Lightseagreen: #20B2AA RGB (32, 178, 170)
  • Darkcyan: #008B8B RGB (0, 139, 139)
  • Teal: #008080 RGB (0, 128, 128)

Estos son los 23 tonos de verde soportados en HTML y CSS con sus nombres escritos o códigos correspondientes.

Si ninguno de estos tonos te ha gustado, deberás buscar el código correspondiente al que te llame la atención o alque necesites y deberás referenciarlo por dicho código al momento de su aplicación.

A continuación te muestro una imagen que te sirva de referencia:

nombres de colores verdes html


Agradezco que no me critiquen la imagen 😅 para el próximo post acerca de colores, haré una mejor.

Recuerda siempre anotar los códigos de los colores que utilices para poder aplicarlos en las imágenes posteriores y que tengan coincidencia con los originales.

Ahora que ya tienes esta paleta de colores verdes de la cual puedes seleccionar el que gustes para tu blog o web, cuéntanos, ¿Qué color es tu favorito de todos estos?

Y si no tienes blog o web, solo tienes que chequear nuestro servicio de diseño de blogs profesionales, por medio del cual podrás obtener el tuyo.

¡Comparte si te ha gustado!



Artículos relacionados

Tal vez te interese uno de éstos:

🎥¿Cómo insertar videos en mi blog?
👷 10 actividades de un administrador web