Paleta de la página
Con los colores ordenados por cuántas veces se usan: fondos, textos, bordes y botones. Cada uno en HEX, RGB y HSL.
Color
Extrae la paleta de colores de cualquier web
Smart Design Inspector saca la paleta de colores de una web ordenada por uso, con cuentagotas para cualquier píxel y el contraste WCAG de cada pareja de texto y fondo.
Paleta, cuentagotas y contraste WCAG: gratis para siempre
Colores · tucliente.example
- #FFFFFFrgb 255 255 255Fondo214
- #0B0B0Brgb 11 11 11Texto188
- #2563EBrgb 37 99 235Botones46
- #E5E7EBrgb 229 231 235Bordes39
- #6B7280rgb 107 114 128Texto27
- #16A34Argb 22 163 74Acento8
- Aa#0B0B0B / #FFFFFF19,68:1AAA
- Aa#FFFFFF / #2563EB5,17:1AA
- Aa#6B7280 / #FFFFFF4,83:1AA
- Aa#16A34A / #FFFFFF3,30:1Solo texto grande
- Aa#9CA3AF / #FFFFFF2,54:1No llega
01
Qué obtienes
3 herramientasCuentagotas
Para tomar el color de cualquier punto, también de imágenes.
Contraste WCAG
De cada texto con su fondo, con el nivel que cumple (AA o AAA) y aviso en los que no llegan.
El cuentagotas más usado de Chrome no se actualiza desde mayo de 2024. Este va junto a las fuentes, el CSS y el SEO en la misma extensión.
02
Pruébalo en esta página
Sin instalarUna web de ejemplo y el panel de colores, sin instalar nada. Ves su paleta en HEX, RGB y HSL. Pasa el ratón por un texto, o elígelo en la lista, y ves su contraste con el fondo y el nivel WCAG que cumple.
Elige un elemento
Smart Design Inspector · Coloresh1.hero-title
- Texto
- —
- Fondo
- —
- RGB
- —
- HSL
- —
- Contraste
- —
- Tamaño
- —
- AA
- —
- AAA
- —
Paleta de la página
—
Web de ejemplo · los valores se leen de esta página
03
Por qué el contraste importa
WCAG 2.2 · AAUn texto gris claro sobre blanco puede verse bien en tu pantalla y no leerse en un móvil al sol. Las pautas WCAG piden un contraste mínimo de 4,5:1 para el texto normal (nivel AA). La extensión marca cada texto que no llega.
04
Llévate la paleta a tu proyecto
Pro · acceso anticipadoCon la Pro exportas los colores junto con la tipografía y los espaciados a Tailwind v4 @theme, variables CSS o DESIGN_SPECS.md. Extraer el sistema de diseño
| Gratis0 €para siempre | Pro49 €pago único | |
|---|---|---|
| Paleta de la página ordenada por uso, en HEX, RGB y HSL | ||
| Cuentagotas para cualquier punto, también de imágenes | ||
| Contraste WCAG de cada pareja de texto y fondo | ||
| Exportar la paleta como variables CSS o tokens de Tailwind (con la tipografía y los espaciados) | — | Acceso anticipado gratis |
¿Es gratis?
Sí. La paleta, el cuentagotas y el contraste WCAG son gratis para siempre.
¿Saca los colores de las imágenes?
La paleta usa los colores del CSS de la página. Para tomar el color de una imagen está el cuentagotas.
¿En qué formatos copia los colores?
HEX, RGB y HSL. Con la Pro, además, como variables CSS o tokens de Tailwind.
¿Qué nivel de contraste necesito?
Para el texto normal, 4,5:1 (AA). Para el texto grande, 3:1. Para AAA, 7:1 y 4,5:1.
¿En qué navegadores y sistemas funciona?
En Chrome, Edge, Brave, Arc, Opera y Vivaldi, en Windows, Mac y Linux, desde la 1.0. Funciona igual en todos porque la extensión la ejecuta el navegador, no el sistema. El código está preparado para llevarla a Firefox y Safari sin reescribirla. Mientras está en desarrollo, puede haber cambios.
07
Sigue con
Funciones cercanasFuentes
Familia, pesos, origen, licencia y escala tipográfica de toda la página.
Fuentes de una web →Sistema de diseño
Colores, espaciados y tipografía a Tailwind v4 @theme, variables CSS o DESIGN_SPECS.md.
Extraer el sistema de diseño →Comparar webs
Guarda la ficha de cada competidor y compáralas en una tabla exportable.
Comparar webs →Lista de espera
Sé de los primeros en probarlo
Smart Design Inspector está en desarrollo. Déjanos tu email y te avisamos el día que salga en la Chrome Web Store, con las 3 funciones Pro gratis en acceso anticipado.
Un email el día del lanzamiento y pocos más · Baja con un clic