Una referencia precisa del color
Colores HEX, conversiones y contraste listos para usar.
Consulta valores fiables, contraste y formatos listos para copiar, sin cuentas, relleno ni significados inventados.
- 01HEX, RGB, HSL, HWB y OKLCH
- 02Contraste con texto blanco y negro
- 03Tintes, sombras y CSS listo para copiar
Puntos de partida populares en CSS
Empieza por los colores más utilizados.
Una selección breve y revisada basada en datos publicados sobre palabras clave CSS, no en el volumen de búsqueda actual.
Colección con fuente
Compara colecciones de colores con fuente.
Elige una de estas tres referencias cuidadosamente revisadas.
Elige un color inicial
Abre un color y ponlo en práctica.
Cada página incluye valores HEX, RGB, HSL, HWB y OKLCH listos para copiar, comprobaciones de contraste, tintes, sombras y una base de CSS.
La búsqueda abarca todos los colores publicados, incluidas las referencias útiles que se mantienen deliberadamente fuera del índice de búsqueda.
Las referencias revisadas e indexables aparecen primero. Los demás colores publicados siguen disponibles mediante la búsqueda y al continuar explorando el catálogo.
Elige una colección verificada o vuelve al catálogo publicado completo en cualquier momento.
Se muestran los colores 1–24 de 4188 publicados.
Guías seleccionadas
Métodos que conviene tener a mano.
Tres guías revisadas por su utilidad práctica; no son una clasificación de popularidad.
Canales alfa y opacidad del color en CSS
Aprende cómo se diferencian alfa en HEX de ocho dígitos, la sintaxis funcional, transparent y opacity al componer colores en CSS.
10 min de lectura Leer guía →Estados accesibles de enlacesElegir colores de enlace que sigan siendo distinguibles
Elige y prueba colores de enlace frente al fondo y al texto próximo, conservando subrayado, estado visitado, hover y foco de teclado.
9 min de lectura Leer guía →Formularios accesiblesColores de estado de formulario que no dependen solo del color
Diseña estados de error, éxito, aviso, desactivado y foco comprensibles sin color, con el contraste pertinente y una respuesta clara para cada persona.
8 min de lectura Leer guía →Del valor a la decisión
Usa un color con menos conjeturas.
Abre cualquier color para comparar formatos, elegir un primer plano legible, explorar variantes claras y oscuras y copiar el resultado en CSS.
Copia el formato que necesitas
HEX, RGB, HSL, HWB y el formato perceptual OKLCH se muestran juntos para pasar entre herramientas de diseño y CSS sin convertir valores a mano.
Comprueba el contraste del texto
Compara texto blanco y negro sobre el color y consulta qué umbrales WCAG alcanza cada combinación.
Crea una paleta práctica
Parte de tintes, sombras, relaciones de tono y variantes de opacidad calculados, y copia después un bloque de propiedades personalizadas CSS listo para usar.