Tienes el color correcto en la notación equivocada
Traduce entre HEX, RGB, HSL y los formatos de salida disponibles sin adivinar los valores de los canales. Abrir Conversor de colores
Mesa de diseño
Herramientas de color y CSS
Convierte colores, comprueba el contraste y crea efectos CSS listos para usar.
Elige una tarea
¿Qué necesitas hacer?
Color
Conversor de colores
Convierte colores entre HEX, RGB(A), HSL(A), HSV y OKLCH.
Color
Comprobador de contraste WCAG
Mide la relación de contraste entre los colores del texto y del fondo.
Color
Generador de paletas de colores
Genera tonos coordinados a partir de un color base con relaciones predecibles.
Color
Selector de color de imagen
Toma una muestra de un píxel de una imagen y copia sus valores HEX, RGB y HSL.
Color
Generador de degradados CSS
Crea un degradado lineal o radial con dos colores y una vista previa.
Color
Generador de sombras CSS
Ajusta desplazamiento, desenfoque, extensión, color, opacidad y modo interior.
Color
Generador de filtros CSS
Combina brillo, contraste, saturación, tono, desenfoque, sepia, grises e inversión.
Qué cubre esta colección
Las tareas que resuelven estas herramientas
El diseño necesita los colores en la notación que espera la siguiente herramienta, y necesita que pasen la revisión de accesibilidad. Convierte entre HEX, RGB y HSL con alfa cuando haga falta, comprueba un par de texto y fondo frente a los umbrales AA y AAA de WCAG, extrae colores de una imagen o crea una paleta a partir de un tono base, y genera el CSS de degradado, sombra o filtro listo para pegar en una hoja de estilos.
Elige la herramienta de color según la decisión de diseño
Convertir la notación, elegir una paleta y comprobar la accesibilidad responden a preguntas distintas. Usa el comprobador para decidir si pasa o no, en lugar de juzgar el contraste a ojo.
Necesitas texto y colores de interfaz legibles
Comprueba un primer plano y un fondo frente a los umbrales WCAG mostrados antes de publicarlos. Abrir Comprobador de contraste WCAG
Necesitas colores relacionados a partir de uno
Genera una paleta coordinada y después valida las combinaciones que vayas a usar para texto. Abrir Generador de paletas de colores
Convierte una imagen de referencia en una paleta accesible
Muestrea primero, organiza los colores después y prueba al final pares reales de primer plano y fondo. Una paleta agradable no produce automáticamente texto legible.
1. Muestrea el origen
Selecciona píxeles representativos de la imagen y guarda los valores exactos que quieras explorar. Abrir Selector de color de imagen
2. Crea opciones relacionadas
Usa un color muestreado como base y compara varias estrategias de paleta coordinada. Abrir Generador de paletas de colores
3. Valida pares reales
Comprueba cada combinación de texto y fondo que vayas a usar, incluidos el texto pequeño y los estados atenuados. Abrir Comprobador de contraste WCAG
Privacidad desde el diseño
Tu trabajo permanece contigo
Los archivos y textos seleccionados permanecen privados mientras usas estas herramientas.
Resultados fluidos
Consejos para archivos grandes
Los archivos muy grandes pueden necesitar más memoria, sobre todo en un móvil. Conserva los originales y empieza con un lote pequeño.