Selector de color

Cómo elegir y copiar un color

Elegir
Control nativo de color o ajustes.
Ver
RGB, HEX, HSL y CMYK se actualizan juntos.
Copiar
Copia la cadena que uses en CSS o diseño.

¿Un selector integrado?

Evitas saltar entre herramientas y mantienes formatos alineados.

Ventajas

Visual: acierta el tono
Formatos: varios a la vez
Rapidez: copia y pega
Información de color: Consulta información detallada del color
Herramientas de diseño: Usa los colores en proyectos de diseño y desarrollo

Cómo funciona

A partir del color elegido se recalculan todas las representaciones.

Funciones

Sincronizado: un cambio actualiza todo
CMYK: orientativo para impresión
Conversión en tiempo real: cambio instantáneo entre formatos
Vista previa del color: previsualización visual del color elegido
Copiado sencillo: copia los valores de color con un clic

Elegir un color y conservarlo

Un selector solo sirve si el color que eliges puede salir de la página en la forma que espera la siguiente herramienta. Sobre eso está construido este.

Todos los formatos a la vez — Una elección produce HEX, RGB, HSL, HWB, HSV, CMYK, LAB, LCH, OKLAB, OKLCH, Display P3 y XYZ, además del nombre CSS más cercano y su distancia real.
O escribe un valor — El selector y el campo de texto son dos caminos al mismo color. Pega cualquier cosa que CSS entienda y la muestra lo sigue.
Se recuerdan los colores recientes — Los últimos doce colores en los que te detienes quedan en el panel, solo en este dispositivo, para que comparar dos candidatos no obligue a reescribir ninguno.
Compruébalo antes de usarlo — Contraste contra blanco, negro o el color que elijas, y una simulación de cómo lo ve alguien con cada tipo de deficiencia de visión del color.

Cuándo usarlo

Prototipos, tokens de marca y exploración rápida.

Casos

Web: paletas y CSS
Proyectos de diseño: Elige colores para tu trabajo de diseño
Investigación de color: Explora y compara opciones de color
Conversión de formatos: Convierte colores entre distintos formatos
Igualar colores: Iguala colores de imágenes o diseños

Datos

El CMYK en pantalla es aproximación respecto a la prensa real.

Puntos

Millones de colores en sRGB habitual
Varios formatos de color aportan flexibilidad para distintos usos
La conversión en tiempo real garantiza una representación exacta
La selección interactiva hace intuitivo elegir un color
La vista previa ayuda a visualizar cada opción

Prácticas

Calibra pantalla para trabajo crítico.

Calidad

Verifica contraste WCAG si es UI
Ten en cuenta el espacio de color y los límites de gama
Prueba los colores en la aplicación de destino
Comprueba la exactitud de los valores de color
Ten en cuenta la accesibilidad al elegir colores

Cuándo no

Perfiles ICC específicos sin gestión de color
No te fíes solo del color en pantalla para proyectos impresos
Si necesitas igualar colores con precisión, usa herramientas profesionales
No lo uses para aplicaciones que exigen perfiles de color concretos

Límites

Resultado depende del dispositivo y del perfil de color.

Impulsado por algoritmos optimizados de procesamiento de imagen.

Los demás convertidores de color

Preguntas frecuentes

¿Cómo funciona el selector de color?

Arrastra el selector o mueve los controles para elegir un color, y la vista previa se actualiza en tiempo real. A medida que seleccionas, la herramienta calcula al instante los valores RGB, HEX, HSL y CMYK correspondientes, y editar cualquier campo recalcula los demás para que todos describan el mismo color.

¿Qué formatos de color muestra?

Para cada color que eliges, la herramienta muestra cuatro formatos en paralelo: RGB y HEX para pantallas y CSS, HSL para ajustar tono y luminosidad de forma intuitiva, y CMYK como guía para impresión. Los cuatro se mantienen sincronizados y se actualizan en cuanto cambias el color seleccionado.

¿Puedo usar los colores elegidos en CSS?

Sí. Cada formato tiene su propio botón de copiar, así que puedes tomar el código HEX o la cadena rgb() y pegarla directamente en CSS o HTML. HSL también está listo para la función hsl() de CSS, y los valores CMYK dan a los equipos de impresión y branding los números que necesitan.

¿Mis colores se mantienen privados?

Sí. El selector se ejecuta por completo en tu dispositivo, así que los colores que eliges y los valores que genera nunca se suben ni se guardan en un servidor. Nada sale de tu dispositivo, lo que mantiene las paletas de marca y los colores de diseños sin publicar totalmente privados.

¿El selector de color funciona en móvil?

Sí. Funciona en cualquier dispositivo moderno en escritorio, tableta y teléfono, con controles táctiles para que arrastres el selector y los deslizadores con el dedo. El diseño se adapta a pantallas pequeñas, y copiar valores funciona igual que en escritorio.

¿El selector de color es gratis y funciona sin conexión?

Sí. El selector es totalmente gratis, sin marcas de agua ni límites de uso. Como toda la conversión es local, sigue funcionando sin conexión a internet una vez cargada la página, lo que lo hace práctico para cotejar colores rápidamente en cualquier lugar.