Los datos expuestos en este blog, son solo de índole informativo. Por favor realiza siempre una copia de seguridad antes de realizar cualquier cambio en tu proyecto.
CSS: propiedad de color
Este tutorial de CSS explica cómo usar una propiedad de CSS llamada color Con sintaxis y ejemplos.
describir
La propiedad de color CSS define el color de primer plano del contenido de texto de un elemento.
sintaxis
La sintaxis de la propiedad color CSS es:
color: value;parámetro o parámetro
valor
El color de primer plano del contenido de texto del elemento. Puede ser uno de los siguientes:
| valor | describir |
|---|---|
| #RRGGBB | Representación hexadecimal del color pag {color: #FF0000; } |
| RGB() | Representación RGB del color p { color: rgb (255,0,0); } |
| nombre | El nombre del color (es decir: rojo, azul, negro, blanco) pag {color: rojo;} |
| heredar | El elemento heredará el color de su elemento principal p {color: heredar;} |
notas
- Los valores en la propiedad de color CSS se pueden representar como valores hexadecimales, valores rgb o colores con nombre.
- Los valores de color se pueden representar como valores hexadecimales como #FFFFFF, #000000 y #FF0000.
- Los valores de color se pueden representar usando rgb, como rgb (255,255,255), rgb (0,0,0) y rgb (255,0,0).
- Los valores de color se pueden representar como colores con nombre, como blanco, negro y rojo.
- ¿Necesita convertir sus valores de color a una representación diferente? Pruebe esta herramienta en línea para convertir sus valores de color entre hexadecimal y RGB.
Compatibilidad del navegador
La propiedad de color CSS tiene soporte básico para los siguientes navegadores:
- Aleación de cromo
- androide
- Firefox (Geco)
- Firefox móvil (Geco)
- Navegador de Internet (IE)
- es decir, móvil
- ópera
- Ópera Móvil
- Safari (WebKit)
- Safari para móvil
ejemplo
Discutiremos la propiedad de color a continuación, explorando ejemplos de cómo usar esta propiedad en CSS.
uso hexadecimal
Veamos un ejemplo de color CSS en el que proporcionamos un valor hexadecimal para el color.
p { color: #000000; }En este ejemplo de color CSS, proporcionamos un valor hexadecimal de #000000, que se mostrará en negro
texto marcado.
Usar RGB
También podemos proporcionar valores de color usando rgb.
p { color: rgb(0,0,0); }En este ejemplo de color CSS, rgb(0,0,0) también se muestra en negro
texto marcado.
Usar nombres de colores
Veamos un ejemplo de color CSS en el que proporcionamos el valor como un color con nombre.
p { color: black; }En este ejemplo de color CSS, proporcionamos el nombre “negro”, que también establece el color de primer plano del texto en negro.
nombre del color
Aquí hay una lista de nombres de colores para elegir:
| nombre del color | valor hexadecimal | Muestra de tela |
|---|---|---|
| Alice azul | #F0F8FF | |
| blanco antiguo | #FAEBD7 | |
| agua | #00FFFF | |
| aguamarina | #7FFFD4 | |
| cielo azul | #F0FFFF | |
| marrón claro | #F5F5DC | |
| sopa espesa | #FFE4C4 | |
| Negro | #000000 | |
| almendras blancas | #FFEBCD | |
| azul | #0000FF | |
| Violeta | #8A2BE2 | |
| marrón | #A52A2A | |
| Bollywood | #DEB887 | |
| estudiante azul | #5F9EA0 | |
| amarillo verde | #7FFF00 | |
| chocolate | #D2691E | |
| coral | #FF7F50 | |
| azul aciano | #6495ED | |
| seda de maiz | #FFF8DC | |
| carmesí | #DC143C | |
| azul | #00FFFF | |
| azul oscuro | #00008B | |
| verde azulado | #008B8B | |
| barra de oro oscuro | #B8860B | |
| gris oscuro | #A9A9A9 | |
| gris oscuro | #A9A9A9 | |
| verde oscuro | #006400 | |
| caqui negro | #BDB76B | |
| magenta profundo | #8B008B | |
| verde oliva negro | #556B2F | |
| naranja oscuro | #FF8C00 | |
| Orquídea negra | #9932CC | |
| color rojo oscuro | #8B0000 | |
| salmón negro | #E9967A | |
| verde mar profundo | #8FBC8F | |
| azul pizarra oscuro | #483D8B | |
| gris oscuro | #2F4F4F | |
| pizarra gris | #2F4F4F | |
| turquesa oscuro | #00CED1 | |
| morado oscuro | #9400D3 | |
| Rosa oscuro | #FF1493 | |
| cielo azul profundo | #00BFFF | |
| gris oscuro | #696969 | |
| gris oscuro | #696969 | |
| esquivar azul | #1E90FF | |
| ladrillo refractario | #B22222 | |
| flor blanca | #FFFAF0 | |
| bosque verde | #228B22 | |
| Fucsia | #FF00FF | |
| puertasboro | #DCDCDC | |
| fantasma blanco | #F8F8FF | |
| oro | #FFD700 | |
| vara de oro | #DAA520 | |
| gris | #808080 | |
| gris | #808080 | |
| verde | #008000 | |
| amarillo verde | #ADFF2F | |
| gotas de miel | #F0FFF0 | |
| Rosa brillante | #FF69B4 | |
| rojo indio | #CD5C5C | |
| índigo | #4B0082 | |
| Marfil | #FFFFF0 | |
| Caqui | #F0E68C | |
| Lavanda | #E6E6FA | |
| rubor lavanda | #FFF0F5 | |
| césped verde | #7CFC00 | |
| gasa limón | #FFFACD | |
| azul claro | #ADD8E6 | |
| coral poco profundo | #F08080 | |
| cian claro | #E0FFFF | |
| amarillo rojo dorado claro | #FAFAD2 | |
| gris claro | #D3D3D3 | |
| gris claro | #D3D3D3 | |
| verde claro | #90EE90 |
| nombre del color | valor hexadecimal | Muestra de tela |
|---|---|---|
| Rosa claro | #FFB6C1 | |
| salmón claro | #FFA07A | |
| verde mar claro | #20B2AA | |
| cielo azul | #87CEFA | |
| gris piedra clara | #778899 | |
| lámpara gris | #778899 | |
| azul acero claro | #B0C4DE | |
| amarillo claro | #FFFFE0 | |
| Lima | #00FF00 | |
| Lima | #32CD32 | |
| Lino | #FAF0E6 | |
| magenta | #FF00FF | |
| granate | #800000 | |
| aguamarina mediana | #66CDAA | |
| azul medio | #0000CD | |
| orquidea media | #BA55D3 | |
| morado medio | #9370D8 | |
| Verde de ultramar de China | #3CB371 | |
| azul pizarra medio | #7B68EE | |
| verde primavera medio | #00FA9A | |
| turquesa medio | #48D1CC | |
| fucsia medio | #C71585 | |
| azul medianoche | #191970 | |
| mentas | #F5FFFA | |
| Caramelo de niebla | #FFE4E1 | |
| Mocasín | #FFE4B5 | |
| Blancos navajos | #FFDAD | |
| Armada | #000080 | |
| encaje viejo | #FDF5E6 | |
| Olivos | #808000 | |
| aceituna | #6B8E23 | |
| mandarina | #FFA500 | |
| rojo naranja | #FF4500 | |
| orquídea | #DA70D6 | |
| barra de oro antigua | #EEE8AA | |
| verde claro | #98FB98 | |
| turquesa | #AFEEEE | |
| lavanda | #D87093 | |
| Látigo De Papaya | #FFEFD5 | |
| bocanadas de durazno | #FFDAB9 | |
| Perú | #CD853F | |
| Rosa | #FFC0CB | |
| Ciruela | #DDA0DD | |
| azul pálido | #B0E0E6 | |
| púrpura | #800080 | |
| rojo | #FF0000 | |
| Marrón rojizo | #BC8F8F | |
| azul real | #4169E1 | |
| silla de montar marrón | #8B4513 | |
| salmón | #FA8072 | |
| marrón arena | #F4A460 | |
| verde mar | #2E8B57 | |
| cáscara | #FFF5EE | |
| ocre | #A0522D | |
| plata | #C0C0C0 | |
| cielo azul | #87CEEB | |
| pizarra azul | #6A5ACD | |
| pizarra gris | #708090 | |
| pizarra gris | #708090 | |
| Nieve | #FFFAFA | |
| primavera verde | #00FF7F | |
| azul acero | #4682B4 | |
| marrón | #D2B48C | |
| azul | #008080 | |
| cardo | #D8BFD8 | |
| tomate | #FF6347 | |
| turquesa | #40E0D0 | |
| Púrpura | #EE82EE | |
| trigo | #F5DEB3 | |
| blanco | #FFFFFF | |
| humo blanco | #F5F5F5 | |
| amarillo | #FFFF00 | |
| amarillo verde | #9ACD32 |