Selector de Color Pro

Selector de Color Pro - Herramienta Profesional

Selector de color avanzado con características profesionales para diseñadores, desarrolladores y artistas. Genera armonías de color, crea tonos y tintes, previsualiza degradados, guarda colores favoritos y obtén información detallada del color. Vea también nuestro Mezclador de Colores y nuestro Verificador Contraste.

¿Cuál es la diferencia entre HEX, RGB, HSL y CMYK?

Son cuatro maneras de describir el mismo color, cada una para un flujo de trabajo distinto. HEX es la abreviación hexadecimal de 6 dígitos del RGB (#FF5733); es el estándar en HTML y CSS por ser compacta y fácil de copiar. RGB expresa el mismo valor como tres canales de 0-255 (rgb(255,87,51)) y es el formato que manipulas en JavaScript o canvas. HSL re-parametriza el mismo color como Tono, Saturación y Luminosidad (hsl(9,100%,60%)); es el modelo más humano para construir temas porque puedes mantener el tono y solo ajustar la luminosidad para crear matices y sombras. CMYK usa porcentajes de Cian, Magenta, Amarillo y Negro y existe para impresión — tu pantalla no puede mostrar CMYK real, así que los valores aquí son una aproximación matemática.

¿Cómo elijo un color y lo copio en un clic?

Haz clic en la muestra principal para abrir el selector nativo del navegador, arrastra dentro del degradado y por el control de tono hasta encontrar el color, y cierra el diálogo. Los cuatro campos de formato (HEX, RGB, HSL, CMYK) se actualizan en tiempo real. Haz clic en cualquier campo — o en su icono de copiar — para copiar esa representación al portapapeles; un aviso confirma la copia. Para tomar un color que ves en pantalla, usa el cuentagotas del sistema que ofrece Chrome (el pequeño icono dentro del selector nativo en navegadores Chromium). Para experimentar rápido, pulsa Aleatorio varias veces hasta que algo te resuene y luego refina ajustando los valores HSL. Guarda el resultado con el botón Guardar para mantenerlo en la biblioteca local entre sesiones.

¿Qué son las armonías cromáticas y cuándo usar cada una?

Las armonías cromáticas son grupos de tonos relacionados matemáticamente que el ojo lee como agradables juntos. Complementaria (opuesta en la rueda, azul + naranja) da el contraste más fuerte — úsala para un acento sobre fondo neutro. Análoga (tres tonos a 30 grados) se siente natural y serena — úsala para páginas editoriales y temas de naturaleza. Triádica (tres tonos a 120 grados) es atrevida y equilibrada — úsala para marcas lúdicas e infografías. Tetrádica (dos pares complementarios formando un cuadrado) es la más rica y la más difícil — deja que un tono domine mientras los demás apoyan. Monocromática (un tono, varias luminosidades) es la opción más segura — úsala para UI minimalistas sofisticadas. Aplica la regla 60-30-10: 60% dominante, 30% secundario, 10% acento, sea cual sea la armonía.

¿Cuál es la diferencia entre sombras, matices y tonos?

En teoría clásica del color, una sombra es tu color base mezclado con negro (más oscura, a menudo más dramática); un matiz es tu color base mezclado con blanco (más claro, a menudo más suave); un tono es tu color base mezclado con gris (más apagado, a menudo más sofisticado). En términos digitales, todo se hace en HSL: una sombra baja la luminosidad, un matiz la sube y un tono baja la saturación. Los sistemas de diseño normalmente generan una rampa de 9 escalones de 50 (matiz más claro) a 900 (sombra más oscura) para cada color de marca, de modo que cualquier elemento de UI — botones, alertas, fondos, bordes — pueda tomar un valor consistente del mismo tono. Esta herramienta genera sombras y matices automáticamente; copia la tira entera como punto de partida para tus tokens de diseño.

¿Cómo creo un degradado CSS lineal o radial desde este selector?

Elige tu color principal, luego usa una armonía como Análoga o Complementaria para obtener un segundo color que el ojo acepte como mezcla suave. Cambia la vista previa entre Lineal y Radial. Los degradados lineales fluyen en línea recta a un ángulo dado (linear-gradient(135deg, #A 0%, #B 100%)) y van bien en fondos, secciones hero y botones; 135deg es la opción más segura porque se lee como luz natural desde arriba a la izquierda. Los degradados radiales emanan desde un punto focal (radial-gradient(circle at center, #A, #B)) y son ideales para resplandores, focos y avatares tipo esfera. Copia la cadena CSS generada directamente en tu hoja de estilos. Para mejor contraste, coloca el texto sobre una capa sólida, no directamente sobre el degradado.

¿Cómo decide la herramienta si recomendar texto blanco o negro sobre mi color?

Calcula la luminancia relativa WCAG del fondo: convierte cada canal RGB a valor lineal y suma con pesos L = 0.2126 R + 0.7152 G + 0.0722 B (el verde domina porque el ojo humano es más sensible a él). Luego mide la relación de contraste real del color contra blanco puro y contra negro puro, y recomienda el que dé mayor relación. Esta es la decisión WCAG genuina, no un atajo de brillo NTSC, así que nunca elige la opción de menor contraste ni siquiera en tonos medios saturados. El color recomendado se actualiza en cuanto cambias el color principal, y el panel de Contraste y Accesibilidad te muestra las relaciones exactas.

¿Qué relación de contraste necesito para cumplir con WCAG?

WCAG 2.1 fija relaciones mínimas de contraste texto-fondo según el tamaño del texto y el nivel de conformidad. Para el Nivel AA — la base legal de la ADA en EE. UU. y la EN 301 549 en la UE — el texto de cuerpo normal debe alcanzar al menos 4.5:1, mientras que el texto grande (18pt / 24px normal, o 14pt / 18.66px negrita) solo necesita 3:1 porque las letras grandes se leen más fácil. Para el Nivel AAA, más estricto, el texto normal debe alcanzar 7:1 y el grande 4.5:1. Los componentes de interfaz y objetos gráficos (iconos, bordes de formularios, anillos de foco) necesitan 3:1 contra los colores adyacentes. Esta herramienta toma el color elegido como fondo y muestra su contraste frente a texto blanco y negro, etiquetando cada uno con una insignia AAA, AA, AA Grande o Falla para que confirmes el cumplimiento antes de publicar — pero prueba siempre el par real primer plano/fondo que vas a usar, ya que tu texto rara vez es blanco o negro puro.

¿Cómo guardo colores de marca y reconstruyo una paleta después?

Selecciona o pega tu color y pulsa Guardar. La herramienta almacena cada muestra en localStorage del navegador, así que sobrevive recargas y cierres de pestaña pero queda en este dispositivo. Guarda todo tu espectro de marca de entrada — primario, secundario, tres o cuatro acentos, un neutro y cualquier color semántico (éxito, aviso, peligro) — y tendrás una biblioteca personal que carga al instante cada visita. Haz clic en cualquier muestra guardada para devolverla al color principal y luego derivar armonías, degradados o rampas de matices. Para compartir en equipo, exporta los valores HEX a JSON de design tokens o pégalos en un documento de estilos de Figma; localStorage no sincroniza entre dispositivos solo. Usa Borrar Todo para vaciar la biblioteca al empezar un proyecto cliente nuevo.

¿Qué implicaciones de daltonismo debo considerar al diseñar con una paleta de cinco colores?

Cerca del 8% de los hombres y 0.5% de las mujeres tienen alguna deficiencia visual de color, siendo la confusión rojo-verde la más común (deuteranopía y protanopía). Una paleta que dependa de rojo contra verde para transmitir significado (un icono de error rojo junto a uno verde de éxito) será idéntica para estos usuarios. Tres defensas: (1) nunca uses color solo para transmitir estado — añade forma de icono, etiqueta o patrón; (2) prueba tu paleta con un simulador de daltonismo (el Simulador de Daltonismo de este sitio sirve); (3) prioriza diferencias de tono en el eje azul-amarillo cuando debas depender del color, porque esas distinciones sobreviven a la mayoría de tipos de daltonismo. Pasa tus pares finales primer plano/fondo por un verificador WCAG y un simulador CVD antes de publicar.

Características Profesionales

• Selector de color avanzado
• 5 modos de armonía de color
• Generar tonos y tintes automáticamente
• Crear degradados lineales y radiales
• Guardar colores favoritos ilimitados
• Copiar todos los formatos de color
• Información de color en tiempo real
• Recomendación de mejor color de texto
• Actualizaciones instantáneas
• Procesamiento 100% del lado del cliente