Selección de colores
Encontrar y convertir colores
Color Picker te da los valores HEX, RGB, HSL y HSB de cualquier color que elijas — copia cualquier formato con un clic.
Diseño · 7 herramientas
Color, hermosamente bajo control.
Utilidades de diseño en el navegador — colores, paletas, degradados, conversión de imágenes, ayudas CSS y SVG — con salidas listas para pegar, ejecutadas localmente.
7 herramientas
5 formatos de color
0 subidas
// 7 herramientas
Selector de color
Selecciona colores de cualquier imagen o espectro y copia HEX, RGB, HSL, OKLCH y más, todo en tu navegador
#F5C842
Convertidor HEX a RGB
Convertidor bidireccional HEX ↔ RGB con alpha, sintaxis CSS4 y copia al portapapeles, en tu navegador
#2563EB
Verificador de contraste
Introduce colores de primer plano y fondo para ver al instante la relación de contraste y los resultados WCAG 2.2 AA/AAA, con sugerencias e historial, todo en tu navegador.
Generador de paletas de color
Introduce un color HEX, RGB o HSL y genera paletas armónicas usando reglas de teoría del color — con exportación a variables CSS y config Tailwind
Generador de degradados
Crea degradados CSS lineales, radiales y cónicos visualmente con salida de código en vivo, preajustes y exportación SVG.
Border Radius Generator
Ajusta visualmente los radios de esquinas. Copia CSS shorthand, longhand, Tailwind o propiedad custom — directamente en tu navegador.
Generador de Box Shadow
Crea declaraciones CSS box-shadow multicapa con vista previa en vivo — ajusta desplazamiento, desenfoque, expansión y color por capa
Cómo elegir
Elige la herramienta adecuada para tu tarea
Trabajo en código
Convertir entre HEX y RGB
El convertidor HEX ↔ RGB traduce entre todas las notaciones de color web. Útil cuando tienes un HEX de una especificación de diseño y necesitas el RGB para una variable CSS.
¿Qué formato?
HEX vs HSL vs RGB — ¿cuándo usarlos?
HEX es el más compacto y compatible en CSS. Usa RGB cuando necesites transparencia (rgba). Prefiere HSL en Tailwind o para ajustar luminosidad programáticamente.
¿Qué formato?
El formato de color adecuado para cada trabajo
HEX
Compacto y universal
La opción por defecto para CSS y tokens de diseño. Compacto, conocido y soportado en todas partes. Úsalo como primera opción.
#F5C842 · #F5C842CC (with alpha)
RGB / RGBA
Cuando necesitas alfa explícito
Úsalo cuando necesitas un canal alfa legible o al trabajar con canvas, Three.js u otras APIs de color JS.
rgb(245, 200, 66) · rgba(245, 200, 66, 0.8)
HSL
Más fácil de ajustar a mano
HSL mapea tono, saturación y luminosidad — facilita oscurecer, aclarar o desplazar un color manualmente.
hsl(44, 90%, 61%)
OKLCH
Paletas perceptualmente uniformes
Cambios numéricos iguales dan cambios visuales iguales — ideal para sistemas de diseño accesibles y armoniosos.
oklch(83% 0.16 89)
Herramientas de diseño que respetan tu flujo
Las herramientas de diseño de Tool Matic están construidas en torno a un principio: quitarse del camino. Elige un color, obtén el valor, cópialo, listo.
Todas las salidas están listas para pegar en el formato que espera tu código — HEX, RGB, HSL, OKLCH, cadenas CSS, SVG o data-URIs. Los archivos procesados se manejan completamente en tu navegador.
Qué obtienes
- Salida lista para pegar HEX, RGB, HSL, OKLCH, cadenas CSS — todo con botón de copiar.
- Se ejecuta en tu navegador Todo el procesamiento ocurre en tu navegador. Nada llega a nuestros servidores.
- Contraste WCAG El Verificador de contraste informa ratios de contraste WCAG 2.2.
- En tu dispositivo Colores, degradados y sombras se calculan en tu navegador, nunca en un servidor.
Preguntas frecuentes
¿Las herramientas de diseño de Tool Matic envían mis datos?
No. Cada herramienta de diseño de Tool Matic se ejecuta completamente en tu navegador mediante JavaScript del lado del cliente. Tus valores de color, datos de paleta y salidas CSS nunca se transmiten a un servidor — abre cualquier herramienta y empieza al instante.
¿Se suben o almacenan mis datos?
No. Las herramientas de diseño de Tool Matic — incluyendo el selector de color, el generador de paletas, el generador de degradados y el verificador de contraste — procesan todo del lado del cliente. Ningún dato sale de tu pestaña del navegador. Puedes comprobarlo abriendo las DevTools y mirando la pestaña Red.
¿Qué formato de color usar en CSS - HEX, RGB, HSL o OKLCH?
Usa el que mejor te encaje. HEX es compacto y universal. RGB y RGBA añaden un canal alfa explícito. HSL trabaja con tono, saturación y luminosidad, más fácil de ajustar a mano. OKLCH es perceptualmente uniforme: cambios numéricos iguales dan cambios visuales iguales, útil para paletas accesibles. El selector de color y el convertidor HEX a RGB generan todos esos formatos.
¿Cómo compruebo si mis colores cumplen el contraste WCAG?
Compara primer plano y fondo con los umbrales de contraste WCAG 2.2: 4,5:1 para texto normal, 3:1 para texto grande y controles, 7:1 para AAA. Usa el Verificador de contraste — introduce tus colores para obtener el ratio y un resultado AA/AAA instantáneo.
¿Qué formato de imagen es mejor para la web - PNG, JPG, WebP o AVIF?
Para fotos, AVIF da el archivo más pequeño con buena calidad, con WebP como respaldo sólido. JPG sigue siendo válido cuando importa la compatibilidad amplia. PNG es la opción para sin pérdida o transparencia. SVG es lo mejor para logos, iconos y figuras geométricas escalables. Elige primero por contenido y luego el codec que mantenga el archivo más pequeño con calidad aceptable.
¿Necesito conexión a internet?
Solo para abrir la página. Una vez cargada, todo el procesamiento ocurre en tu navegador y nada de lo que introduces se envía a un servidor. Recargar la página requiere conexión.
¿Puedo copiar las salidas directamente a mi código?
Sí. Las salidas están listas para pegar como HEX, RGB, HSL, OKLCH, CSS, SVG o data-URI según la herramienta. Cada resultado tiene un botón de copia.