MEJOR SITIO PARA DESARROLLADORES WEB
Colores HTML. Lecciones para principiantes

Ua En De Fr

Colores NCol


¿Cuáles son los colores NCol?

NCol (Natural Color) es un sistema de color desarrollado por W3Schools. Se basa en el uso de tonalidades naturales que sean lo más parecidas posible a las que se encuentran en la naturaleza. Estos colores se utilizan en el diseño web para dar un aspecto más natural y suave a los sitios web y las interfaces.

En el contexto de NCol, se utilizan colores que se ven naturales y armoniosos, y no crean el efecto de transiciones brillantes o bruscas. Pueden ser colores que imiten elementos naturales, como el verde del bosque, el azul del cielo, los tonos marrones y arena, etc.


¿Cómo funciona?

El color de NCol viene dado por una letra que denota un color y un número que indica el porcentaje de distancia a ese color.

Colores utilizados:

  • R — Red / Rojo;
  • Y — Yellow / Amarillo;
  • G — Green / Verde;
  • C — Cyan / Cian;
  • B — Blue / Azul;
  • M — Magenta / Magenta.

Por ejemplo:

  • R30 significa rojo, desplazado en un 30% hacia el amarillo (es decir, más naranja).
  • B50 significa que el color azul se desplaza en un 50% hacia el verde (es decir, azul).

Ventajas de NCol:

  • Simplicidad: Fácil de entender y recordar.
  • Intuitivo: Corresponde a la percepción natural de los colores.
  • Armonía: Los colores NCol crean una atmósfera armoniosa y natural, lo que hace que la interfaz sea agradable a la vista.
  • Fácil de usar para desarrolladores: puede obtener rápidamente el tono que desea cambiando el valor numérico.
  • Facilidad de uso: Los sitios web que utilizan colores naturales pueden tener una carga menos perceptiva, por lo que los usuarios pueden pasar más tiempo en dichos sitios sin sentirse cansados.
  • Relevancia para temas ambientales y de la naturaleza: Si tu proyecto está relacionado con la naturaleza, la salud o la ecología, estos colores serán muy apropiados.

Desventajas de NCol:

  • Limitado: No cubre todos los tonos posibles. Dado que la paleta NCol se centra en tonos naturales, este enfoque puede no ser adecuado para proyectos que requieren colores más brillantes, más dinámicos o "de moda".
  • Tal vez menos expresivos: Los colores de aspecto natural pueden parecer menos vibrantes o expresivos, lo que no siempre es adecuado para las marcas que quieren destacar o llamar la atención.
  • No estandarizado: No es un estándar oficial, por lo que es posible que no sea compatible con algunas herramientas.
  • Subjetividad: La forma en que se perciben los colores puede variar de una persona a otra.

Ejemplo de uso:

  • Sitios ecológicos: Para un sitio dedicado a la protección del medio ambiente, puede usar la paleta NCol para resaltar los tonos naturales (verde, marrón, azul) mientras crea una sensación de unidad con la naturaleza.
  • Interfaces de salud: Un sitio o aplicación relacionada con un estilo de vida saludable puede aplicar estos colores para crear un ambiente relajante.
  • Paletas intuitivas: Páginas web donde los colores se seleccionan mediante paletas intuitivas.
  • Aplicaciones de diseño: Aplicaciones que permiten a los usuarios elegir fácilmente los colores sin conocer los detalles técnicos.

NCol se puede utilizar en HTML y CSS para especificar el color del texto, los fondos, los marcos y otros elementos.


Alternativas a NCol:

Existen otros sistemas de designación de colores, tales como:

  • RGB: Especifica el color utilizando tres números correspondientes a la intensidad del rojo, el verde y el azul.
  • HEX: Similar a RGB, pero utiliza un sistema numérico hexadecimal.
  • HSL: Especifica el color utilizando el tono, la saturación y la luminosidad.

Conclusiones

La elección del sistema de designación de color depende de sus necesidades y preferencias. NCol puede ser una opción conveniente para una selección de color rápida e intuitiva, especialmente para principiantes.

En general, NCol (Natural Color) es un sistema de color fácil de usar que ayuda a crear interfaces y diseños que se ven naturales y cómodos para los usuarios, pero tiene limitaciones en la selección de colores para proyectos más brillantes o no estándar.


¿Cómo se obtiene el color NCol?

Para obtener un color NCol, puede usar la calculadora NCol.

Calculadora NCol


 
rgb(255, 0, 0)
#ff0000
hsl(0, 100%, 50%)


H:
R
W:
0
B:
0

Natural Colors (NCol)

Natural colors (NCol) is an initiative from W3Schools.

The system is designed to make it easier to select HTML colors.

NCol specifies colors using a color letter with a number to specify the distance (in percent) from the color.

R30 means 30% away from Red , moving towards Yellow. (In other words: Red with 30% Yellow)

LetterColorHues
RRed
R
R25
R50
R75
YYellow
Y
Y25
Y50
Y75
GGreen
G
G25
G50
G75
CCyan
C
C25
C50
C75
BBlue
B
B25
B50
B75
MMagenta
M
M25
M50
M75
R Y G C B M
                                                                                                                       

El color y la distancia también se pueden dar en tonos (0-360):

R = 000 Y = 060 G = 120 C = 180 B = 240 M = 300

Compatibilidad con HTML

NCol no es compatible con HTML, pero está muy cerca del nuevo sistema de color HWB sugerido en CSS4.

Mientras esperas CSS4, puedes incluir la biblioteca de colores de W3Schools y usar NCol como un atributo HTML de la siguiente manera:

Ejemplo

<div data-w3-color="R50,50%,0">

<p>London is the capital city of England.
It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>

</div>

<script src="../lib/w3color.js"></script>
Try It Yourself »

Biblioteca de colores de W3Schools

La biblioteca JavaScript utilizada en el ejemplo anterior se puede descargar desde

https://www.w3schools.com/lib/w3color.js.

También puede utilizar una descarga alternativa desde nuestro sitio web W3SchoolsES. ElMejor en el enlace: https://w3schoolsua.github.io/lib/w3color.js.


¿Por qué NCol?

Tratar de explicar los colores usando notación RGB o HEX es muy difícil.

¿Puedes decir qué color es rgb(199,21,133)?

El RGB se basa en la forma de producir físicamente los colores mezclando fuentes de luz.

NCol se basa en cómo se ven los colores para el ojo humano.

Debido a esto, NCol hace que sea mucho más fácil describir los colores.

Los colores naturales fueron descritos por primera vez por Karl Ewald Konstantin Hering (Alemania, 1834 - 1918).