1. Inicio
2. Color y diseño

Color y diseño

Herramientas gratuitas de color y CSS para diseñadores y desarrolladores: convierte códigos, crea paletas, comprueba la accesibilidad y genera degradados, sombras y favicons. Todo funciona en tu navegador y tus imágenes nunca se suben a ningún servidor.

Si tienes un color en un formato y lo necesitas en otro, el conversor de colores traduce entre HEX, RGB, HSL, HSV, CMYK y OKLCH. Para elegir un tono desde cero usa el selector de color, que incluye cuentagotas de pantalla, tintes y sombras; y si buscas un nombre CSS concreto, consulta la lista completa de nombres de colores HTML.

Para construir una identidad visual, el generador de paletas calcula armonías complementarias, análogas, triádicas o monocromáticas y las exporta como variables CSS. También puedes partir de una fotografía con colores de una imagen, que extrae la paleta dominante, o encontrar el punto intermedio exacto entre dos tonos con el mezclador de colores.

La accesibilidad no es opcional: el comprobador de contraste aplica la fórmula de WCAG 2.2 y te propone el color corregido más parecido cuando no llegas a AA o AAA, y el simulador de daltonismo muestra cómo ven tus diseños las personas con protanopia, deuteranopia o tritanopia.

Por último, los generadores de CSS te dan código listo para copiar con vista previa en vivo: degradados, sombras, esquinas redondeadas y curvas de animación. Y cuando tu web esté lista, crea su icono con el generador de favicon.

• Conversor de coloresPega un color en cualquier formato y obtén su HEX, RGB, HSL, HSV, CMYK y OKLCH listos para copiar.
• Selector de colorElige colores con un selector visual o el cuentagotas y copia su código HEX, RGB, HSL o HSV.
• Generador de paletasGenera paletas complementarias, análogas, triádicas o monocromáticas y expórtalas como variables CSS.
• Comprobador de contrasteCalcula el contraste WCAG entre texto y fondo, revisa AA/AAA y sugiere el color corregido más cercano.
• Generador de degradadosDiseña degradados CSS lineales, radiales o cónicos con vista previa y copia el código.
• Generador de sombras CSSCrea sombras box-shadow y text-shadow con varias capas, vista previa en vivo y código copiable.
• Generador de border-radiusAjusta las cuatro esquinas, en px o %, con radios elípticos y obtén el border-radius abreviado.
• Nombres de colores HTMLLos 148 colores con nombre de CSS con HEX, RGB y nombre en español; busca, filtra y copia.
• Generador cubic-bezierCrea curvas de animación cubic-bezier arrastrando los puntos de control y compáralas en vivo.
• Simulador de daltonismoSimula cómo ven tus imágenes las personas con protanopia, deuteranopia, tritanopia o acromatopsia.
• Colores de una imagenObtén la paleta dominante de una foto y el HEX de cualquier píxel con el cuentagotas.
• Mezclador de coloresMezcla dos colores en cualquier proporción, compara sRGB y OKLab y genera pasos intermedios.
• Generador de faviconCrea favicon.ico y PNG de 16 a 512 px desde texto, emoji o imagen, con el código HTML listo.

¿Buscas otra cosa? Explora todas las herramientas.