Generador de colores aleatorios

Divulgación: Recibo comisiones por las compras realizadas a través de los enlaces de esta página. Esto ayuda a mantener este sitio en funcionamiento.

Este es un útil generador de colores aleatorios. Genera y muestra los colores junto con los códigos hexadecimales para su uso en cualquier software de gráficos. También se muestra el código CSS para que pueda utilizar estos colores en un sitio web.

Se dan dos versiones de cada color; una con texto blanco y otra con texto negro.

incredibly #646F3B


.color-incredibly, .color-hover-incredibly:hover {color:#FFF!important; background-color:#646F3B!important}

incredibly #646F3B


.color-incredibly, .color-hover-incredibly:hover {color:#000!important; background-color:#646F3B!important}

jovially #A317D4


.color-jovially, .color-hover-jovially:hover {color:#FFF!important; background-color:#A317D4!important}

jovially #A317D4


.color-jovially, .color-hover-jovially:hover {color:#000!important; background-color:#A317D4!important}

joyfully #D3D951


.color-joyfully, .color-hover-joyfully:hover {color:#FFF!important; background-color:#D3D951!important}

joyfully #D3D951


.color-joyfully, .color-hover-joyfully:hover {color:#000!important; background-color:#D3D951!important}

naturally #C9C92D


.color-naturally, .color-hover-naturally:hover {color:#FFF!important; background-color:#C9C92D!important}

naturally #C9C92D


.color-naturally, .color-hover-naturally:hover {color:#000!important; background-color:#C9C92D!important}


 

¿Está pensando en viajar? Apueste por una marca hotelera mundial que ofrezca un excelente nivel de calidad a un precio bajo. Le recomendamos el Holiday Inn Express. Echa un vistazo a los precios de sus habitaciones aquí.


 

Colores aleatorios para cualquier propósito

Tanto si buscas inspiración para unos gráficos que estás diseñando, como si estás creando una página web, nuestro generador de colores aleatorios es una buena opción. Los códigos hexadecimales de los colores se dan para cada color generado.

También mostramos cómo se verían estos colores con texto blanco y con texto negro sobre ellos, para ayudarte a tener una idea de cómo te gustaría usarlos.

Si no te gusta ninguno de los colores generados, simplemente pulsa "Generar nuevo". Pero ten en cuenta que no puedes recuperar los colores anteriores, así que si hay algo que te gusta, copia y guarda los códigos hexadecimales antes de pulsar el botón.

Aquí hay algo para todos. Con una cantidad casi infinita de colores que se pueden generar, tienes muchas opciones para elegir.

Cómo generamos los colores

Estos colores son lo más aleatorios posible. Se generan escogiendo uno al azar de cada una de las letras hexagonales posibles en cada una de las 6 posiciones diferentes del código hexagonal.


Nombres de los colores

Los nombres de los colores mostrados aquí son sólo nombres temporales que utilizamos como marcadores de posición. Si necesita utilizar estos colores, por su propia conveniencia, probablemente debería renombrarlos con el nombre que desee. Queríamos asegurarnos de que los nombres que dimos no entraran en conflicto con otros nombres de colores existentes que pudiera estar utilizando en su proyecto (por ejemplo, verde claro).

Los nombres de colores que hemos dado pueden ser reutilizados para otros colores que se generen usando "Generar nuevo", así que no asuma que nuestros nombres son únicos para un color específico. Incluso es teóricamente posible, pero poco probable, que dos colores diferentes en la misma página tengan el mismo nombre.

Para los diseñadores web

CSS

Si piensas utilizar estos colores para la web, deberás copiar y pegar el código CSS de ese color (que se muestra en los cuadros de color) en tu hoja de estilos existente. Recuerda decidir si quieres la versión con texto negro o con texto blanco, ya que su código CSS es diferente. Como se mencionó anteriormente, tendrá que cambiar el nombre del color en su archivo CSS a algo que sea idealmente significativo para usted en cuanto a color y que no esté ya en uso bajo el mismo nombre en su hoja de estilos existente.

Todos nuestros nombres de marcadores de posición terminan en las letras "ly" para que sea un poco más fácil si necesitas buscar en tu hoja de estilos alguno que hayas olvidado modificar.

HTML

Después de copiar el código CSS en su hoja de estilos, puede utilizar cualquiera de estos colores en su HTML como sigue:

<div class="angrily">
<h3>Heading</h3>
<p>Paragraph content</p>
</div>

En el ejemplo anterior puede ver que sería mejor cambiar el nombre a un color significativo.

Los fondos oscuros vendrán automáticamente con el texto en blanco, por lo que no tendrá que especificar el color de fondo y el color del texto por separado.

Esta página fue actualizada por última vez el 19 de octubre de 2022