¿Qué es Selector de color?
El Selector de Color te permite elegir cualquier color de forma visual mediante una entrada de color interactiva y ver al instante su valor en todos los formatos de color principales: HEX (estándar web), RGB (visualización en pantalla), HSL (cómodo para diseño) y CMYK (impresión). Una tira de tonos muestra variantes más claras y más oscuras generadas automáticamente del color elegido, y el panel de accesibilidad muestra las relaciones de contraste sobre fondos blanco y negro.
La conversión entre formatos de color es una tarea constante en diseño y desarrollo. Los diseñadores trabajan en HEX y HSL para pantallas; los diseñadores de impresión necesitan CMYK; los desarrolladores de CSS usan RGB para operaciones de opacidad; los sistemas backend pueden almacenar colores como enteros o cadenas HSL. Nuestra herramienta elimina la necesidad de calculadoras separadas al ofrecer todos los formatos a la vez.
Los datos de accesibilidad —la relación de contraste sobre blanco y negro— ofrecen información inmediata sobre el cumplimiento de las WCAG en el momento de elegir el color. Comprobar la accesibilidad mientras se eligen los colores evita que las infracciones se descubran tarde en el desarrollo, cuando son más costosas de corregir.
Casos de uso
Aquí tienes las formas más comunes en que la gente usa Selector de color todos los días.
Conversión de formato de colores de marca
Una guía de marca especifica un color primario en CMYK para impresión. Necesitas el código HEX para la web y RGB para la publicidad digital. Introduce el color de forma visual y obtén todos los formatos a la vez para una representación coherente en todos los medios.
Generación de tonos para sistemas de diseño
Un sistema de diseño necesita una gama tonal: variantes de fondo, borde, texto atenuado, texto de cuerpo y encabezado del color primario. La tira de tonos muestra variantes más claras y más oscuras en todo el rango de luminosidad. Haz clic en cualquier tono para copiar su código hex y usarlo en variables CSS o tokens de diseño.
Comprobación previa de accesibilidad
A medida que eliges los colores del texto y de los elementos de la interfaz, la visualización de la relación de contraste muestra inmediatamente si el color alcanza la proporción WCAG AA de 4,5:1 requerida sobre tu fondo. Comprobarlo durante la selección es más rápido que hacerlo después con una herramienta aparte.
Desarrollo de CSS
Al implementar un diseño, copia el HEX para las propiedades de color CSS estándar, RGB para rgba() con opacidad y HSL para ajustes programáticos. Los tres se proporcionan a la vez sin conversión manual.
Gestión de tokens de color para sistemas de diseño
Los sistemas de diseño definen una paleta de tokens: --color-primary-500, --color-primary-600, --color-neutral-100, etc. El selector de color genera la tira de tonos para cualquier color base, ofreciendo la gama tonal completa necesaria para definir variantes clara, predeterminada, oscura y de hover. Copia el valor HEX de cada tono directamente en tu archivo de tokens de diseño o en el panel de estilos de Figma. Esto garantiza que la paleta de tokens sea matemáticamente coherente: los tonos se generan a partir del mismo tono base con pasos de luminosidad predecibles.
Comprobación previa de accesibilidad al elegir colores
La visualización de la relación de contraste muestra inmediatamente si un color elegido alcanza la proporción WCAG AA de 4,5:1 requerida sobre fondos blanco o negro. Comprobarlo durante la selección del color —antes de comprometerse con una dirección de diseño— es mucho más rápido y económico que descubrir fallos de accesibilidad tras la entrega del diseño o durante el desarrollo. Sobre todo para los colores de texto, elegir un color de primer plano mientras se observa la actualización de la relación de contraste en tiempo real evita que las infracciones de accesibilidad queden integradas en el diseño desde el principio.
Ejemplos
Conversión de azul primario
Convierte un azul primario a todos los valores de formato para usarlo en web e impresión.
#0070F3 HEX: #0070F3 | RGB: rgb(0, 112, 243) | HSL: hsl(211, 100%, 48%) | CMYK: cmyk(100%, 54%, 0%, 5%) Generar gama de tonos para un color de marca
Ve la gama tonal completa de un verde de marca para definir tokens de un sistema de diseño.
#16A34A (verde) Tonos: 50 → #f0fdf4 | 100 → #dcfce7 | ... | 600 → #16a34a | ... | 900 → #14532d Color HSL en CSS para temas programáticos
Copia el valor HSL para crear una propiedad personalizada CSS que admita un cálculo de tonos sencillo.
#7C3AED (violeta) HSL: hsl(263, 70%, 58%) — definido como --color-primary-h: 263; --color-primary-s: 70%; --color-primary-l: 58%; Selector de color frente a Selector de color de Figma
Nuestro selector de color independiente frente a la herramienta de color integrada de Figma para desarrolladores y diseñadores.
| Característica | Toolorah | Selector de color de Figma |
|---|---|---|
| Visualización de HEX, RGB, HSL | Todos a la vez | Un formato cada vez |
| Conversión a CMYK | Sí | No |
| Generación de gama de tonos | Sí: tira automática | Manual con estilos |
| Relación de contraste WCAG | Sí: sobre blanco y negro | Requiere un complemento aparte |
| Cuentagotas de pantalla | Mediante el selector del SO | Sí: integrado |
| Funciona sin cuenta de Figma | Sí | Requiere cuenta |
| Copiar valores listos para CSS | Sí: formateados para CSS | Sí |
Consejos para usar Selector de color
- HSL es lo más útil para ajustes de color programáticos: cambia la L para tonos más claros/oscuros, la S para colores apagados/vivos y la H para tonos relacionados.
- Los colores RGB en pantalla pueden parecer más vivos que su equivalente CMYK de impresión: la gama CMYK es más pequeña que la sRGB.
- El selector de color del navegador activa el selector de color del sistema operativo al hacer clic; en macOS, esto incluye un cuentagotas para muestrear cualquier color de la pantalla.
- Los colores HEX con pares repetidos pueden abreviarse en CSS: #AABBCC → #ABC.
- Se requiere un contraste de 4,5:1 para el texto normal (WCAG AA). El texto grande (18 pt o más) solo requiere 3:1.
Preguntas frecuentes
¿Cuál es la diferencia entre RGB y HSL?
RGB define los colores como intensidades de los canales de luz roja, verde y azul, lo que coincide con la forma física en que las pantallas producen color, pero no con la forma en que los humanos perciben de manera intuitiva las relaciones cromáticas. HSL (tono, saturación, luminosidad) se ajusta más a la intuición cromática humana: el tono gira alrededor de la rueda de color (0°=rojo, 120°=verde, 240°=azul), la saturación controla la intensidad del color del gris al color pleno y la luminosidad controla el brillo del negro al blanco. Crear una variante más clara o más oscura de un color en HSL implica ajustar la L; en RGB requiere recalcular los tres canales.
¿Cómo convierto HEX a RGB?
Un color HEX son tres pares de dígitos hexadecimales que representan el rojo, el verde y el azul: #RRGGBB. Convierte cada par de hexadecimal a decimal. #0070F3 → R: 00 = 0, G: 70 = 112, B: F3 = 243 → rgb(0, 112, 243). Para convertir a la inversa: expresa cada decimal como dos dígitos hexadecimales (0-255 se asigna a 00-FF). La mayoría de los desarrolladores usan una herramienta para esto en lugar de calcularlo a mano. Nuestro selector de color muestra todas las conversiones a la vez.
¿Por qué los valores CMYK son aproximaciones de los colores de pantalla?
RGB es aditivo (luz): rojo + verde + azul al máximo = blanco. CMYK es sustractivo (tinta): cian + magenta + amarillo + negro al máximo = casi negro. Estos modelos tienen gamas de color distintas: el rango de colores que pueden representar. Muchos colores RGB de pantalla vivos quedan fuera de la gama CMYK y no pueden reproducirse con precisión en impresión. Los valores CMYK convertidos desde RGB son la aproximación de impresión más cercana posible. Para colores críticos de marca, trabaja con un especialista en producción de impresión para asegurarte de que los valores CMYK se reproducen de forma aceptable en tu papel y tu prensa concretos.
¿Qué son los colores con nombre de CSS?
CSS admite 147 colores con nombre, de «aliceblue» a «yellowgreen», definidos en la especificación CSS Color. Están asignados a valores HEX: «cornflowerblue» es #6495ED, «tomato» es #FF6347. Los colores con nombre son cómodos por su legibilidad en CSS y son compatibles con todos los navegadores. Nuestro selector de color muestra el valor HEX: puedes usar el HEX o el color con nombre equivalente en CSS si existe uno para el color elegido.
¿Cómo elijo un color de mi pantalla?
Al hacer clic en la entrada de color de nuestra herramienta se activa el selector de color nativo de tu sistema operativo. En macOS Ventura y posteriores, incluye una herramienta de cuentagotas con lupa que permite muestrear cualquier píxel de la pantalla. En Windows 11, el selector de color de algunas apps incluye un cuentagotas. Para un cuentagotas basado en navegador que funcione en Chrome y Edge, puede usarse la API web EyeDropper (window.EyeDropper). Para el muestreo de color multiplataforma, la app Medidor de Color Digital de macOS y el Selector de Color de Windows PowerToys son herramientas independientes fiables.
¿Qué es una gama de color y por qué importa en el diseño?
Una gama de color es el rango de colores que un dispositivo puede mostrar o un medio puede reproducir. sRGB es la gama estándar de la mayoría de los monitores y de la web: cubre aproximadamente el 35 % de los colores visibles. Display P3 (usado en las pantallas modernas de Apple y muchas otras) cubre alrededor del 50 % de los colores visibles, produciendo verdes, rojos y cianes más vivos. La CMYK de impresión cubre un subconjunto distinto y carece de muchos azules y verdes saturados. Diseñar en sRGB garantiza que tus colores se vean coherentes en todos los dispositivos. Si diseñas en P3 y un usuario lo ve en un monitor sRGB, los colores se verán menos vivos de lo previsto.
¿Cuál es la diferencia entre sRGB y Display P3?
sRGB es el espacio de color estándar de la web, definido en 1996 para los monitores de consumo. Display P3 es un espacio de color más amplio diseñado originalmente para el cine digital, que ahora se usa en las pantallas de Apple, las pantallas OLED de Samsung y los teléfonos modernos. P3 tiene aproximadamente un 25 % más de volumen de color que sRGB, con verdes y rojos notablemente más amplios. CSS Color Level 4 admite colores P3 con la sintaxis color(display-p3 r g b). Para el diseño web, sRGB sigue siendo el valor predeterminado seguro. Usa colores P3 solo para experiencias en las que sepas que tu audiencia tiene pantallas compatibles con P3 y hayas probado alternativas para pantallas que solo admiten sRGB.