introducción colorSynthAxis es una herramienta online gratuita concebida para hacer más fácil a los diseñadores web el manejo de esa pesadilla llamada color. Aunque esta utilidad parezca muy compleja, aprenderás a usarla en menos de cinco minutos y después no podrás vivir sin ella. el objeto color Cada cuadrado en pantalla es un objeto color. Se puede mover arrastrando con el ratón o se puede clicar sobre él: Arrastra el ratón para desplazarlo por la pantalla. Clica sobre él para mostrar/ocultar el borde, el código HTML y el botón desplegar menú. El botón desplegar menú muestra/oculta las opciones avanzadas. Arrastra el botón desplegar menú para ajustar la posición del color según una cuadrícula. Dobleclica sobre el color para hacerlo desaparecer. si sólo hay uno no podrás eliminarlo. el menú desplegable Es el que nos va a permitir realizar toda clase de procesos con el color. Podemos tanto modificarlo como crear nuevos objetos e interaccionar entre ellos. Paso a describir cada uno de los elementos y sus posibilidades. deslizadores Permiten modificar el color usando dos sistemas de parametrización distintos. Arrastrando con el ratón permiten especificar los valores RGB de un color en el intervalo [0,255]. RGB son las iniciales de Red [rojo] Green [verde] Blue [azul], los tres colores aditivos. El estándar RGB es el más extendido en informática pero existen otros como el YUV, YIQ, XYZ, etc... Aunque estos tres colores combinados permiten obtener la mayor parte de los colores visibles por el ojo humano, su manejo es antiintuitivo. La gran ventaja es que los monitores trabajan internamente en RGB. El estándar HSV define un color por tres características: Hue = matiz. El nombre del color. Este parámetro es circular, con lo que poniéndolo a tope se nos colocará automáticamente en cero. Saturation = saturación. Cuanto mayor, más chillón. Cuanto menor, más próximo al B/N. Value = intensidad. Cuanto mayor, más luminoso. V=0 es el color negro. Este sistema es muchísimo más intuitivo que el RGB, pero desgraciadamente NO constituye un estándar real, ya que hay varios algoritmos para la conversión a HSV y los intervalos varían según el contexto o el software empleado. Por eso no uso cajetines ya que rara vez serán útiles. Los botones en forma de estrella tienen otra función que explico más abajo. Debo añadir que me he basado en el algoritmo (bastante chapucero) de Foley y van Dam. No he tenido otro remedio porque windows y la mayor parte del software comercial lo utilizan. cajetines Sirven de entrada y salida numéricas de los parámetros de color. Usando Ctrl+C y Ctrl+V podemos copiar y pegar, respectivamente, en estos campos. Tanto HTML como muchos programas comerciales (PhotoShop, FireWorks, etc...) utilizan un código de 6 caracteres para definir los colores. SynthAxis es perfectamente compatible con ellos gracias a este cajetín. La relación entre RGB y este sistema es directa: los valores RGB están codificados en hexadecimal de dos en dos cifras. Con una calculadora científica es muy fácil convertir estos códigos entre sí. Las raras veces que no dispongamos del código de color HTML siempre podemos introducir (o extraer) numéricamente los datos RGB de manera individual. creación de nuevos objetos Siempre que cliquemos uno de estos botones aparecerá una flecha que señalará la futura posición en pantalla del nuevo objeto. Este aparecerá cuando soltemos el ratón. Crea Copia: hará una copia del objeto actual Crea Negativo El resultado será el mismo que en un negativo fotográfico: además de obtener el color complementario los colores claros se harán oscuros y viceversa. Crea Complementario El resultado NO será el mismo que en un negativo fotográfico: colores claros generarán colores claros y oscuros generarán oscuros. Crea Espectro: SynthAxis generará una colección de colores de izquierda a derecha basada en el color actual. El número de objetos nuevos será el especificado en el control de objetos, explicado a continuación.Procura crearlos a la izquierda de la pantalla para no perderlos por el borde. Los colores mostrados a continuación han sido obtenidos del primero de ellos mediante la función Crear Espectro. Comparten una saturación y una intensidad similar. control de objetos A la hora de crear un espectro de color o de realizar transiciones entre objetos podemos determinar cuántos colores nuevos queremos.Usaremos + y - para subir y bajar. El mínimo es 1 y el máximo 9. Por defecto son 3. Este campo no es editable como texto. La modificación en UN color afectará a TODOS. transiciones Esta son unas de las herramientas más potentes de SynthAxis. Tras clicar en el botón correspondiente del color de origen, arrastraremos el ratón hasta el color de destino. Los nuevos colores se interpondrán entre ellos. Se crearán tantos como estén indicados en el control de objetos. Crea Transición Matiz Arriba: esta función recorre el espectro en dirección rojo-violeta. Crea Transición Matiz Abajo: ídem dirección violeta-rojo. Según la distancia entre los colores fuente y destino y la dirección seguida tendremos transiciones más suaves o más violentas. Crea Transición RGB: esta función mezcla los colores suavemente sin recorrer el espectro. Si el control de objetos está puesto a 1 obtendremos el color resultado de mezclar los dos. En ocasiones es un buen recurso. Ejemplo de cada tipo de transición: asignaciones A veces es muy útil copiar una propiedad de un color en otro. Para esto están los botones de asignación que se emplean igual que los anteriores, clicando y arrastrando sobre el color destino. En iguala el color. en iguala la saturación. En iguala el valor. truco: cómo combinar colores difíciles Uno de mis secretos es asignarles una saturación parecida. Si tenemos un color chillón y otro pastel podemos hacer los dos chillones o los dos pastel. Para ello basta con asignar la saturación del que deseemos conservar al otro. Si nos dan una combinación de colores espantosa (y no hay más remedio que utilizarla) siempre podemos probar a arreglarlos así. Otro asignador potente es la función de iluminación. Se utiliza del mismo modo que la anterior. Asigna luz: proyecta el color origen sobre el objeto destino. Esta función SIEMPRE OSCURECE el objeto destino ya que actúa efectuando una media geométrica en cada componente RGB. truco: cómo hacer un velado de color Si queremos dar a nuestro proyecto un tono más cálido o más frío podemos iluminar un conjunto de colores con una misma luz. Partiendo del espectro anterior... Tras aplicar una luz amarilla #FFF843 (por ejemplo) a cada cuadrado se obtiene Todos los azules han desaparecido y el conjunto ha ganado en calidez. En cambio, si aplico una luz azul, como #30D0FF, los colores originales adquirirán una tonalidad más fría: ya no hay rojos. Una manera sencilla de obtener una gama coherente es crear unos cuantos colores al azar y luego aplicarles la misma luz. Cuanto más clara, mejor. Puede que la función más útil de todo el sistema sea la siguiente. Asigna luminosidad: iguala la luminosidad del objeto destino a la del objeto origen. Se utiliza clicando y arrastrando, como el resto de asignadores. Las componentes RGB no tienen todas la misma luminosidad. El azul es casi 5 veces menos luminoso que el verde. Este botón se mueve automáticamente al cambiar cualquiera de las características RGB o HSV del color, indicando con su posición la luminosidad relativa. El algoritmo utilizado corresponde al monitor estándar, que tiene un gamma 2.2. Por tanto L=R*0.299+G*0.587+B*.114. truco: cómo obtener una gama de colores equivalentes A veces necesitamos obtener una serie de colores que sean distinguibles entre sí pero en los que ninguno predomine sobre otro. Este problema aparentemente tonto puede ser todo un quebradero de cabeza, especialmente con más de tres colores. Con los colores claros se convierte en una pesadilla. Voy a utilizar colorSynthAxis para generar no tres, sino VEINTE colores claros equivalentes. En este caso toda una gama de grises claros. Obtener uno de estos es fácil bajando y subiendo . Este mismo nos vale: Hallo su opuesto con la herramienta Crear Complementario. Ahora lanzo entre ellos dos transiciones de matiz: hacia arriba y hacia abajo. Obtengo lo siguiente. Como se puede comprobar, las diferencias entre azules y amarillos son notables. Los colores de partida están centrados en los extremos. Obviamente cuando trabajes con el sistema los colores se dispondrán en función de como coloques los originales. Aquí están ordenados en cuadrícula para mayor claridad. Si convierto a grises estos colores mediante PhotoShop obtengo el resultado de la derecha. Como era de esperar, las diferencias de luminosidad son evidentes. Una vez obtenidos estos 18 colores les daré a todos la misma luminosidad. Para ello arrastraremos desde la del color de abajo a la izquierda hacia todos los demás. La conversión a grises de estos últimos muestra un panorama mucho más equilibrado. El resultado no es perfecto porque clarear colores más oscuros que el de referencia muchas veces es imposible sin cambiar la saturación. Como se ve, el resultado es una serie de colores muy equilibrados. Apenas se pueden distinguir si entrecerramos los ojos. Ahora sólo queda escoger aquellos que más nos gusten. La siguiente paleta también está obtenida con este método. actualización: versión 2.000 He añadido un botón nuevo, el / a la derecha del deslizador . Con él ahora podremos escoger entre dos gamas de color.   Paleta Artística RYB Esta es la que nos enseñaron en el colegio de pequeños. Considera colores primarios el rojo, el amarillo y el azul. Y secundarios sus opuestos: el verde, el violeta y el naranja respectivamente. Es un sistema incorrecto puesto que los opuestos no generan grises, sino nuevos colores. Pero precisamente eso lo hace útil a la hora de obtener mezclas. Y lo que es mejor, los colores son más equidistantes y se consigue un mejor equilibrio entre cálidos y fríos. Esta será la paleta por defecto a partir de ahora.   Paleta Científica RGB Es la paleta correcta desde un punto de vista técnico, ya que colores opuestos generan grises. Pero azules y verdes predominan sobre los colores cálidos y las gamas no suelen ser agradables al ojo del artista. Los pares de opuestos son rojo-turquesa, verde-violeta y azul-amarillo Esta era la única paleta con la que trabajaba este sistema y ahora es opcional. Gracias a Karramarro por su crítica porque fue la que me impulsó a introducir esta mejora. La conversión de matiz entre un sistema y otro es una conversión no-lineal muy sencilla y que he creado de manera semiintuitiva. En principio correspondería a un sistema RYB, aunque habitualmente se considera el azul de este sistema más próximo al CIE-210º que al CIE-240º que he puesto yo. Elegí este último por sus mejores resultados.El seleccionar una paleta u otra afectará profundamente todas aquellas transformaciones de color que recurran a la componente de matiz. En nuestro caso, las funciones: Transición de Matiz Abajo Transición Matiz Arriba Crear Complementario Crear Espectro ¿te convence el sistema colorSynthAxis? Envíame un mail o deja una firma en el libro de visitas. Si tienes página pon un link a http://color.cranf.net Si además te dedicas al diseño y vas a utilizar este sistema profesionalmente, envíame un link a tu página para que lo ponga aquí. colorSynthAxis es utilizado por (riguroso orden alfabético)... un especial agradecimiento a bizarros a la par que elegantes AlixLoop azul9 Bcareful catenaria designerslife* ePlastiq hartum m69s mdem piensaenpixels processblack smile is life the orange side