El sistema de códigos de colores RGB, (rojo|verde|azul), está basado en mezclar estos 3 colores básicos para conseguir el resto de la gama cromática completa (lo que significan los colores).
Cada color básico se identifica con un valor numérico que va de 0 a 255 (256 en total), lo que significa que se pueden representar hasta un total de más de 16 millones de colores diferentes.
Aunque el valor que expresa la intensidad del color es decimal, se suele utilizar la notación hexadecimal (de 00 a FF) por lo que, el esquema de cada color se representa con #RRGGBB; .
Algunos ejemplos representativos de códigos RGBs:
- Negro: Ausencia de colores básicos, valor: #000000
- Blanco: Se obtiene mezclando todos: #FFFFFF
- Rojo: Valor de R (rojo) total, el resto 00:#FF0000
- Verde: Valor de verde (G) total, el resto 00: #00FF00
- Azul: Valor B (azul) FF, el resto 00: #0000FF
Un esquema CSS3 de colores comprende esta tabla básica de representación web de ‘colores seguros’, es decir, que son mostrados sin diferencias entre los principales navegadores de internet:
| Color | Nombre | Código RGB | Color | Nombre | Código RGB |
| Azul pálido | #F0F8FF | Salmón pálido | #FFA07A | ||
| Antiguo Blanco | #FAEBD7 | Verde Mar Pálido | #20B2AA | ||
| Agua | #00FFFF | Azul claro | #87CEFA | ||
| Aguamarina | #7FFFD4 | Gris acero pálido | #778899 | ||
| Azur | #F0FFFF | Azul acero pálido | #B0C4DE | ||
| Beige | #F5F5DC | Amarillo claro | #FFFFE0 | ||
| Bizcocho | #FFE4C4 | Verde eléctrico | #00FF00 | ||
| Negro | #000000 | Verde Lima (RGB) | #32CD32 | ||
| Blanco Almendra | #FFEBCD | Lino | #FAF0E6 | ||
| Azul | #0000FF | Magenta | #FF00FF | ||
| AzulVioleta | #8A2BE2 | Granada | #800000 | ||
| Marrón | #A52A2A | Agua marina Medio | #66CDAA | ||
| Madera clara | #DEB887 | MedioAzul | #0000CD | ||
| Azul Cadete | #5F9EA0 | Orquídea mediana | #BA55D3 | ||
| Chartreuse | #7FFF00 | Medio Púrpura | #9370DB | ||
| Chocolate | #D2691E | Medio Verde Mar | #3CB371 | ||
| Coral | #FF7F50 | Pizarra medio Azul | #7B68EE | ||
| AcianoAzul | #6495ED | Medio Verde Primavera | #00FA9A | ||
| Seda de maíz | #FFF8DC | Turquesa | #48D1CC | ||
| Carmesí | #DC143C | Medio Violeta Rojo | #C71585 | ||
| Cian | #00FFFF | Azul noche | #191970 | ||
| Azul Oscuro | #00008B | Menta Crema | #F5FFFA | ||
| DarkCyan | #008B8B | Misty Rosa | #FFE4E1 | ||
| Oro Viejo | #B8860B | Mocasín | #FFE4B5 | ||
| DarkGray | #A9A9A9 | Navajo Blanco | #FFDEAD | ||
| Verde Oscuro | #006400 | Armada | #000080 | ||
| DarkKhaki | #BDB76B | Antiguo Encaje | #FDF5E6 | ||
| DarkMagenta | #8B008B | Aceituna | #808000 | ||
| Verde Oliva Oscuro | #556B2F | Oliva | #6B8E23 | ||
| Naranja Oscuro | #FF8C00 | Naranja | #FFA500 | ||
| Orquídea Oscura | #9932CC | Naranja Rojo | #FF4500 | ||
| DarkRed | #8B0000 | Orquídea | #DA70D6 | ||
| Salmón Oscuro | #E9967A | Oro Palo | #EEE8AA | ||
| DarkSeaVerde | #8FBC8F | Verde Pálido | #98FB98 | ||
| DarkSlateAzul | #483D8B | Turquesa Pálido | #AFEEEE | ||
| DarkSlateGris | #2F4F4F | Violeta Pálido Rojo | #DB7093 | ||
| Turquesa Oscuro | #00CED1 | Papaya Whip | #FFEFD5 | ||
| Violeta Oscuro | #9400D3 | Peach Puff | #FFDAB9 | ||
| Rosa Profundo | #FF1493 | Perú | #CD853F | ||
| Azul Profundo | #00BFFF | Rosa | #FFC0CB | ||
| Dim Gris | #696969 | Ciruela | #DDA0DD | ||
| DodgerBlue | #1E90FF | Azul Polvo | #B0E0E6 | ||
| Ladrillo | #B22222 | Púrpura | #800080 | ||
| Floral Blanco | #FFFAF0 | Rojo | #FF0000 | ||
| Verde Bosque | #228B22 | Marrón Rosáceo | #BC8F8F | ||
| Fucsia | #FF00FF | Azul Real | #4169E1 | ||
| Gainsboro | #DCDCDC | Sillín Marrón | #8B4513 | ||
| Blanco Roto | #F8F8FF | Salmón | #FA8072 | ||
| Oro | #FFD700 | Anaranjado Marrón | #F4A460 | ||
| Vara de oro | #DAA520 | Verde Mar | #2E8B57 |
Todos estos colores también se conocen como colores X11
| Gris | #808080 | Concha de mar | #FFF5EE | ||
| Verde | #008000 | Siena | #A0522D | ||
| VerdeAmarillo | #ADFF2F | Plata | #C0C0C0 | ||
| Melón | #F0FFF0 | Azul Cielo | #87CEEB | ||
| Rosa fuerte | #FF69B4 | Azul pizarra | #6A5ACD | ||
| Rojo Indio | #CD5C5C | Gris pizarra | #708090 | ||
| Añil | #4B0082 | Nieve | #FFFAFA | ||
| Marfil | #FFFFF0 | Verde Verano | #00FF7F | ||
| Caqui | #F0E68C | Azul Acero | #4682B4 | ||
| Lavanda | #E6E6FA | Bronceado | #D2B48C | ||
| Lavanda Rojizo | #FFF0F5 | Cerceta | #008080 | ||
| Césped Verde | #7CFC00 | Cardo | #D8BFD8 | ||
| Chifón de Limón | #FFFACD | Tomate | #FF6347 | ||
| Azul claro | #ADD8E6 | Turquesa | #40E0D0 | ||
| Coral claro | #F08080 | Violeta | #EE82EE | ||
| Cian claro | #E0FFFF | Trigo | #F5DEB3 | ||
| Oro Amarillo | #FAFAD2 | Blanco | #FFFFFF | ||
| Verde claro | #90EE90 | Blanco Humo | #F5F5F5 | ||
| Gris claro | #D3D3D3 | Amarillo | #FFFF00 | ||
| Rosa claro | #FFB6C1 | AmarilloVerde | #9ACD32 |
Preguntas frecuentes sobre los códigos RGB y los colores seguros en CSS3
¿Cuáles son los códigos para poner colores en CSS?
En CSS, existen diversas formas de definir colores mediante códigos, siendo los más comunes los códigos hexadecimales, los códigos RGB y los nombres de colores. Por ejemplo, para aplicar un color de fondo azul, se puede utilizar cualquiera de las siguientes notaciones:
- Hexadecimal:
#0000FF - RGB:
rgb(0, 0, 255) - Nombre:
blue
Además, los colores en CSS pueden ser especificados utilizando el formato RGBA, que permite definir el nivel de opacidad. Un ejemplo sería rgba(0, 0, 255, 0.5), que representa un azul semitransparente. Utilizar diferentes formatos proporciona flexibilidad a los diseñadores para lograr el efecto visual deseado.
¿Cuántos colores seguros hay?
Los colores seguros en CSS3 se refieren a una paleta de colores que se pueden visualizar de manera consistente en diferentes dispositivos. Originalmente, había un total de 216 colores seguros que se formaban a partir de combinaciones de rojo, verde y azul (RGB) en incrementos de 51. Estos colores se identifican fácilmente por sus códigos hexadecimales.
Aunque la cantidad de colores seguros ha aumentado con el tiempo, la noción de los 216 colores sigue siendo relevante, especialmente para el diseño web. Sin embargo, muchos diseñadores ahora utilizan una gama más amplia de colores, gracias a avances en tecnología y pantallas. Es importante recordar que, si bien los colores seguros son útiles, no son la única opción disponible.
Para una mejor comprensión, aquí hay una lista de ejemplos de colores seguros:
- #00FF00 (Verde brillante)
- #FF0000 (Rojo brillante)
- #0000FF (Azul brillante)
- #FFFF00 (Amarillo brillante)
- #00FFFF (Cian brillante)
¿Cuáles son los 216 colores web seguros?
Los 216 colores web seguros son una paleta de colores diseñada para ser visualizada de manera consistente en diferentes navegadores y monitores. Esta selección se compone de colores que se pueden formar combinando valores RGB en incrementos de 51 (0, 51, 102, 153, 204, 255). Estos colores fueron especialmente relevantes en los inicios de la web, cuando la compatibilidad y la representación visual eran esenciales.
Los colores web seguros se organizan en una cuadrícula de 6x6x6, donde cada componente de color (rojo, verde y azul) puede tomar uno de seis valores. A continuación, se presentan algunos ejemplos de estos colores:
- Rojo: #FF0000
- Verde: #00FF00
- Azul: #0000FF
- Cian: #00FFFF
- Magenta: #FF00FF
- Amarillo: #FFFF00
¿Qué color es rgba(0,0,0,0)?
El valor rgba(0,0,0,0) representa un color negro completamente transparente en el modelo de color RGBA. En este modelo, los primeros tres valores (0, 0, 0) corresponden a la intensidad de los colores rojo, verde y azul, respectivamente. El cuarto valor, que es 0, indica la opacidad del color, donde 0 significa totalmente transparente y 1 completamente opaco.
Cuando se utiliza rgba(0,0,0,0) en el diseño web, el efecto visual es que el color negro no se muestra en absoluto, permitiendo que el fondo o cualquier elemento que esté detrás se vea claramente. Esto es útil en situaciones donde se quiere crear efectos de superposición o simplemente para ocultar contenido sin eliminar el elemento del DOM.
Para entender mejor el uso de los colores RGBA, aquí hay una tabla que muestra diferentes valores de opacidad:
| Color | RGBA | Descripción |
|---|---|---|
| Negro Transparente | rgba(0,0,0,0) | Totalmente transparente |
| Negro Semitransparente | rgba(0,0,0,0.5) | 50% opaco |
| Negro Opaco | rgba(0,0,0,1) | Completamente opaco |
