Colores CSS para web

Colores CSS para web

Print Friendly, PDF & Email
Colores CSS para web
Valora esta entrada
Para gustos los colores.

¿Como lo trasladamos a una página web?

Existen distintas formas de indicar los colores que queremos dar a los elementos de un documento.

Básicamente necesitamos saber la diferencia entre CMYK y RGB y que significan.

Dominar los colores RGB, RGBa y Hexadecimal.

También existen los sistemas HSL y HSLa pero yo no los voy a mencionar en esta publicación.

Diferencia entre RGB y CMYK

Se explica este concepto porqué es prácticamente de lo primero que verás si alguna vez has abierto photoshop.

Es interesante saber que significa cada cosa y no quedar como un “petardo” cuando vayas a ver un cliente.

RGB y CMYK son diferentes esquemas para representar los colores.

  • RGB es el acrónimo de Red, Green, Blue.. Para web usaremos siempre RGB. 
  • CMYK es el acrónimo de Cian, Magenta, Yellow y Black. Para impresión en papel física usaremos siempre CMYK.  Esto es flyers, tarjetas de visita, carpetas, proyectos, etc.

Para profundizar sobre el porqué de CMYK deberíamos preguntárselo a alguien que se dedique al mundo de la imprenta. Os recomiendo esta entrada.

Demos a continuación un poquito de forma al RGB.

Esquema de color RGB aplicado al CSS

RGB son el acrónimo que representa el esquema de color Red, Green, Blue.

Todo color en una pantalla se puede representar como una mezcla de estos 3 colores, indicando la proporción de cada uno con un número del 0 al 255.

Por ejemplo:

  • El rojo se representaría como rgb(255,0,0)
  • El verde se representaría como rgb(0,255,0)
  • El azul se representaría como rgb(0,0,255)

Y de las mezclas anteriores obtendríamos

  • El amarillo se representaría como rgb(255,255,0)
  • El azul cyan se representaría como rgb(0,255,255)
  • El rosa magenta se representaría como rgb(255,0,255)
  • El blanco se representaría como rgb(255,255,255)
  • El negro se representaría como rgb(0,0,0)

Hasta aquí la teoria. ¿Como lo aplicamos a CSS?

Veamos algunos ejemplos en la imagen contigua.

Colores RGB CSS
Ejemplo de uso en CSS de colores RGB

Esquema de color RGBa aplicado al CSS

RGBa es una derivada de RGB en la que se incluye un cuarto parámetro “a” que indica el grado de transparencia – alpha channel.

Indica de una escala de 0 a 1 el porcentaje de puntos que vamos a dejar de “pintar”.

  • 0, significa que no vamos a pintar nada, es decir transparencia total.
  • 1, significa que vamos a pintar todo, es decir el máximo grado de relleno de color posible.

Veamos algunos ejemplos de como se utiliza en CSS:

Ejemplo de uso en CSS de colores RGBa
Ejemplo de uso en CSS de colores RGBa

Esquema de color HEXADECIMAL aplicado al CSS

Hexadecimal significa que vamos a utilizar un sistema de numeración con los carácteres 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F.

16 letras. De aquí el número.

Siendo 0 la unidad mínima y F el valor de orden máximo.

Hexadecimal tiene la misma filosofía que RGB. Representamos los colores a partir de 3 bloques de rojo, verde y azul salvo que esta vez con los carácteres 0-F.

Delante de cada color se usa el símbolo hashtag #

Los más fácil es ver ejemplos:

Por ejemplo:

  • El rojo se representaría como #ff0000
  • El verde se representaría como#00ff00
  • El azul se representaría como#0000ff

Y de las mezclas anteriores obtendríamos

  • El amarillo se representaría como #ffff00
  • El azul cyan se representaría como#00ffff
  • El rosa magenta se representaría como #ff00ff
  • El blanco se representaría como #ffffff
  • El negro se representaría como #000000

El hexadecimal tiene una particularidad que es cuando dos letras o números contiguos (dentro del bloque rojo, verde o azul) van a ser idénticos entonces podemos omitir una de las dos letras o números.

Por ejemplo

  • El rojo se representaría como #ff0000 pero de forma resumida también se puede representar como #f00
  • El verde se representaría como#00ff00 pero de forma resumida también se puede representar como #0f0
  • El azul se representaría como#0000ff pero de forma resumida también se puede representar como #00f

