Colores CSS
Colores CSS
Juan Guillermo Rivera Berrío
Introducción
En el diseño de contenidos digitales educativos se deben tener en cuenta algunos aspectos que, de entrada, hagan atractivo el contenido digital. Cuando se trata de objetos interactivos, como los desarrollados con DescartesJS, la interactividad per se lo hace bastante atractivo. No obstante, hay otros aspectos adicionales que se deben considerar en el diseño del objeto, como lo es la intencionalidad pedagógica, que favorece el aprendizaje y, el más descuidado de los aspectos, el "color" o, en general, la combinación de colores empleada en el objeto.
Detrás de algunos diseños, bastante atractivos, hay un equipo de profesionales, tales como pedagogos, diseñadores instruccionales, desarrolladores de software, diseñadores gráficos, animadores, y expertos temáticos, contratados para obtener contenidos digitales educativos, que cuentan con la financiación suficiente y, en muchos casos, la inversión se recupera, pues serán contenidos comerciales.
Los cartesianos, desarrolladores de objetos interactivos, se caracterizan por su espíritu altruista, con poca o, generalmente, nula financiación, por lo que tienen que hacer el papel de los profesionales citados anteriormente, lo que dificulta bastante su labor.
Sin embargo, el trabajo en red, permite desarrollos colaborativos que, de alguna manera, suplen estas deficiencias, pues los miembros de la Red Educativa Digital Descartes se caracterizan por su diversidad geográfica y de formación, lo que permite la producción, también diversa, de contenidos digitales interactivos que satisfacen los currículos de diversos países, áreas de conocimiento y niveles de formación.
Pero, retornando al aspecto relacionado con el uso del "color", es apenas obvio que ante la ausencia de expertos en la "teoría del color", algunos diseños pierdan parte del atractivo obtenido con la interactividad.
Los colores son capaces de establecer el tono adecuado para llevar el mensaje a los visitantes: pueden calmar, excitar, estimular a las acciones… (https://www.iempresa.net/creatividad/)
Dada la ausencia de formación en teoría del color, nuestros objetos, unidades y libros interactivos suelen incluir colores de acuerdo a los gustos del desarrollador y, como todos sabemos, los gustos también son diversos. Algunos incluyen excesivos colores que dispersan la atención del usuario, otros usan pocos colores que vuelven poco atractivo (a la vista) el contenido digital y, también usual, los inadecuados contrastes entre texto y fondo.
Este artículo es un pequeño aporte a corregir algunas de estas deficiencias de diseño.
Colores en DescartesJS
El editor DescartesJS permite seleccionar el color de los espacios, textos, controles y elementos tipo gráfico; para ello, presenta botones que al activarlos muestra un interactivo que permite escoger el color a utilizar (Figura 1).
El menú superior cuenta con 13 colores a escoger: negro, magenta, azul, turquesa, verde, amarillo, naranja, rojo, rosa, gris oscuro, gris, gris claro y blanco. Pero, si ninguno de estos colores es el deseado, se puede hacer uso de las barras o los cuadros de texto para encontrar una combinación que se ajuste al gusto del diseñador.
En el siguiente interactivo, hemos emulado parte del suministrado por el editor DescartesJS, incluyendo un segundo menú para seleccionar otros 15 colores y, además, la posiblidad de copiar el código de colores CSS que explicamos a continuación.
Haz clic en el botón de la esquina superior derecha, para que interactúes en una ventana más grande. Selecciona un color básico o especial y luego mueve las barras para obtener el color que se acomode más a tu gusto.
Colores CSS
Todo contenido digital, diseñado en HTML5, incluye algunos estilos que se codifican en el archivo html que lo ejecuta o, más recomendable, en un archivo externo generalmente llamado style.css. Este archivo se suele llamar hoja de estilos (Style Sheet) y por la forma como se dispone y aplica (estilos heredados en cascada) se suele denominar "Hojas de estilo en cascada" (Cascading Style Sheets) o CSSLa especificación CSS es mantenida por el World Wide Web Consortium (W3C). El MIME type text/css está registrado para su uso por CSS descrito en el RFC 2318.5 El W3C proporciona una herramienta de validación de CSS gratuita para los documentos CSS (https://es.wikipedia.org/)..
Los estilos permiten un cambio radical en la apariencia de un archivo html, pues modifican espacios (márgenes), tipos y tamaños de letra, dimensiones de párrafos e imágenes, fondos y coloresAl interactivo anterior, se le aplicó un estilo para el fondo, llamado "gradiente cónico", usando los colores red, yellow, lime, aqua, blue, magenta, red.. De estos últimos, los colores, nos ocuparemos a continuación.
Los códigos de color HTML, aprobados por el W3C, se obtienen de valores tipo Hex, RGB (decimal) o HSL. También, es posible identificar un color por su nombre, que para el W3C son 17 colores básicos (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow) escritos en inglés, de los cuales se desprenden más de colores (coral, salmon, orange, gold, etc.).
En el siguiente interactivo, diseñado por Lea Verou, haz clic en el botón CSS. Observarás que el fondo (background) de la ventana derecha es púrpura (purple), cambia este fondo con otros colores, usando los nombres anteriores o algunos que conozcas.
Colores RGB en valores hexadecimales (Hex)
En el formato RGB un color se identifica por la combinación de los colores rojo (Red), verde (Green) y azul (Blue), de allí el término RGB.
Un valor RGB en notación hexadecimal se expresa con un '#' seguido inmediatamente de seis caracteres hexadecimales; por ejemplo, #FF0000 representa al rojo, el cual se puede simplificar como #F00. Al disminuir los valores se obtendrán colores más oscuros; por, ejemplo, con #800000 se obtiene el color granate (maroon) que es un rojo más oscuro (pruébalo con el interactivo DescartesJS).
En el interactivo de Lea Verou, cambia el fondo usando valores hexadecimales; por ejemplo, el color granate: background: #800000.
Los valores hexadecimales de los 17 colores básicos de la W3C se muestran en la siguiente imagen:
Colores RGB en valores decimales
En el formato hexadecimal, el valor máximo del rojo, verde o azul es $FF$, que en valor decimal es $255$, pues $FF = 15\times 16^1+15\times 16^0 = 255$. El formato de un valor RGB en la notación decimal o funcional es "rgb(" seguido de una lista separada por comas de tres valores numéricos (ya sea tres valores enteros o tres valores porcentuales) seguido de "). Para el caso del rojo, sería rgb(255,0,0) o rgb(100%,0%,0%), pruébalo con el editor de Lea Verou.
Valores de color RGBA
El modelo de color RGB se amplía con un cuarto valor que permite la especificación de la opacidad del color, siendo uno (1) el máximo valor y cero (0) el mínimo u opacidad nula, que es lo mismo que transparencia máxima. Por ejemplo, el color rojo sería rgba(255,0,0,1) o rgb(100%,0%,0%,1). Usa el editor disminuyendo la opacidad, por ejemplo rgba(255,0,0,0.5).
Valores de color HSL
CSS incluye colores numéricos de matiz-saturación-luminosidad (HSL, por sus siglas en inglés) como complemento a los colores numéricos RGB. Este método es intuitivo, por contraste al RGB que no lo es. Una ventaja de HSL es que es simétrico a la claridad y la oscuridad.
Los colores HSL se codifican como una tripleta (tono, saturación, luminosidad). El tono se representa como un ángulo del círculo cromático (Figura 3). Este ángulo se mide en grados. Por definición, rojo = 0 = 360, y los otros colores se distribuyen alrededor del círculo, por lo que el verde es igual a 120, el azul igual a 240, etc. Como ángulo, implícitamente se envuelve de tal manera que -120 = 240 y 480 = 120. La saturación y la luminosidad se representan como porcentajes, 100% es saturación total y 0% es un tono de gris. El 0% de luminosidad es negro, el 100% de luminosidad es blanco y el 50% de luminosidad es "normal", el rojo, entonces, sería hsl(0,100%,50%) o hsl(360,100%,50%).
El círculo cromático es una herramienta indispensable para diseñadores y artistas. Permite seleccionar colores de forma armoniosa. Consiste en 6 colores básicos (rojo, naranja, amarillo, verde, azul y violeta) y las mezclas entre los que se sitúan más próximos dentro del círculo (https://www.iempresa.net/creatividad/).
Finalmente, te proponemos los siguientes ejercicios. El primer ejercicio es usar el editor de Lea Verou para obtener los colores de la Figura 3 (el eje horizontal es la saturación y el vertical la luminosidad). El segundo ejercicio es un juego interactivo, también de Lea VerouLea Verou es una desarrolladora web, originaria de Lesbos, Grecia. Actualmente cursao un doctorado en Ciencias de la Computación en el MIT . Eescribió un libro superventas sobre CSS avanzado que se ha traducido a 8 idiomas, trabajó en W3C y es una experta invitada en el W3C CSS Working Group , un honor que actualmente se extiende a solo 15 personas en todo el mundo., que consiste en hallar el código del color por su nombre o por formato hexadecimal, RGB o HSL, si practicas un buen tiempo, observarás que el HSL es el más adecuado para acertar los colores.
Combinaciones de colores
Como lo dijimos en la introducción, la combinación de colores es un aspecto clave a considerar. Una buena ayuda la da la página "Color Combos", que podemos explorar en https://www.colorcombos.com/, de la cual te presentamos el combo de colores 2: