Llocs web i aplicacions
Tria els colors de marca, de fons i d'accent, i després enganxa'ls directament a les variables CSS, a Tailwind o a un tema d'Android.
Generador de paletes de colors — Crea paletes de colors combinades i exporta-les com a codi.
Tria un color base i un esquema, i obtén una paleta equilibrada de 3 a 8 colors. Bloqueja els que t'agraden, comprova la llegibilitat del text blanc i negre en cadascun, i després copia els codis com a variables CSS, Tailwind, colors.xml d'Android o Jetpack Compose. Tot s'executa al teu navegador i les paletes desades es queden al teu dispositiu.
Crea una paleta
S'executa al teu navegador
La teva paleta
Bloqueja els colors que t'agraden, després prem Genera per canviar la resta. Fes clic en un codi hexadecimal per copiar-lo. Fes clic a la paleta i prem la tecla Espai per generar.
Exporta com a codi
Paletes desades
Encara no s'han desat paletes. Premeu Desar paleta per desar-ne una en aquest dispositiu.
La guia
Guia de la paleta de colors: esquemes, contrast i exportació a codi
Aprèn com funcionen els esquemes de color, comprova el contrast del text i incorpora la teva paleta en un projecte real.
Què és un generador de paletes de colors?
Una paleta de colors és un conjunt reduït de colors que funcionen bé junts. Els dissenyadors les construeixen a partir del cercle cromàtic: seleccionen un color de partida i després trien altres tons a angles fixos respecte a aquest perquè el resultat resulti equilibrat en lloc d'aleatori.
Aquest generador ho fa per tu. Tria un color base i un esquema, fixa els colors que t'agraden i exporta el resultat com a codi CSS, Tailwind, XML d'Android o Jetpack Compose. Cada mostra també mostra els seus valors RGB i HSL i com de llegible seria el text blanc i negre sobre ella. Els valors hexadecimals són de base 16: el convertidor de binari a decimal mostra com es relacionen amb els nombres ordinaris.
Per què la gent genera paletes de colors
Diapositives, pòsters i documents
Obtén un conjunt de colors a joc per a una presentació, una publicació a les xarxes socials o un disseny imprès sense haver d'endevinar.
Gràfics i taulers de control
Crea colors diferents però harmònics per a les sèries de dades i comprova el contrast perquè les etiquetes es mantinguin llegibles.
Explicació dels esquemes de colors
| Esquema | Com està construït | Sentir i utilitzar |
|---|---|---|
| Anàleg | Tons veïns, separats per 30° | Calm i natural. Bo per a fons i interfícies d'usuari suaus. |
| Monocromàtic | Un sol color, diferents tonalitats | Net i cohesionat. Segur per a dissenys minimalistes. |
| Complementari | Dos tons oposats, separats 180° | Alt contrast. Bo per a un color d'accent intens. |
| Complementari dividit | Un to més els dos veïns del seu oposat | Contrast amb menys tensió que complementari. |
| Triàdic | Tres tons, separats 120° | Dinàmic i equilibrat. Necessita un color dominant. |
| Tetràdic (quadrat) | Quatre tons, separats per 90° | Rica i variada. Funciona millor amb un color principal. |
Com utilitzar el generador de paletes de colors
- Tria un color de base amb la caixa de colors o escriu un codi hexadecimal. Tria un esquema i quants colors vols.
- Premeu Generar per provar una nova base aleatòria. Premeu Bloquejar sota qualsevol color que vulgueu conservar.
- Comproveu les notes de contrast de cada mostra. Assegureu-vos d'un contrast de 4,5:1 o superior sempre que el text estigui sobre un color.
- Feu clic en un codi hexadecimal per copiar-lo, o obriu Exporta com a codi i trieu CSS, Tailwind, Android o Compose.
- Premeu Desa per desar la paleta en aquest dispositiu, Copia l'enllaç per compartir-lo o Descarrega el PNG per obtenir una imatge.
Contrast de colors i accessibilitat
Relació de contrast
Una proporció d'1:1 (idèntic) a 21:1 (negre sobre blanc) que compara la brillantor de dos colors.
WCAG AA
Almenys 4,5:1 per al text normal i 3:1 per al text gran (aproximadament 24 px, o 19 px en negreta). Aquest és l'objectiu legal i pràctic habitual.
WCAG AAA
Almenys 7:1 per al text normal. Un nivell més estricte que és útil per a les persones amb baixa visió.
No et refiïs només del color
Un de cada dotze homes té algun tipus de deficiència en la visió del color. Assegura que el color s'acompanyi d'etiquetes, icones o patrons perquè el significat no es perdi.
Com són els formats d'exportació
CSS: --color-1: #1f3a5f;
SCSS: $color-1: #1f3a5f;
Tailwind: 'palette-1': '#1f3a5f',
Android: #1F3A5F
Compose: val Palette1 = Color(0xFF1F3A5F)
JSON: ["#1f3a5f", "#ff5733"]
A Android Studio, enganxa l'XML a res/values/colors.xml, o afegeix les línies de Compose al teu Color.kt arxiu. El valor de Compose inclou el prefix alfa de transparència completa FF.
Consells per a paletes que funcionen
- Utilitza un color dominant, un o dos colors de suport i un color neutre. Quantitats iguals de cada color solen semblar massa atapeïdes.
- Comprova el contrast del text amb cada color de fons abans de comprometre't amb una paleta.
- Bloqueja el color de la teva marca i genera'n al seu voltant per explorar opcions.
- Mira la paleta en una pantalla real a les mides en què apareixerà, no només com a mostres de color.
- Prova també en mode fosc: un color que funciona sobre fons blanc pot no funcionar sobre fons gairebé negre.
Limitacions i privacitat
Privacitat
Les paletes es generen al vostre navegador. Les paletes desades es guarden a l'emmagatzematge local del vostre navegador al dispositiu i mai no s'envien.
Limitacions
Els colors es mostren en l'espai de color sRGB i l'aparença varia segons la pantalla. Les paletes són suggeriments basats en la teoria del color, no un substitut de les proves amb usuaris reals. L'eina no comprova la compatibilitat amb daltònics més enllà del contrast.
Preguntes freqüents
Preguntes freqüents del Generador de paletes de colors
Com funciona el generador de paletes de colors?
Tria un color base i un esquema de colors, i l'eina transformarà el color base en un conjunt de colors coordinats mitjançant la roda de colors. Preme Genera per a un nou color base aleatori, o bloqueja els colors que t'agraden i genera la resta.
Quina és la diferència entre els esquemes de colors?
L'anàleg utilitza tons veïns per a un aspecte tranquil. El complementari combina tons oposats per a contrast. El complementari dividit i el triàdic fan servir tres tons distribuïts de manera uniforme; el tetràdic n'utilitza quatre; i el monocromàtic manté un sol to i varia la lluminositat.
Com puc mantenir un color mentre canvio els altres?
Bloqueja la mostra sota qualsevol mostra de color. Els colors bloquejats es mantenen quan fas clic a Generar, canvies la base o modifiques l'esquema. Editar una mostra amb el botó Edita també la bloqueja.
Què signifiquen els números de contrast?
Cada mostra de color mostra la relació de contrast del text blanc i del text negre sobre aquell color. Les WCAG exigeixen un mínim de 4,5:1 per al text normal (AA), 7:1 per al nivell AAA més estricte i 3:1 per al text de gran mida.
Quins formats d'exportació estan disponibles?
Llista HEX, variables CSS, variables SCSS, un array JSON, una configuració de Tailwind, un fitxer colors.xml d'Android i valors de color de Jetpack Compose, perquè puguis enganxar la paleta directament en un projecte.
Puc compartir o desar la meva paleta?
Sí. Copiar enllaç crea una adreça web que reobre els mateixos colors, Descarregar PNG desa una imatge de la paleta i Desa la paleta guarda fins a 12 paletes en aquest navegador.
Per què els meus colors es veuen diferents en una altra pantalla?
Les pantalles difereixen en brillantor, precisió del color i perfil de color. Els codis hexadecimals descriuen el color numèricament, però l'aspecte que té depèn de la pantalla. Verifica els colors importants als dispositius que utilitzarà el teu públic.
Quantes colors hauria de tenir una paleta?
Molts dissenys funcionen bé amb cinc: un color principal, un o dos colors de suport, un to de fons clar i un to de text fosc. Aquesta eina et permet triar entre 3 i 8.
El generador és gratuït i es guarda la meva dada?
És gratuït. Les paletes es generen al vostre navegador. Les paletes desades romanen al vostre dispositiu en l'emmagatzematge local i mai no s'envien.
Puc enllaçar a una paleta?
Sí. Afegeix ?colors=1f3a5f-ff5733-00aa88 a l'adreça de la pàgina amb de 2 a 8 codis hexadecimals separats per guions, sense el signe #.
De persones que utilitzen aquesta eina
Ressenyes
Carregant ressenyes…
Continua
Més eines a la caixa
La pàgina d'inici ofereix dotzenes d'eines gratuïtes més que no requereixen cap clau d'API.
Convertidor de caixes
Converteix text a majúscules, camelCase, majúscula de títol, snake_case i més.
Obre l'einaComptador de paraules
Compta paraules, caràcters, frases i temps de lectura mentre escrius.
Obre l'einaEliminador d'espais en blanc
Elimina els espais innecessaris i neteja l'espaiat de línies desordenat.
Obre l'einaComprovador de diferències de text
Compara dos textos línia per línia per veure què ha canviat.
Obre l'eina