Considerando lo popular que se ha vuelto el estilo de componentes HTML en JavaScript, esa es ahora una necesidad b\u00e1sica. Como resultado, han surgido varias opciones de librer\u00edas de colores en JavaScript<\/strong>. Su objetivo es facilitar el manejo de colores en JS. Aqu\u00ed, profundizamos en color<\/span>, la m\u00e1s popular de todas.<\/strong><\/p>\n\n\n\n En este art\u00edculo, descubrir\u00e1s por qu\u00e9 necesitas una librer\u00eda de colores en JavaScrip<\/strong>t, por qu\u00e9 color es la mejor opci\u00f3n y qu\u00e9 caracter\u00edsticas y m\u00e9todos ofrece.<\/p>\n\n\n\n \u00a1Vamos a sumergirnos!<\/p>\n\n\n\n Los colores desempe\u00f1an un papel vital en el dise\u00f1o web, la interfaz de usuario, la accesibilidad, la experiencia del usuario y la visualizaci\u00f3n de datos. Con la librer\u00eda de colores adecuada en JavaScript, puedes manipular colores de manera din\u00e1mica y program\u00e1tica en el frontend o backend.<\/strong><\/p>\n\n\n\n En detalle, existen al menos tres escenarios del mundo real por los cuales tratar con colores en JavaScript <\/strong>es importante:<\/p>\n\n\n\n Ahora, la pregunta es: “\u00bfExiste una librer\u00eda para todo esto en JavaScript?” S\u00ed, existe, \u00a1y se llama color<\/span>!<\/p>\n\n\n\n Color <\/strong><\/a>es una librer\u00eda de JavaScript para convertir y manipular colores<\/strong>. El paquete npm tiene m\u00e1s de 15 millones de descargas semanales, convirti\u00e9ndose en la librer\u00eda de manipulaci\u00f3n de colores m\u00e1s popular<\/strong> entre todas las alternativas disponibles.<\/p>\n\n\n\n color<\/span> expone un constructor F5F5F5 que acepta un color en varios formatos:<\/p>\n\n\n Tras bastidores, los constructores de cadenas son gestionados con el paquete color-string.<\/a><\/p>\n\n\n\n El objeto devuelto por Color() expone varios m\u00e9todos de conversi\u00f3n y manipulaci\u00f3n de colores. Estos son inmutables, ya que siempre devuelven un nuevo objeto de color sin cambiar la estructura de datos original.<\/strong><\/p>\n\n\n\n Ahora veamos las caracter\u00edsticas que ofrece color para implementar operaciones de manipulaci\u00f3n de colores sin esfuerzo.<\/p>\n\n\n\n Instala el paquete npm color <\/a>con<\/p>\n\n\n Si eres usuario de TypeScript, tambi\u00e9n deber\u00e1s instalar la declaraci\u00f3n de tipos con:<\/p>\n\n\n Luego, puedes importar color en Node.js con:<\/p>\n\n\n O, como un m\u00f3dulo ES con:<\/p>\n\n\n Como se mencion\u00f3 anteriormente, Color es una funci\u00f3n constructora que acepta una representaci\u00f3n de color en muchos formatos<\/strong> y devuelve un objeto que expone varios m\u00e9todos \u00fatiles. \u00a1Es hora de verlos en acci\u00f3n!<\/p>\n\n\n\n Puedes convertir un color<\/span> de RGB a HEX en JavaScript usando color, como se muestra en el ejemplo a continuaci\u00f3n:<\/p>\n\n\n El m\u00e9todo hex()<\/span> devuelve un objeto de color con los datos almacenados en formato HEX. En particular, si registras blue.hex()<\/span> con console.log()<\/span>, ver\u00e1s:<\/p>\n\n\n Luego, toString() <\/span>transforma ese objeto en una cadena de color CSS legibl<\/a>e para los humanos.<\/p>\n\n\n\n De manera similar, puedes ir de HEX a RGB en JavaScript con:<\/p>\n\n\n Aqu\u00ed, necesitas confiar en el m\u00e9todo rgb() <\/span>en su lugar.<\/p>\n\n\n\n color ofrece varios m\u00e9todos para convertir de un espacio de color a otro. Hasta la fecha de esta redacci\u00f3n, estos son los m\u00e9todos de conversi\u00f3n de espacio de color disponibles:<\/p>\n\n\n\n rgb(<\/span>): To convert a color from any supported color space to RGB<\/a>.<\/p>\n\n\n\n hsl()<\/span>: To convert a color from any supported color space to HSL<\/a>.<\/p>\n\n\n\n hsv()<\/span>: To convert a color from any supported color space to HSV<\/a>.<\/p>\n\n\n\n hwb()<\/span>: To convert a color from any supported color space to HWB<\/a>.<\/p>\n\n\n\n cmyk()<\/span>: To convert a color from any supported color space to CMYK<\/a>.<\/p>\n\n\n\n xyz()<\/span>: To convert a color from any supported color space to CIE XYZ.<\/a><\/p>\n\n\n\n lab()<\/span>: To convert a color from any supported color space to L*a*b.<\/a><\/p>\n\n\n\n lch()<\/span>: To convert a color from any supported color space to LCH.<\/a><\/p>\n\n\n\n ansi16()<\/span>: To convert a color from any supported color space to 16 ANSI.<\/p>\n\n\n\n ansi256()<\/span>: To convert a color from any supported color space to 256 ANSI.<\/p>\n\n\n\n hcg()<\/span>: To convert a color from any supported color space to HCG<\/a>.<\/p>\n\n\n\n apple()<\/span>: To convert a color from any supported color space to the Apple color space.<\/a><\/p>\n\n\n\n Para evaluar si un color es claro u oscuro, simplemente puedes usar el m\u00e9todo isLight():<\/p>\n\n\n O el m\u00e9todo opuesto isDark():<\/span><\/p>\n\n\n Ten en cuenta que si isLight()<\/span> devuelve true<\/span>, isDark()<\/span> devolver\u00e1 false<\/span> y viceversa:<\/p>\n\n\n Bajo el cap\u00f3, estos dos m\u00e9todos se basan en la ecuaci\u00f3n YIQ para calcular el contraste de color.<\/a><\/p>\n\n\n\n Otros m\u00e9todos \u00fatiles para manipular colores ofrecidos por Por qu\u00e9 Manipular Colores en JavaScript<\/h2>\n\n\n\n
\n
\u00bfQu\u00e9 es la librer\u00eda de Color en JavaScript?<\/h2>\n\n\n\n
\/\/ CSS color strings<\/span>\nconst<\/span> color = Color(\"red\"<\/span>)\nconst<\/span> color = Color(\"rgb(255, 0, 0)\"<\/span>)\nconst<\/span> color = Color(\"#FF0000\"<\/span>)\nconst<\/span> color = Color(\"hsl(0, 100%, 50%)\"<\/span>)\n\n\/\/ object<\/span>\nconst<\/span> color = Color({r<\/span>: 255<\/span>, g<\/span>: 0<\/span>, b<\/span>: 0<\/span>})<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n![\"Javascript](\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/08\/Color-Manipulation-Library-for-JavaScript-1024x683.jpg\")
<\/figure>\n\n\n\nUsando color<\/span> en JavaScript<\/h2>\n\n\n\n
Comenzar<\/h3>\n\n\n\n
npm install color<\/code><\/span><\/pre>\n\n\nnpm<\/span> install<\/span> @types<\/span>\/color<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\nconst<\/span> Color = require<\/span>(\"color\"<\/span>)<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nimport<\/span> Color from<\/span> \"color\"<\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nRGB a HEX y HEX a RGB<\/h2>\n\n\n\n
const<\/span> blueRGB = \"rgb(0, 0, 255)\"<\/span>\nconst<\/span> blue = Color(blueRGB)\nconst<\/span> blueHEX = blue.hex().toString()\nconsole<\/span>.log(blueHEX) \/\/ \"#0000FF\"<\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n{ model<\/span>: 'rgb'<\/span>, color: [ 0<\/span>, 0<\/span>, 255<\/span> ], valpha: 1<\/span> }<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\nconst<\/span> blueHEX = \"#0000FF\"<\/span>\nconst<\/span> blue = Color(blueHEX)\nconst<\/span> blueRGB = blue.rgb().toString()\nconsole<\/span>.log(blueRGB) \/\/ \"rgb(0, 0, 255)\"<\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nConvertir un Color a un Espacio Diferente<\/h2>\n\n\n\n
Comprobar si un Color es claro u oscuro<\/h2>\n\n\n\n
const<\/span> lightBlue = Color(\"lightblue\"<\/span>)\nconsole<\/span>.log(lightBlue.isLight()) \/\/ true<\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nconst<\/span> darkBlue = Color(\"darkblue\"<\/span>) \nconsole<\/span>.log(darkBlue.isDark()) \/\/ true<\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nconst<\/span> lightBlue = Color(\"lightblue\"<\/span>) \nconsole<\/span>.log(lightBlue.isLight()) \/\/ true<\/span>\nconsole<\/span>.log(lightBlue.isDark()) \/\/ false<\/span>\nconst<\/span> darkBlue = Color(\"darkblue\"<\/span>)\nconsole<\/span>.log(darkBlue.isLight()) \/\/ false<\/span>\nconsole<\/span>.log(darkBlue.isDark()) \/\/ true<\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nManipular Colores<\/h2>\n\n\n\n