CSS | Color hexadecimal de 6 dígitos

El color hexadecimal de seis dígitos es muy popular para definir colores en CSS debido a que la variación de múltiples colores está disponible en los códigos de colores hexadecimales de 6 dígitos. Hay seis caracteres seguidos de un hash (#) como #RRGGBB. El desarrollador usó los códigos de color hexadecimales, es bastante difícil recordarlos para compararlos con nombres de colores como azul, verde, cian, marrón, etc. porque los códigos de color contienen muchos tonos de un solo color. Al usar los códigos de color hexadecimales, tiene un amplio campo abierto para elegir su color preferido para su aplicación o sitio donde quiera usarlos. Por nombre de color, hay 147 nombres que puede usar, pero al usar el código de color hexadecimal puede obtener 16 millones de colores que son la razón principal detrás del uso de códigos de color hexadecimales.
Sintaxis:

#RRGGBB

Nota: Aquí, esos 6 caracteres definen el color RGB, que es rojo, verde y azul.
Ejemplo 1:

<!DOCTYPE html>
<html>
   
<head>
    <title>CSS 6 Digit Hex Color</title>
    <style>
        body {
            background-color: #666600;
        }
           
        h1 {
            color: green;
        }
           
        article {
            background-color: #FFFFFF;
            border: 5px solid green;
            margin: 15px;
            text-align: center;
        }
    </style>
</head>
   
<body>
    <article>
        <h1>GeeksforGeeks</h1>
    </article>
</body>
   
</html>

Salida:

Ejemplo 2:

<!DOCTYPE html>
<html>
   
<head>
    <title>CSS 6 Digit Hex Color</title>
   
    <style>
        body {
            background-image: url(
'https://media.geeksforgeeks.org/wp-content/uploads/20190806202057/Screenshot-from-2019-08-02-10-51-372.png');
            background-attachment: fixed;
            background-size: cover;
        }
           
        h2 {
            color: green;
        }
           
        article {
            background-color: #FFFFFF;
            border: 2px solid green;
            background-position: center center;
            text-align: center;
        }
    </style>
</head>
   
<body>
    <article>
        <h2>GeeksforGeeks</h2>
    </article>
</body>
   
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *