Paleta de la pàgina
Amb els colors ordenats per quantes vegades es fan servir: fons, textos, vores i botons. Cadascun en HEX, RGB i HSL.
Color
Extreu la paleta de colors de qualsevol web
Smart Design Inspector treu la paleta de colors d’una web ordenada per ús, amb comptagotes per a qualsevol píxel i el contrast WCAG de cada parella de text i fons.
Paleta, comptagotes i contrast WCAG: gratis per sempre
Colors · yourclient.example
- #FFFFFFrgb 255 255 255Fons214
- #0B0B0Brgb 11 11 11Text188
- #2563EBrgb 37 99 235Botons46
- #E5E7EBrgb 229 231 235Vores39
- #6B7280rgb 107 114 128Text27
- #16A34Argb 22 163 74Accent8
- Aa#0B0B0B / #FFFFFF19,68:1AAA
- Aa#FFFFFF / #2563EB5,17:1AA
- Aa#6B7280 / #FFFFFF4,83:1AA
- Aa#16A34A / #FFFFFF3,30:1Només text gran
- Aa#9CA3AF / #FFFFFF2,54:1No arriba
01
Què n’obtens
3 einesComptagotes
Per agafar el color de qualsevol punt, també d’imatges.
Contrast WCAG
De cada text amb el seu fons, amb el nivell que compleix (AA o AAA) i un avís en els que no hi arriben.
El comptagotes més utilitzat de Chrome no s’actualitza des del maig del 2024. Aquest va al costat de les fonts, el CSS i l’SEO en la mateixa extensió.
02
Prova-ho en aquesta pàgina
Sense instal·larUna web d’exemple i el panell de colors, sense instal·lar res. Veus la seva paleta en HEX, RGB i HSL. Passa el ratolí per un text, o tria’l a la llista, i veuràs el contrast amb el fons i el nivell WCAG que compleix.
Tria un element
Smart Design Inspector · Colorsh1.hero-title
- Text
- —
- Fons
- —
- RGB
- —
- HSL
- —
- Contrast
- —
- Mida
- —
- AA
- —
- AAA
- —
Paleta de la pàgina
—
Web d’exemple · els valors es llegeixen d’aquesta pàgina
03
Per què el contrast importa
WCAG 2.2 · AAUn text gris clar sobre blanc es pot veure bé a la teva pantalla i no llegir-se en un mòbil al sol. Les pautes WCAG demanen un contrast mínim de 4,5:1 per al text normal (nivell AA). L’extensió marca cada text que no hi arriba.
04
Endú-te la paleta al teu projecte
Pro · accés anticipatAmb la Pro exportes els colors juntament amb la tipografia i els espaiats a Tailwind v4 @theme, variables CSS o DESIGN_SPECS.md. Extreure el sistema de disseny
| Gratis0 €per sempre | Pro49 €pagament únic | |
|---|---|---|
| Paleta de la pàgina ordenada per ús, en HEX, RGB i HSL | ||
| Comptagotes per a qualsevol punt, també d’imatges | ||
| Contrast WCAG de cada parella de text i fons | ||
| Exportar la paleta com a variables CSS o tokens de Tailwind (amb la tipografia i els espaiats) | — | Accés anticipat gratuït |
És gratis?
Sí. La paleta, el comptagotes i el contrast WCAG són gratis per sempre.
Treu els colors de les imatges?
La paleta fa servir els colors del CSS de la pàgina. Per agafar el color d’una imatge hi ha el comptagotes.
En quins formats copia els colors?
HEX, RGB i HSL. Amb la Pro, a més, com a variables CSS o tokens de Tailwind.
Quin nivell de contrast necessito?
Per al text normal, 4,5:1 (AA). Per al text gran, 3:1. Per a AAA, 7:1 i 4,5:1.
En quins navegadors i sistemes funciona?
A Chrome, Edge, Brave, Arc, Opera i Vivaldi, a Windows, Mac i Linux, des de la 1.0. Funciona igual a tots perquè l’extensió l’executa el navegador, no el sistema. El codi està preparat per portar-la a Firefox i Safari sense reescriure-la. Mentre està en desenvolupament, hi pot haver canvis.
07
Continua amb
Funcions properesFonts
Família, pesos, origen, llicència i escala tipogràfica de tota la pàgina.
Fonts d’una web →Sistema de disseny
Colors, espaiats i tipografia a Tailwind v4 @theme, variables CSS o DESIGN_SPECS.md.
Extreure el sistema de disseny →Comparar webs
Desa la fitxa de cada competidor i compara-les en una taula exportable.
Comparar webs →Llista d’espera
Sigues dels primers a provar-lo
Smart Design Inspector està en desenvolupament. Deixa’ns el teu correu i t’avisarem el dia que surti a la Chrome Web Store, amb les 7 funcions Pro gratuïtes en accés anticipat.
Un correu el dia del llançament i pocs més · Baixa amb un clic