Selector de Colores Online
Elige un color en la rueda, ajústalo con precisión en el lienzo de saturación, y léelo en todos los formatos que hable tu proyecto — desde #RRGGBB hasta oklch(). Este selector también incluye lo que otras herramientas se dejan por el camino: tres geometrías de rueda, incluida la rueda de pintores RYB, superposiciones de armonía que te construyen una paleta, un canal alfa y exportación con un clic de toda la paleta como variables CSS, SCSS o JSON. Todo calculado localmente en tu navegador.
Tres ruedas, no una
El selector Modo de rueda cambia la geometría de la propia rueda:
- HSV y HSL son las ruedas digitales — los tonos se distribuyen tal como las pantallas RGB mezclan la luz. Se diferencian en cómo se comporta el lienzo cuadrado: en HSV la esquina más brillante es el tono puro, en HSL los tonos puros están al 50 % de luminosidad, con blanco por encima.
- RYB (pintores) organiza los tonos como los aprenden los artistas: rojo, amarillo y azul como primarios, con naranja, verde y morado entre medias. Su valor práctico se nota en las armonías — en la rueda RYB, el complementario del rojo es el verde y el complementario del azul es el naranja, los pares clásicos de pigmento, mientras que una rueda digital empareja el rojo con el cian. Si alguna vez una paleta “complementaria” de un selector normal te ha parecido rara a la vista, esta es la razón.
Armonías que construyen la paleta por ti
Elige una regla en Armonía de color y la rueda marca los colores complementarios, que aparecen como una paleta lista para usar:
- Complementaria — un color opuesto. El contraste más fuerte; úsala para un único acento sobre un color de marca dominante.
- Complementaria dividida — los dos vecinos del complementario. Casi tanto contraste, mucho más fácil de equilibrar.
- Triádica — tres tonos repartidos por igual. Vivaz pero estable; deja que uno domine y usa los otros dos con moderación.
- Tetrádica (cuadrado) — cuatro tonos. Esquemas ricos para ilustración y visualización de datos; difícil de equilibrar en interfaces.
- Análoga — los vecinos inmediatos. Poca tensión, buena para fondos y degradados.
- Monocromática — un tono en distintos niveles de luminosidad. La opción más segura para estados de interfaz (hover, activo, deshabilitado).
El panel de paleta copia todo el conjunto con un clic, en el formato que elijas: HEX plano, RGB, HSL, OKLCH, propiedades personalizadas CSS listas para pegar (--color-1: …), variables SCSS o JSON para pasarlas al código.
Pega cualquier cosa, lee todo
Los campos de entrada aceptan prácticamente cualquier notación de color que les lances: #f80, #ff8800, hex de 8 dígitos con alfa, rgb() / rgba(), hsl(), hwb(), lch(), oklch(), oklab(), cmyk(), 0xFF8800, o nombres de color CSS como rebeccapurple. Sea lo que sea lo que entre, salen siete formatos sincronizados: HEX, RGB, HSL, HSV, LCH, OKLCH y CMYK, cada uno con su propio botón de copiar.
Dos chips de ayuda bajo la vista previa nombran el color por ti: el color CSS con nombre más cercano (útil para prototipos rápidos y para hablar de colores) y el token de Tailwind más cercano (por ejemplo, orange-500), para que puedas quedarte dentro de tu sistema de diseño en lugar de inventar valores sueltos.
Arrastra el deslizador de opacidad (alfa) bajo la vista previa y las salidas cambian a sus formas transparentes — #RRGGBBAA, rgba(), hsla() — con la vista previa mostrada sobre un fondo de cuadros para que puedas valorar la transparencia.
¿Qué formato deberías usar?
| Formato | Nombre completo | ¿Cuándo usarlo? |
|---|---|---|
| HEX | Hexadecimal | El estándar de la web. Compacto, soportado universalmente, fácil de copiar. Con 8 dígitos añade alfa. |
| RGB | Red, Green, Blue | Cómo piensan las pantallas. Tres canales de luz, de 0 a 255. El formato que esperan la mayoría de las APIs y el código de canvas. |
| HSL | Hue, Saturation, Lightness | Para editar a mano. “Un poco más claro” o “menos saturado” es cambiar un solo número. |
| HSV | Hue, Saturation, Value | Software gráfico. El modelo que hay detrás de los selectores de Photoshop y GIMP. |
| LCH | Lightness, Chroma, Hue | Perceptualmente uniforme. Pasos numéricos iguales se ven como pasos visuales iguales — lo que HSL pretende ser sin conseguirlo del todo. |
| OKLCH | OK Lightness, Chroma, Hue | La opción moderna en CSS. Corrige los saltos de tono de LCH en los azules; soportado en todos los navegadores actuales e ideal para sistemas de tokens de diseño. |
| CMYK | Cyan, Magenta, Yellow, Key | Orientación para imprenta. Una conversión aproximada para hablar con diseñadores de imprenta; los valores finales siempre dependen del perfil de color de la impresora. |
Pequeños detalles que ahorran tiempo
- El historial se guarda solo. Los últimos 24 colores con los que has trabajado sobreviven a un refresco de página — almacenados solo en el almacenamiento local de tu navegador, nunca subidos a ningún sitio.
- Cuentagotas. En navegadores con la API EyeDropper (Chrome y Edge) puedes elegir un color desde cualquier punto de tu pantalla, incluso fuera de la ventana del navegador.
- Control por teclado. La rueda y el lienzo de saturación responden a las flechas del teclado para ajustes con precisión de píxel.
- Los preajustes cubren los colores base habituales cuando solo necesitas un punto de partida rápido.
Preguntas Frecuentes (FAQ)
¿Es seguro usar oklch() en CSS de producción?
Sí. Todas las versiones actuales de Chrome, Edge, Firefox y Safari soportanoklch(), y se ha convertido en la notación preferida para tokens de diseño (Tailwind CSS 4 define toda su paleta con ella). Para navegadores muy antiguos, sirve un valor HEX de respaldo en la línea anterior — esta herramienta te da ambos valores.