Dónde colocar etiquetas de texto en el selector de color personalizado

Creé un selector de color para un sitio web y tengo un problema con el diseño de un texto.

Encima del selector de color, habrá un "Color nuevo" y un "Color original". Me está costando encontrar una ubicación para colocar el texto. (No creo que esté claro sin el texto).

ingrese la descripción de la imagen aquí

El naranja es el color nuevo y el verde es el color antiguo.
Además, ¿está claro que en el nuevo color, puede cambiar el campo de texto hexadecimal?

Actualizar

Intenté insertar el texto debajo del color hexadecimal. No salió bien. También probé poniéndolo encima, que tampoco salió bien.

ingrese la descripción de la imagen aquí

¡Hola Jessica y bienvenida a Diseño Gráfico! Para preguntas como esta que buscan ideas, tenemos un conjunto de requisitos que su pregunta debe cumplir. ¿Cómo se utilizará el selector de color? ¿Cómo es el resto de la aplicación? ¿Qué ideas has probado hasta ahora?
¡Gracias por actualizar tu pregunta! ¿Podría también tratar de abordar las otras preguntas que hice en mi comentario?
@ZachSaucier Actualizado de nuevo. No estoy seguro de cómo responder "¿Cómo se usará el selector de color?"
¡Mucho mejor! Gracias por su esfuerzo y cooperación.
¿Por qué necesita mostrar el color anterior en primer lugar?
Para que el usuario pueda comparar el nuevo con el antiguo
@ZachSaucier Además, siento que está incompleto sin él
Creo que sería más útil ver el cambio en lo que sea para lo que se usa este color
@ZachSaucier Entonces, ¿está diciendo que simplemente elimine todo el color anterior? Pero todos los programas principales que tienen un selector de color, tienen el color anterior y el actual. Di los programas de Adobe.
No creo que necesites el texto "Color actual" allí. Por ejemplo , este complemento atom lo hace de manera similar a su primer ejemplo y después de haber usado ese selector de color muchas veces, puedo decir que funciona muy bien. No confuso en absoluto.
@Joonas ¡Gracias! ¿Crees que está claro que puedes cambiar el valor hexadecimal del nuevo color?
Si necesito cambiar el valor hexadecimal manualmente en un selector de color, encuentro dónde hay un código hexadecimal e intento hacer clic en él para ver si puedo cambiarlo. ayudaría si pareciera un campo de entrada más genérico, seguro... Pero no creo que sea necesario.
@Joonas ¡Gracias! ¿Cuál crees que es mejor? i.imgur.com/Bx6yk8v.png i.imgur.com/BKdtcF8.png (La diferencia es que uno tiene un borde alrededor de todo el campo de texto, mientras que el otro solo lo tiene en la parte inferior). O si tiene alguna otra sugerencia, por favor hágamelo saber.
Creo que todos son igual de buenos. Solo es cuestión de elegir uno.

Respuestas (1)

No necesita etiquetas de texto.

En sus imágenes de ejemplo, no está claro cuáles son las dos barras de color, pero en contexto debería estar perfectamente claro. Suponiendo que elegir un nuevo color en el selector actualizará la barra de 'nuevo color', eso dejará en claro cuál es ese color, y el usuario es consciente del color que ya ha seleccionado, lo que deja en claro cuál es el ' la barra del "color original", o lo deducirán una vez que se actualice el "nuevo color".

Usted comentó que Adobe tiene un indicador de color anterior/nuevo en sus selectores de color, así que tómelos como ejemplo: no tienen ningún texto que etiquete los colores y está claro (al menos para mí) cuáles son.

Si tienes etiquetas de texto...

Si agrega etiquetas de texto, no usaría "color actual". "Actual" es un poco ambiguo, podría tomarse como el color anterior (actualmente seleccionado fuera del selector) o el nuevo color (actualmente seleccionado en el selector). Utilice algo como "anterior" y "nuevo", o "antiguo" y "nuevo".

Las etiquetas también deben ser mucho menos prominentes que los valores. Hágalos más pequeños que los valores hexadecimales y posiblemente un peso más ligero. Un ejemplo rápido:

ingrese la descripción de la imagen aquí

Re: entrada de texto

Tal como está (con un ligero color de fondo y sin borde), la entrada de texto no es obvia, pero está implícita. No es obvio "en su cara", pero será claro para los usuarios que están familiarizados con los selectores de color y que desean ingresar un valor HEX. Si no están familiarizados con los selectores de color y no entienden el valor HEX, probablemente no importe (suponiendo que sus usuarios estén familiarizados con los selectores de color y los valores de color HEX).

Con respecto a sus dos ejemplos (de los comentarios), el borde completo es muy obvio, pero probablemente demasiado obvio: no desea que sea más prominente que las funciones principales del selector de color. El borde inferior es mucho mejor y puede ser mejor. No creo que lo necesites , pero eso depende de cuánto protagonismo le quieras dar a la entrada.

Otra opción, si desea que la entrada sea realmente obvia, es usar un icono con la entrada:

ingrese la descripción de la imagen aquí

El ícono del cursor lo hace bastante obvio, podría hacerlo aún más con algo como un ícono de "editar" de lápiz . Nuevamente, no creo que lo necesite en absoluto, pero depende de su caso de uso.

¡Gracias! ¿Crees que está claro que puedes cambiar el valor hexadecimal del nuevo color? ¿O cree que uno de los siguientes es mejor: i.imgur.com/Bx6yk8v.png i.imgur.com/BKdtcF8.png (La diferencia es que uno tiene un borde alrededor de todo el campo de texto, mientras que el otro solo tiene en el inferior.) O si tiene alguna otra sugerencia, hágamelo saber.
@Jessica actualizó mi respuesta. No creo que lo necesites , todas tus opciones son buenas, todo depende de lo que quieras y de la importancia que le quieras dar a la entrada.
+1 porque toda su respuesta se puede resumir como "está perfectamente bien tal como está", con lo que estoy de acuerdo
jaja, es una respuesta bastante larga teniendo en cuenta, pero sí, eso es lo que se reduce a
Dónde colocar etiquetas de texto en el selector de color personalizado
RespuestasAquíPolítica de privacidad1y, 0v