Determinación del color en línea Yandex. Determinar el color de un píxel en una imagen en línea

HEX/HTML

El color HEX no es más que una representación hexadecimal de RGB.

Los colores se representan como tres grupos de dígitos hexadecimales, donde cada grupo es responsable de su propio color: #112233, donde 11 es rojo, 22 es verde y 33 es azul. Todos los valores deben estar entre 00 y FF.

Muchas aplicaciones permiten una forma abreviada de notación de color hexadecimal. Si cada uno de los tres grupos contiene los mismos caracteres, por ejemplo #112233, entonces se pueden escribir como #123.

1. h1 ( color: #ff0000; ) /* rojo */
2. h2 ( color: #00ff00; ) /* verde */
3. h3 ( color: #0000ff; ) /* azul */
4. h4 ( color: #00f; ) /* mismo azul, taquigrafía */

RGB

El espacio de color RGB (rojo, verde, azul) consta de todos los colores posibles que se pueden crear mezclando rojo, verde y azul. Este modelo es popular en fotografía, televisión y gráficos por computadora.

Los valores RGB se especifican como un número entero de 0 a 255. Por ejemplo, rgb(0,0,255) se muestra en azul porque el parámetro azul está establecido en su valor más alto (255) y los demás están establecidos en 0.

Algunas aplicaciones (particularmente los navegadores web) admiten el registro porcentual de valores RGB (de 0% a 100%).

1. h1 (color: rgb(255, 0, 0); ) /* rojo */
2. h2 (color: rgb(0, 255, 0); ) /* verde */
3. h3 (color: rgb(0, 0, 255); ) /* azul */
4. h4 ( color: rgb(0%, 0%, 100%); ) /* mismo azul, entrada de porcentaje */

Los valores de color RGB son compatibles con los principales navegadores.

RGBA

Recientemente, los navegadores modernos han aprendido a trabajar con el modelo de color RGBA, una extensión de RGB compatible con un canal alfa, que determina la opacidad de un objeto.

El valor de color RGBA se especifica como: rgba (rojo, verde, azul, alfa). El parámetro alfa es un número que oscila entre 0,0 (completamente transparente) y 1,0 (completamente opaco).

1. h1 ( color: rgb(0, 0, 255); ) /* azul en RGB normal */
2. h2 ( color: rgba(0, 0, 255, 1); ) /* el mismo azul en RGBA, porque opacidad: 100% */
3. h3 (color: rgba(0, 0, 255, 0.5); ) /* opacidad: 50% */
4. h4 (color: rgba(0, 0, 255, .155); ) /* opacidad: 15,5% */
5. h5 ( color: rgba(0, 0, 255, 0); ) /* completamente transparente */

RGBA es compatible con IE9+, Firefox 3+, Chrome, Safari y Opera 10+.

HSL

El modelo de color HSL es una representación del modelo RGB en un sistema de coordenadas cilíndrico. HSL representa los colores de una manera más intuitiva y legible para los humanos que el RGB típico. El modelo se utiliza a menudo en aplicaciones de gráficos, paletas de colores y análisis de imágenes.

HSL significa Tono (color/tono), Saturación (saturación), Luminosidad/Luminancia (luminosidad/luminosidad/luminosidad, no confundir con brillo).

Tono especifica la posición del color en la rueda de colores (de 0 a 360). La saturación es el valor porcentual de la saturación (de 0% a 100%). La luminosidad es un porcentaje de luminosidad (de 0% a 100%).

1. h1 (color: hsl(120, 100%, 50%); ) /* verde */
2. h2 ( color: hsl(120, 100%, 75%); ) /* verde claro */
3. h3 (color: hsl(120, 100%, 25%); ) /* verde oscuro */
4. h4 ( color: hsl(120, 60%, 70%); ) /* verde pastel */

HSL es compatible con IE9+, Firefox, Chrome, Safari y Opera 10+.

HSLA

Similar a RGB/RGBA, HSL tiene un modo HSLA que admite un canal alfa para indicar la opacidad de un objeto.

El valor de color HSLA se especifica como: hsla (tono, saturación, luminosidad, alfa). El parámetro alfa es un número que va desde 0,0 (totalmente transparente) a 1,0 (totalmente opaco).

1. h1 ( color: hsl(120, 100%, 50%); ) /* verde en HSL normal */
2. h2 ( color: hsla(120, 100%, 50%, 1); ) /* el mismo verde en HSLA, porque opacidad: 100% */
3. h3 (color: hsla(120, 100%, 50%, 0.5); ) /* opacidad: 50% */
4. h4 (color: hsla(120, 100%, 50%, .155); ) /* opacidad: 15,5% */
5. h5 ( color: hsla(120, 100%, 50%, 0); ) /* completamente transparente */

CMYK

El modelo de color CMYK a menudo se asocia con la impresión y la impresión en color. CMYK (a diferencia de RGB) es un modelo sustractivo, lo que significa que los valores más altos se asocian con colores más oscuros.

Los colores están determinados por la proporción de cian (Cyan), magenta (Magenta), amarillo (Yellow), con la adición de negro (Key/blacK).

Cada uno de los números que definen un color en CMYK representa el porcentaje de tinta de ese color que conforma la combinación de colores, o más precisamente, el tamaño del punto de la trama que se imprime en la fotocompositora sobre una película de ese color (o directamente en la plancha de impresión en el caso de CTP).

Por ejemplo, para obtener el color PANTONE 7526, mezclarías 9 partes de cian, 83 partes de magenta, 100 partes de amarillo y 46 partes de negro. Esto se puede denotar de la siguiente manera: (9,83,100,46). A veces se utilizan las siguientes designaciones: C9M83Y100K46, o (9%, 83%, 100%, 46%), o (0,09/0,83/1,0/0,46).

HSB/VHS

HSB (también conocido como HSV) es similar a HSL, pero son dos modelos de colores diferentes. Ambos se basan en geometría cilíndrica, pero HSB/HSV se basa en el modelo "hexcono", mientras que HSL se basa en el modelo "bi-hexcono". Los artistas suelen preferir utilizar este modelo; generalmente se acepta que el dispositivo HSB/HSV se acerca más a la percepción natural de los colores. En particular, el modelo de color HSB se utiliza en Adobe Photoshop.

HSB/HSV significa Tono (color/tono), Saturación (saturación), Brillo/Valor (brillo/valor).

Tono especifica la posición del color en la rueda de colores (de 0 a 360). La saturación es el valor porcentual de la saturación (de 0% a 100%). El brillo es un porcentaje del brillo (de 0% a 100%).

XYZ

El modelo de color XYZ (CIE 1931 XYZ) es un espacio puramente matemático. A diferencia de RGB, CMYK y otros modelos, en XYZ los componentes principales son "imaginarios", lo que significa que no se pueden asociar X, Y y Z con ningún conjunto de colores para mezclar. XYZ es el modelo maestro para casi todos los demás modelos de color utilizados en campos técnicos.

LABORATORIO

El modelo de color LAB (CIELAB, “CIE 1976 L*a*b*”) se calcula a partir del espacio CIE XYZ. El objetivo del diseño de Lab era crear un espacio de color en el que los cambios de color fueran más lineales en términos de percepción humana (en comparación con XYZ), es decir, de modo que el mismo cambio en los valores de las coordenadas de color en diferentes regiones del espacio de color fuera producir la misma sensación de cambio de color.

Muy a menudo, cuando se trabaja con sitios web e imágenes, es necesario determinar el color cualquier punto en la pantalla de su monitor.

Por ejemplo, desea que el color de fondo de su sitio web sea exactamente igual al color del cielo azul en la foto. O haga que la fuente del encabezado tenga el mismo color que el verde mar. O viceversa, utilice el color de fuente como fondo para crear un banner. En definitiva, hay muchas opciones. La cuidadosa selección de colores significa mucho tanto en el diseño web como en el trabajo de un webmaster.

Determinar un color significa encontrar su código. Luego, el código, dependiendo de sus objetivos, se puede utilizar tanto en varios editores gráficos como directamente en el código html.

Se utiliza con mayor frecuencia en el que el código se puede representar en sistemas decimal y hexadecimal.

Es muy conveniente utilizar una pipeta para determinar el color. Pero, además de este programa, existen otros con los que puedes hacer esto.

Cuentagotas Adobe Photoshop

Creo que pocos usuarios de este programa saben que al usarlo puedes determinar el color no sólo cualquier punto de la imagen abierta en el editor, sino también cualquier punto de la pantalla del monitor.

Esto se hace de forma muy sencilla. Ábralo, cree una imagen en él y, sin soltar el botón izquierdo del mouse, mueva el cursor del cuentagotas hasta donde se encuentra el punto que seleccionó. Puede ser cualquier punto fuera de la ventana del programa. A medida que mueves el cursor, verás cómo cambia el color del dibujo en la paleta de colores. Después de seleccionar el punto deseado, suelte el botón del mouse. Haga clic en el cuadro de color del dibujo en la paleta de colores y vea el código de su color.

Este método para determinar el color es conveniente porque no requiere la instalación de ningún programa adicional excepto Photoshop, que la mayoría de los usuarios ya tienen instalado.

Un día, un hombre enseñó a una computadora a determinar el color mediante un código. Es simple: el código es igual al color y el color es igual al código. #FFFFFF = "blanco", "negro" = #000000. Y ahora la computadora muestra un color en el monitor y necesitas averiguar el código de color para poder usar el mismo color en otro programa. ¿Cómo saber el código de color? Para hacer esto, necesita un "detector de color de píxeles" o, en otras palabras, un "programa de pipeta". El programa ColorPic es una determinación instantánea del código de color en cualquier punto de la pantalla del monitor. La utilidad reconoce el color y muestra su código en formato hexadecimal y decimal. La utilidad ColorPic es útil y será de gran utilidad para el diseñador y desarrollador.

Determinar el color del píxel

Los colores determinados por el programa se pueden almacenar en una paleta separada de 16 colores para su memorización. El usuario siempre puede volver al mapa compilado de los colores encontrados; la paleta está disponible incluso después de reiniciar el programa. ColorPic captura un fragmento de la pantalla alrededor del puntero del mouse y muestra su imagen ampliada en su ventana, mientras que el factor de escala de la imagen capturada se puede cambiar de 2 a 36. Después del inicio, el programa determina el color y su designación de código del píxel ubicado debajo del cursor del mouse en cualquier lugar de la pantalla. Para agregar un color a la paleta, ColorPic implementa la combinación de teclas Ctrl+G.

Si tiene su propio sitio web, entonces, voluntaria o involuntariamente, tendrá que dominar las herramientas y habilidades de diversas profesiones de Internet. Las herramientas del diseñador deberán estudiarse con especial atención, ya que el camino hacia el corazón del lector pasa por una imagen profesional. Las imágenes hermosas y bien elegidas en su sitio web aumentan la probabilidad de leer información, ¡eso es un hecho! El hecho de que estas imágenes deben ser únicas también es un hecho irrefutable. Para aprender a hacer dibujos por nuestra cuenta debemos aprender muchos detalles, y uno de ellos es determinar el color de cualquier elemento en una página de Internet. Hoy hablaremos sobre cómo averiguar el color de fondo de una página.

Sé que existen muchos otros métodos y herramientas, pero estoy compartiendo mi experiencia práctica en la creación de imágenes. Si no eres un diseñador profesional, este artículo te será de gran utilidad en tu trabajo futuro. Puedes reconocer el color en una página usando un complemento útil ColorZilla para los navegadores Mozilla Firefox y Google Chrome.

¿Cuándo necesitamos esta herramienta?

— Si está diseñando un diseño de sitio web;
— Si crea un nuevo bloque publicitario que coincida con la paleta de colores del sitio;
— Si está creando una combinación de colores y estilos para el sitio;
— Si está ocupado dibujando elementos de un proyecto virtual;
— Si creas alguna imagen;
— En todos los demás casos en los que necesite determinar el color de un píxel sin ejecutar programas a gran escala y que consuman muchos recursos, como PhotoShop o ColorDraw.

¿Cómo utilizar ColorZilla?

¡Todo es muy sencillo! Vaya al sitio web, haga clic en el icono de la izquierda y seleccione la pestaña que más necesite:

— Mozilla Firefox (herramienta de navegador);
— Google Chrome (herramienta de navegación);
— Generador de gradiente (herramienta en línea).

Descargue el complemento del navegador requerido y, después de la instalación, el ícono de la extensión siempre estará en el panel de su navegador. No olvides activar el complemento, simplemente haz clic en el icono.

Cómo utilizar la extensión ColorZilla

Escribiré en palabras sencillas sobre cómo trabajo con esta extensión. Al crear o editar una imagen en el editor Canva, sobre el cual puedes leer más si sigues este enlace, puede ser necesario agregar un fondo que sea el mismo que la imagen original. En la imagen puedes ver que en el lado derecho hay una parte del fondo blanco que se puede colorear para que coincida con el color de fondo de la imagen. Sin dicha extensión a mano, es muy problemático hacer esto, quizás usando un método de selección que no dará el 100% de identidad. Al hacer clic en el cuentagotas en la extensión y luego hacer clic izquierdo en cualquier píxel de la imagen, aparece una excelente información sobre herramientas en la parte superior que me proporciona el código de color en hexadecimal y RGB.

Para trabajar con el editor Canva, sólo necesito el formato hexadecimal. Lo copio y luego en el editor de Canva ingreso el valor de este color y estoy muy satisfecho con el resultado. Entonces, con solo un par de movimientos puedo seleccionar un color idéntico, agregando así singularidad a la imagen original cambiando su tamaño.

Le sugiero que se siente un rato y se familiarice con todas las herramientas de esta extensión que se encuentran en el menú. Seguro que encontrarás un par de ellos que utilizarás con especial placer. Y dominarás el resto con el tiempo. Sabes mejor que yo que en una imagen puedes cambiar no solo el fondo, sino también que es necesario escribir algo. Elegir el color de fuente adecuado tampoco es tan sencillo como parece a primera vista. Quizás prefieras una paleta o un generador de degradados en lugar de un cuentagotas. De una cosa estoy seguro: con ColorZilla todos los problemas se pueden resolver muy rápidamente.

Como siempre, ¡es mejor ver una vez que leer cien veces! Por eso, te sugiero ver un video en el que aprenderás cómo instalar la extensión ColirZilla y utilizarla en tu trabajo. ¡Les deseo una visualización agradable y hermosas imágenes únicas!

tipo de software: Detección de color
Desarrollador/editor: Vlad Polyanskiy
Versión: 1.0
iPhone + iPad: 33 rublos [Descargar desde App Store]

¡Hay tantas cosas importantes e interesantes en la vida! Los nombres de los colores no son uno de ellos. Recuerda las diferencias de algunos. crudo de camello sólo lo necesitan algunas personas de profesiones muy específicas. Para todos los demás, es suficiente tenerlo a mano. Colorímetro. Esta es una aplicación para iPhone que determina el color a partir de una foto, brindándote la máxima información sobre cada tono.

¿Recuerdas cuando buscabas papel tapiz de un color determinado? ¿O una prenda para un código de vestimenta específico? ¿O tal vez necesita un detalle interior que combine exactamente con los colores de los muebles o agregue acentos? Una nueva aplicación doméstica ayudará a solucionar todos estos y otros pequeños problemas del hogar. Colorímetro para Iphone.

Uno de cada diez hombres se enfrenta al daltonismo: la incapacidad de distinguir los colores. Casi todo el mundo tiene problemas para distinguir entre variedades de tinto. Y nadie Ninguno de nosotros sabe realmente de qué color es el papel pintado de las paredes de nuestra propia casa. La lista de tonos no termina con los típicos colores de crayón de la infancia. tabla de colores ocre oscuro o papel tapiz traje de grullo- no una traducción resbaladiza de otro idioma, sino los nombres reales de los colores reales de los objetos que te rodean.

Colorímetro funciona simplemente. Inicie el programa, tome una foto y pase el dedo sobre ella. La lupa virtual analiza el color en el punto de contacto y muestra su nombre cultural.

Después de correr por la casa con tu iPhone y aprender muchas palabras nuevas, empiezas a darte cuenta de los beneficios del uso práctico de la aplicación. Puedes imitar el sonido. Tampoco es difícil describir con palabras la forma de los objetos. Pero es casi imposible explicar en qué se diferencia el tono de gris que te gusta del que imagina tu interlocutor. Y aquí es donde resulta útil. base de color Colorímetro.

Por ejemplo, necesitas comprar papel tapiz de un color determinado. O peor aún: alguien otro tienes que comprar papel tapiz y estás sentado esperando que por la noche te lleguen a casa una docena de rollos de papel tapiz en un tono completamente diferente al que soñaste. Al tomar una foto del artículo y elegir el tono más cercano a él, estará seguro de que su socio o asistente de reparación sabe exactamente de qué color es. Qué necesito comprar.

A veces, incluso la más mínima desviación de color puede resultar crítica. Por ejemplo, a la hora de elegir pintura. Un título o una imagen ya no es suficiente. Necesitamos estándares y números. Es bueno que Colorimeter también tenga todo esto. Al hacer clic en el nombre de un color, se abrirá. Descripción detallada. Estos son los parámetros de tono en los modelos de color más populares: RGB(imagen digital) y CMYK, para imprimir.

Si no hablamos de pinturas y colores líquidos, sino virtuales, los diseñadores apreciarán dos parámetros adicionales: H.S.B.(tono, saturación y brillo) y MALEFICIO-código de color para sitios web. Además, la aplicación muestra los tres colores más adecuados en el sistema conocido. Pantone, sabiendo cuál, le resultará mucho más fácil dialogar con un fabricante o vendedor de muebles y decoración.

A los desarrolladores Colorímetro Hay varias propuestas para un mayor desarrollo. La información de referencia del color debe copiarse en el portapapeles o al menos resaltarse como texto; esto le ayudará a compartir información rápidamente con personas a través de iMessage o correo electrónico, en lugar de enviarles una captura de pantalla gruesa. Y en la interfaz de la cámara incorporada, un interruptor para el flash no estaría de más, porque ahora se dispara automáticamente, lo que no siempre es bueno.