Elige un color o pega cualquier valor HEX, RGB o HSL para obtener todos los formatos que necesitas para diseño y código: HEX, RGB, HSL y OKLCH. Ve una escala de tintes y sombras, y comprueba lo legible que es el texto sobre ese color frente al blanco y al negro.
Un color de marca tiene que cumplir varias funciones: destacar en los botones, seguir siendo legible detrás de un texto blanco y no cansar la vista a lo largo de toda una página. Los azules, verdes y rojos oscuros de tono medio suelen conseguir las tres. Los colores muy claros (amarillo, rosa pastel) quedan bien en un logotipo pero son malos para botones, porque ni el texto blanco ni el negro se leen bien sobre ellos sin ajustes.
El panel de contraste lo muestra al instante. Si el texto blanco obtiene menos de 4.5:1, usa texto negro o elige una sombra más oscura de la escala para los botones.
Los tintes mezclan tu color con blanco; las sombras lo mezclan con negro. Una paleta práctica para un sitio web solo necesita unos pocos: un tinte muy claro para los fondos de sección, el color principal para botones y enlaces, y una sombra más oscura para los estados hover. Añade grises neutros para el texto y los bordes y tendrás un conjunto completo y coherente.
Para comprobar una combinación concreta de texto y fondo (por ejemplo, texto gris sobre un fondo teñido), usa el comprobador de contraste de color, que evalúa tanto WCAG AA como AAA.
Un código de seis dígitos para un color en pantalla, escrito como # seguido de tres pares de dígitos hexadecimales para el rojo, el verde y el azul. #FF0000 es rojo puro; #000000 es negro; #FFFFFF es blanco.
Describen los mismos colores de formas distintas. HEX y RGB indican las cantidades de rojo, verde y azul. HSL indica el tono (el ángulo en una rueda de color), la saturación y la luminosidad, lo que resulta más fácil de ajustar a mano.
OKLCH es un formato de color CSS más reciente basado en cómo percibimos el color. Dos colores con el mismo valor L se ven igual de claros, lo que facilita crear paletas coherentes. Todos los navegadores principales actuales lo admiten.
Con la fórmula de WCAG 2: la luminancia relativa del color más claro más 0.05, dividida entre la del color más oscuro más 0.05. Para comprobar dos colores concretos, usa el comprobador de contraste de color de We.Inc.
Relacionado: Comprobador de contraste de color, Herramienta para combinar fuentes, Generador de favicon, Generador de firmas de correo.
Empieza gratis, mira cómo funciona el creador de sitios web con IA de We.Inc. El plan gratuito te permite publicar hasta 3 sitios con plantilla en una dirección we.inc, sin IA y sin dominio propio. La creación con IA empieza en $20 al mes.