Uso del selector de color
Usa este selector para elegir un color de forma visual, escribir un valor directamente, tomar muestras de una imagen o explorar paletas desde la rueda de color. El color actual se convierte a Hex, RGB, HSL, HSV y OKLCH para que puedas usarlo en CSS, herramientas de diseño y código exportado.
Uso del selector Hex
El selector permite recorrer el campo de color arrastrando el punto de selección, editando los valores de canal o escribiendo un código Hex. Cuando cambia el color, las muestras, armonías, variaciones, vistas de contraste y paneles de exportación se actualizan desde el mismo valor.
¿Cuántos colores Hex existen?
Un color Hex usa seis caracteres hexadecimales con el formato #RRGGBB. Cada par controla rojo, verde o azul de 00 a FF, lo que ofrece 16,777,216 colores RGB posibles.
Selector de color de imagen
El selector de imagen puede tomar colores directamente de una imagen subida. Mueve cualquier punto de muestra sobre la imagen para capturar un color, comparar valores y exportar los colores seleccionados sin salir de la página.
Rueda de color
La rueda de color es útil cuando quieres trabajar por matiz. Arrastra el anillo exterior para cambiar el matiz y ajusta el área interior para refinar saturación y brillo mientras toda la interfaz permanece sincronizada.
Sombras, tintes y tonos
Las sombras mezclan el color seleccionado con negro, los tintes con blanco y los tonos lo acercan al gris. Estas variaciones sirven para estados hover, bordes, fondos, estados desactivados y superficies de interfaz.
Armonías de color
Las paletas armónicas se construyen desde relaciones en la rueda de color. Las combinaciones análogas, complementarias, complementarias divididas, triádicas, tetrádicas y cuadradas son puntos de partida rápidos para marcas, acentos de UI, datos e ilustración.
Espacios de color
RGB describe colores de pantalla mediante luz roja, verde y azul. HSL separa matiz, saturación y luminosidad para ajustar colores con más intuición. HSV es común en selectores visuales y OKLCH busca una percepción más uniforme para paletas CSS modernas.
Códigos Hex
Los códigos Hex son compactos, fáciles de copiar y ampliamente compatibles con navegadores y herramientas de diseño. Como Hex y RGB describen los mismos canales, se pueden convertir entre sí sin cambiar el aspecto del color.
Exportación de códigos de color
Los paneles de exportación reúnen la paleta visible en formatos para Tailwind, Figma, variables CSS, funciones con prefijo y listas de código. Haz clic en una muestra para copiar un color o usa exportar cuando necesites el grupo completo.
WCAG y accesibilidad
Las combinaciones legibles dependen del contraste. El comprobador compara el color seleccionado sobre fondos claros y oscuros para ayudarte a elegir texto, bordes y superficies pensando en la accesibilidad.
Simulador de daltonismo
El simulador muestra cómo puede cambiar el color actual en condiciones comunes de visión cromática. Ayuda a evitar paletas que dependen solo del matiz y favorece más contraste, etiquetas y señales visuales secundarias.
Temas claros y oscuros
Sombras, tintes, tonos y armonías pueden formar la base de temas claros y oscuros. Empieza con un color, revisa sus variaciones y exporta los valores adecuados para fondos, primeros planos, botones y estados destacados.
Uso de la rueda de color
La rueda de color es una forma visual de entender cómo se relacionan los colores. Ordena los matices en un círculo, lo que facilita elegir un color base, comparar colores cercanos y crear paletas equilibradas con relaciones previsibles.
¿Qué es una rueda de color?
Una rueda de color coloca rojo, naranja, amarillo, verde, azul y violeta alrededor de un espectro circular. Los colores cercanos suelen sentirse relacionados y suaves, mientras que los opuestos crean más contraste y energía.
Cómo usar esta rueda de color
Arrastra sobre la rueda para elegir un matiz y ajusta el color dentro del selector para refinar saturación y brillo. El color actual actualiza valores Hex, RGB, HSL, HSV y OKLCH, la paleta superior, las muestras armónicas y los paneles de exportación.
Colores primarios
Los colores primarios son puntos de partida para muchos sistemas de color. En teoría artística tradicional son rojo, amarillo y azul. En pantallas, RGB usa luz roja, verde y azul para crear colores en sitios, apps y herramientas digitales.
Colores secundarios
Los colores secundarios se crean mezclando dos primarios. En una rueda tradicional, naranja, verde y violeta se sitúan entre los primarios y conectan paletas cálidas, frías y neutras.
Colores terciarios
Los colores terciarios se ubican entre primarios y secundarios. Incluyen amarillo-naranja, rojo-naranja, rojo-violeta, azul-violeta, azul-verde y amarillo-verde, aportando más matiz que la rueda básica de seis colores.
Colores cálidos y fríos
Los colores cálidos como rojo, naranja y amarillo suelen sentirse activos, brillantes y llamativos. Los fríos como azul, verde y violeta pueden sentirse más tranquilos y amplios. Una paleta fuerte suele usar una temperatura como base y la otra como acento.
Colores complementarios
Los colores complementarios están opuestos en la rueda. Crean alto contraste y son útiles para botones, destacados, insignias y zonas donde un elemento debe sobresalir.
Colores análogos
Las paletas análogas usan colores vecinos de la rueda. Como los matices están cerca, el resultado suele ser suave, natural y más fácil de controlar en fondos, tarjetas, gráficos e ilustraciones.
Colores triádicos
Las paletas triádicas usan tres matices espaciados uniformemente. Pueden crear un esquema vivo pero equilibrado cuando un color lidera y los otros dos se usan con moderación.
Colores complementarios divididos
Una paleta complementaria dividida parte de un color base y usa los dos colores junto a su complemento directo. Ofrece contraste fuerte como una complementaria, pero con un rango más suave y flexible.
Colores tetrádicos y cuadrados
Las paletas tetrádicas y cuadradas usan cuatro colores alrededor de la rueda. Son útiles cuando un diseño necesita varios acentos, pero funcionan mejor cuando un color domina y el resto se equilibra con tintes o sombras.
Sombras, tintes y tonos
Después de elegir una relación de matiz, usa sombras, tintes y tonos para hacer práctica la paleta. Los tintes claros pueden ser fondos, las sombras oscuras texto o bordes, y los tonos suaves estados secundarios.
Construir un esquema de color
Empieza con el color principal, elige un tipo de armonía y prueba el resultado en necesidades reales de interfaz. Un esquema completo suele incluir color primario, uno o dos acentos, superficies neutras, texto legible y estados seguros de contraste.
Exportar colores de la rueda
Cuando la paleta se vea correcta, exporta los colores como variables CSS, valores Tailwind, objetos para Figma, funciones con prefijo o listas de código. El color seleccionado también puede copiarse desde cualquier muestra visible.
Accesibilidad y contraste
La armonía de color no garantiza legibilidad. Comprueba el contraste de textos y controles importantes, evita depender solo del color y usa el simulador para prever cambios en condiciones comunes de visión cromática.