Seleccion 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 diseno en el navegador — colores, paletas, degradados, conversion de imagenes, 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 mas, 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 relacion 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, expansion y color por capa
Como elegir
Elige la herramienta adecuada para tu tarea
Trabajo en codigo
Convertir entre HEX y RGB
El convertidor HEX ↔ RGB traduce entre todas las notaciones de color web. Util cuando tienes un HEX de una especificacion de diseno y necesitas el RGB para una variable CSS.
Que formato?
HEX vs HSL vs RGB — cuando usarlos?
HEX es el mas compacto y compatible en CSS. Usa RGB cuando necesites transparencia (rgba). Prefiere HSL en Tailwind o para ajustar luminosidad programaticamente.
¿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.
- Funciona sin conexión Tras la primera carga, todas las herramientas funcionan sin conexión.
Preguntas frecuentes
Las herramientas de diseno de Tool Matic envian mis datos?
No. Cada herramienta de diseno 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 diseno 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. Ningun dato sale de tu pestana del navegador. Puedes comprobarlo abriendo las DevTools y mirando la pestana Red.
Que 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 anaden un canal alfa explicito. HSL trabaja con tono, saturacion y luminosidad, mas facil de ajustar a mano. OKLCH es perceptualmente uniforme: cambios numericos iguales dan cambios visuales iguales, util para paletas accesibles. El selector de color y el convertidor HEX a RGB generan todos esos formatos.
Como 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 instantaneo.
Que formato de imagen es mejor para la web - PNG, JPG, WebP o AVIF?
Para fotos, AVIF da el archivo mas pequeno con buena calidad, con WebP como respaldo solido. JPG sigue siendo valido cuando importa la compatibilidad amplia. PNG es la opcion para sin perdida o transparencia. SVG es lo mejor para logos, iconos y figuras geometricas escalables. Elige primero por contenido y luego el codec que mantenga el archivo mas pequeno con calidad aceptable.
Puedo usar estas herramientas de diseno sin conexion?
Necesitas conexion para la primera carga. Luego, las herramientas siguen funcionando porque el trabajo ocurre en tu navegador, sin idas y vueltas al servidor.
Puedo copiar las salidas directamente a mi codigo?
Si. Las salidas estan listas para pegar como HEX, RGB, HSL, OKLCH, CSS, SVG o data-URI segun la herramienta. Cada resultado tiene un boton de copia.