CSS - Colores
CSS usa valores de color para especificar un color. Normalmente, se utilizan para establecer un color para el primer plano de un elemento (es decir, su texto) o para el fondo del elemento. También se pueden usar para afectar el color de los bordes y otros efectos decorativos.
Puede especificar sus valores de color en varios formatos. La siguiente tabla enumera todos los formatos posibles:
| Formato | Sintaxis | Ejemplo |
|---|---|---|
| Código hexadecimal | #RRGGBB | p {color: # FF0000;} |
| Código hexadecimal corto | #RGB | p {color: # 6A7;} |
| RGB% | rgb (rrr%, ggg%, bbb%) | p {color: rgb (50%, 50%, 50%);} |
| Absoluto RGB | rgb (rrr, ggg, bbb) | p {color: rgb (0,0,255);} |
| palabra clave | aguamarina, negro, etc. | p {color: verde azulado;} |
Estos formatos se explican con más detalle en las siguientes secciones:
Colores CSS - Códigos hexadecimales
Un hexadecimal es una representación de 6 dígitos de un color. Los dos primeros dígitos (RR) representan un valor rojo, los dos siguientes son un valor verde (GG) y los últimos son el valor azul (BB).
Se puede tomar un valor hexadecimal de cualquier software de gráficos como Adobe Photoshop, Jasc Paintshop Pro o incluso usando Advanced Paint Brush.
Cada código hexadecimal estará precedido por una almohadilla o un signo de almohadilla '#'. A continuación se muestran los ejemplos para usar la notación hexadecimal.
| Color | Color HEX |
|---|---|
| # 000000 | |
| # FF0000 | |
| # 00FF00 | |
| # 0000FF | |
| # FFFF00 | |
| # 00FFFF | |
| # FF00FF | |
| # C0C0C0 | |
| #FFFFFF |
Colores CSS: códigos hexadecimales cortos
Esta es una forma más corta de la notación de seis dígitos. En este formato, cada dígito se replica para llegar a un valor equivalente de seis dígitos. Por ejemplo: # 6A7 se convierte en # 66AA77.
Se puede tomar un valor hexadecimal de cualquier software de gráficos como Adobe Photoshop, Jasc Paintshop Pro o incluso usando Advanced Paint Brush.
Cada código hexadecimal estará precedido por una almohadilla o un signo de almohadilla '#'. A continuación se muestran los ejemplos para usar la notación hexadecimal.
| Color | Color HEX |
|---|---|
| # 000 | |
| # F00 | |
| # 0F0 | |
| # 0FF | |
| # FF0 | |
| # 0FF | |
| # F0F | |
| #FFF |
Colores CSS - Valores RGB
Este valor de color se especifica mediante el rgb( )propiedad. Esta propiedad toma tres valores, uno para el rojo, el verde y el azul. El valor puede ser un número entero entre 0 y 255 o un porcentaje.
NOTE - Todos los navegadores no admiten la propiedad de color rgb () por lo que se recomienda no utilizarlo.
A continuación se muestra el ejemplo para mostrar algunos colores utilizando valores RGB.
| Color | Color RGB |
|---|---|
| rgb (0,0,0) | |
| rgb (255,0,0) | |
| rgb (0,255,0) | |
| rgb (0,0,255) | |
| rgb (255,255,0) | |
| rgb (0,255,255) | |
| rgb (255,0,255) | |
| rgb (192,192,192) | |
| rgb (255,255,255) |
Códigos de colores de construcción
Puede crear millones de códigos de colores con nuestro Creador de códigos de colores. Consulte nuestroHTML Color Code Builder. Para utilizar esta herramienta, necesitaría un navegador habilitado para Java.
Colores seguros del navegador
Aquí está la lista de 216 colores que se supone que son los colores más seguros e independientes de la computadora. Estos colores varían desde el código hexadecimal 000000 hasta FFFFFF. Estos colores son seguros de usar porque aseguran que todas las computadoras mostrarán los colores correctamente al ejecutar una paleta de 256 colores.
| 000000 | 000033 | 000066 | 000099 | 0000CC | 0000FF |
| 003300 | 003333 | 003366 | 003399 | 0033CC | 0033FF |
| 006600 | 006633 | 006666 | 006699 | 0066CC | 0066FF |
| 009900 | 009933 | 009966 | 009999 | 0099CC | 0099FF |
| 00CC00 | 00CC33 | 00CC66 | 00CC99 | 00CCCC | 00CCFF |
| 00FF00 | 00FF33 | 00FF66 | 00FF99 | 00FFCC | 00FFFF |
| 330000 | 330033 | 330066 | 330099 | 3300CC | 3300FF |
| 333300 | 333333 | 333366 | 333399 | 3333CC | 3333FF |
| 336600 | 336633 | 336666 | 336699 | 3366CC | 3366FF |
| 339900 | 339933 | 339966 | 339999 | 3399CC | 3399FF |
| 33CC00 | 33CC33 | 33CC66 | 33CC99 | 33CCCC | 33CCFF |
| 33FF00 | 33FF33 | 33FF66 | 33FF99 | 33FFCC | 33FFFF |
| 660000 | 660033 | 660066 | 660099 | 6600CC | 6600FF |
| 663300 | 663333 | 663366 | 663399 | 6633CC | 6633FF |
| 666600 | 666633 | 666666 | 666699 | 6666CC | 6666FF |
| 669900 | 669933 | 669966 | 669999 | 6699CC | 6699FF |
| 66CC00 | 66CC33 | 66CC66 | 66CC99 | 66CCCC | 66CCFF |
| 66FF00 | 66FF33 | 66FF66 | 66FF99 | 66FFCC | 66FFFF |
| 990000 | 990033 | 990066 | 990099 | 9900CC | 9900FF |
| 993300 | 993333 | 993366 | 993399 | 9933CC | 9933FF |
| 996600 | 996633 | 996666 | 996699 | 9966CC | 9966FF |
| 999900 | 999933 | 999966 | 999999 | 9999CC | 9999FF |
| 99CC00 | 99CC33 | 99CC66 | 99CC99 | 99CCCC | 99CCFF |
| 99FF00 | 99FF33 | 99FF66 | 99FF99 | 99FFCC | 99FFFF |
| CC0000 | CC0033 | CC0066 | CC0099 | CC00CC | CC00FF |
| CC3300 | CC3333 | CC3366 | CC3399 | CC33CC | CC33FF |
| CC6600 | CC6633 | CC6666 | CC6699 | CC66CC | CC66FF |
| CC9900 | CC9933 | CC9966 | CC9999 | CC99CC | CC99FF |
| CCCC00 | CCCC33 | CCCC66 | CCCC99 | Literalmente | CCCCFF |
| CCFF00 | CCFF33 | CCFF66 | CCFF99 | CCFFCC | CCFFFF |
| FF0000 | FF0033 | FF0066 | FF0099 | FF00CC | FF00FF |
| FF3300 | FF3333 | FF3366 | FF3399 | FF33CC | FF33FF |
| FF6600 | FF6633 | FF6666 | FF6699 | FF66CC | FF66FF |
| FF9900 | FF9933 | FF9966 | FF9999 | FF99CC | FF99FF |
| FFCC00 | FFCC33 | FFCC66 | FFCC99 | FFCCCC | FFCCFF |
| FFFF00 | FFFF33 | FFFF66 | FFFF99 | FFFFCC | FFFFFF |