Aprende a recuperar un nombre legible de un código de color hexadecimal con JavaScript.

Cómo obtener el nombre humano de un color por su código hexadecimal en JavaScript

Entre todos los deseos extraños de tus clientes, uno de los más extraños seguramente son los de los diseñadores. Últimamente necesitaba cumplir con un requisito que al principio suena extraño, detectar el nombre del color por su código hexadecimal en JavaScript. Inicialmente y después de algunas investigaciones descubrí lo difícil que era esta tarea. Afortunadamente, con un par de implementaciones en JavaScript, tenía mucho potencial, específicamente la biblioteca Name That Color.

En este artículo, le explicaremos cómo utilizar fácilmente la biblioteca de JavaScript Name that Color.

1. Descarga NTC.js

Puede descargar el archivo de script ntc.js desde el sitio web oficial aquí . Con la herramienta NTC podrás adivinar el color más cercano según su código dado y el registro en la clase. Vale la pena decir que el arte de adivinar un color por su código hexadecimal es bastante complicado, así como la apreciación de nombrar un color también podría variar. Sin embargo, el script JS original ofrece una amplia gama de colores que pueden coincidir con su código hexadecimal, si no está registrado en la clase, devolverá el color más cercano.

Para obtener más información sobre este proyecto, visite el sitio web oficial aquí .

2. Cómo utilizar

Inicialmente, solo necesitará convertir el método de nombre del objeto ntc creado por la biblioteca, cuya inicialización toma un poco de tiempo de ejecución porque creará una paleta de colores bastante grande que usará para comparar su código hexadecimal con los datos disponibles. Desde la instancia, podrá utilizar 3 métodos. De nuestro interés es solo el método name :

<!-- Incluir el nombre de la biblioteca de colores -->
<script type="text/javascript" src="ntc.js"></script>

<script type="text/javascript">
    // 1. Necesitas un código hexadecimal del color
    var ColorCode = "#008559";

    // 2. Califica el color usando NTC
    var ntcMatch  = ntc.name(ColorCode);

    // 3. Maneja el resultado. La biblioteca devuelve una matriz con el color identificado.

    // 3.Un valor RGB de coincidencia más cercana, por ejemplo#01826B
    console.log(ntcMatch[0]);
    // Cadena de texto: nombre del color, p. Ej. "Deep Sea"
    console.log(ntcMatch[1]);
    // Verdadero si el color coincide exactamente, un booleano
    console.log(ntcMatch[2]);
</script>

Este método espera como primer argumento una cadena con un código de color hexadecimal de 6 o 3 dígitos, por ejemplo, #ffffff o #fff y devuelve una matriz con los datos que necesita conocer de acuerdo con el proceso de adivinar el color. La matriz contiene 3 elementos respectivamente:

  • 0: el color hexadecimal del color más cercano de la clase.
  • 1: el nombre humano que se le da al color.
  • 2: booleano que determina si el código de color es exacto como el nombre o no.

La propiedad que está buscando es la clave de nombre que devuelve un nombre humano para el código de color hexadecimal, en este caso es el color Deep Sea, pero funciona para casi todos los colores hexadecimales que proporcione, en caso de que no sea así. trabaja con su color, recibirá una matriz con los mismos 3 elementos, sin embargo con los siguientes valores:

  • 0: # 000000.
  • 1: Color no válido: $ yourHexCodeString.
  • 2: falso

Que te diviertas ❤️!


Ingeniero de Software Senior en EPAM Anywhere. Interesado en la programación desde los 14 años, Carlos es un programador autodidacta, fundador y autor de la mayoría de los artículos de Our Code World.

Conviertete en un programador más sociable

Patrocinadores