Hasta aquí la teoria. ¿Como lo aplicamos a CSS?

Veamos algunos ejemplos en la imagen contigua.

Colores CSS en hexadecimal
Ejemplo de uso en CSS de colores HEX

Safe colors

Habrás visto en viejos libros llenos de polvo que también se pueden indicar algunos colores directamente por su nombre en inglés.

Por ejemplo tenemos el red, el blue, el black, el white… y así hasta llegar a los 256 colores que se considera todos los monitores son capaces de representar.

Podríamos decir que este esquema de color es una reminiscencia del pasado.

Personalmente no me gustan.

Aunque son muy prácticos para hacer ejemplos rápidos de clase.

Yo los usaría para aprender pero no para un proyecto serio.

Hazlo como tu prefieras.

Ejemplo de uso de safe colors en CSS

Recursos útiles para lidiar con los colores de una web

Para que te hagas una idea necesito pedir consejo para saber si unos pantalones y una camisa combinan.

No siempre puedo estar preguntando a mi diseñadora si algo le parece bien o no. ¡Viva los diseñadores!

Pero hay algunas herramientas que nos pueden ayudar.

  1. Para encontrar paletas de colores que combinen recomiendo la herramienta coolors.co
  2. Para saber los colores que se están usando en una página web lo mejor es el usar el inspector web. Sin embargo si quieres algo más rápido entonces usa la extensión de chrome colorZilla

Y esto es todo. Usa los colores con criterio, y ante la duda… ¡pregunta!

Consideraciones sobre el uso de los esquemas de colores

Si me permites una última consideración.

Sé consistente con el uso de los esquemas de colores.

Si vas a usar RGB úsalo siempre, no lo mezcles con Hexadecimal. Y viceversa. Ídem con los safe colors.

Mi esquema predilecto es el HEX.

¡Hola querido lector!

Hasta aquí un nuevo capítulo de nuestro tutorial CSS.

¡Nos leemos mañana con un nuevo contenido en el blog!

Entradas relacionadas:

Box Sizing, como modificar el modelo de cajas convencional
- 78
¿Se rompen las columnas de tu web al redimensionar el ancho de tu navegador? En esta publicación hablamos de box-sizing con un ejemplo real.
Creación de un menú horizontal con sub menú desplegable mediante CSS
- 22
Código CSS explicado paso a paso para crear un menú horizontal con un sub menú vertical. Apuntes de alumno IFCD0110 tutorial CSS.
Introducción al CSS. Que significa Cascading Style Sheets.
- 136
Se explica que es el CSS, que significa en realidad el acrónimo y porqué se le llama así y hacemos una primera toma de contacto con este lenguaje web.
Como crear columnas con CSS de forma fácil mediante Inline-block y float
- 40
Dado un mismo código html como crearíamos columnas en un documento web utilizando floats versus haciéndolo con inline-block;
La propiedad z-index
- 14
Resumen y ejemplo de aplicación de la propiedad Z-index. Asignatura CSS curso confección y publicación de páginas web.
Maquetar una página de prestashop 1.6 con bootstrap
- 324
Maquetar páginas en Prestashop 1.6 con tablas es un deporte de riesgo para implementadores anclados en el pasado. En esta entrada te muestro un ejemplo sencillo y sin demasiadas complicaciones para qu...
Factores que afectan al tiempo de carga de una página web
- 256
Resumimos los principales factores que deberemos tener en cuenta desde el punto de vista de alguien que ha estudiado un curso de confección y publicación de páginas web para la optimización y mejora d...
Diferencia entre visibility:hidden; y display:none;
- 35
Código css para ilustrar la diferencia entre el uso de visibility:hidden; y display:none; . Incluye ejemplo visual.
Tipografía CSS: como usar web safe fonts y tipografías personalizadas.
- 229
La sal es a la cocina lo que las tipografías son al mundo web. Debemos conocerlas y usarlas con conocimiento. En esta entrada se explica que CSS se debe escribir para hacerlo posible.
Ejemplo de centrado horizontal de una caja con CSS
- 236
Ejemplo de como centrar horizontalmente una caja o contenedor en una página web y mediante CSS.
Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.