Fuentes y colores

La tipografía y el color son las decisiones de diseño que más impactan en cómo se percibe un sitio. Con dos fuentes bien elegidas y una paleta coherente, un diseño sencillo se ve profesional. Estas herramientas te ayudan a elegir, combinar y comprobar que todo sea legible y accesible.

Regla práctica: usa máximo dos familias tipográficas (una para títulos y otra para texto) y una paleta con un color principal, uno de acento y una escala de grises.

Fuentes gratuitas

Google FontsMás de 1,500 familias gratuitas, con fuentes variables.FontsourceFuentes de código abierto instalables con npm (autohospedadas).Bunny FontsAlternativa a Google Fonts enfocada en privacidad (compatible con su API).FontshareFuentes de calidad profesional gratis para uso comercial.Font SquirrelFuentes con licencia comercial y generador de webfonts.The League of Moveable TypeFuentes de código abierto con mucho carácter.InterUna de las mejores fuentes para interfaces.GeistFamilia sans y mono de Vercel, libre.JetBrains MonoFuente monoespaciada pensada para código.Fira CodeFuente para código con ligaduras.

Combinar y probar tipografías

FontPairCombinaciones de Google Fonts que funcionan bien juntas.FontjoyGenera combinaciones de fuentes con aprendizaje automático.Type ScaleCalcula una escala armónica de tamaños de texto.UtopiaTipografía fluida con clamp() entre móvil y escritorio.Wakamai FondueDescubre qué características tiene un archivo de fuente.WhatFontIsIdentifica una fuente a partir de una imagen.Modern Font StacksPilas de fuentes del sistema: cero descargas.

Generadores de paletas

CoolorsGenera paletas con la barra espaciadora y bloquea los colores que te gusten.Adobe ColorRueda de color con armonías y extracción desde imágenes.Color HuntMiles de paletas curadas por la comunidad.Happy HuesPaletas mostradas aplicadas en un sitio real.Realtime ColorsPrueba tu paleta y fuentes en una página de ejemplo al instante.UI ColorsGenera escalas 50–950 estilo Tailwind desde un color.Radix ColorsEscalas de color accesibles con modo claro y oscuro.Paleta de TailwindLa paleta completa de Tailwind con sus valores.Muzli ColorsGenerador de paletas con vista previa en interfaces.ColorSpaceGenera paletas y degradados a partir de un color.HuemintPaletas generadas con IA aplicadas a ejemplos de marca y web.Material PaletteCombina dos colores Material y obtén la paleta completa.

Degradados

CSS GradientEditor visual de degradados con código CSS.uiGradientsColección de degradados bonitos listos para copiar.WebGradients180 degradados lineales gratuitos en CSS.MesherGenera degradados de malla (mesh) en CSS.Gradient GeneratorDegradados sin zonas grises gracias a otros espacios de color.

Accesibilidad y contraste

WebAIM Contrast CheckerComprueba si tu texto cumple el contraste WCAG AA/AAA.Coolors Contrast CheckerVerifica el contraste y sugiere colores que sí cumplen.Who Can UseMuestra quién puede leer tu combinación de colores.ColorablePrueba combinaciones de texto y fondo con su puntuación.OKLCH Color PickerSelector en el espacio OKLCH, ideal para escalas uniformes.

La regla 60-30-10

Usa el color dominante (normalmente un neutro claro u oscuro) en 60% de la superficie, un color secundario en 30% y el color de acento en solo 10%: botones, enlaces y llamados a la acción. Así lo importante resalta por sí solo.