Färgschemagenerator

Stöd för generering av flera färgscheman, färgplockning från bilder, generering av CSS-gradienter och skuggeffekter samt bearbetning av enstaka färger eller i batch.

Felrapport

Körningsläge i webbläsaren: Dina data bearbetas i webbläsaren och laddas inte upp till servern.

Hastighet och stabilitet: Bearbetningshastigheten beror på din enhet och webbläsare. För stora batchjobb kan skrivbordsversionen vara stabilare.

Verktyget laddas, vänta...

Om onlineverktyget inte kan laddas eller köras, prova skrivbordsverktyget. https://tools.yikeaigc.com/

Verktygsanvändning

Återgå till gamla versionen

Enfärgat läge

Batchfärgväljare

1Välj basfärg

RGB: 2, 132, 199 HSL: 243°, 75%, 59%

2Välj färgschema

Antal färger:

Mättnad: 0%

Ljusstyrka: 0%

3Färgschema

4CSS-gradient

Gradienttyp:

Vinkel: 90°

5Skuggeffekt

Oskärperadie: 20px

Spridningsradie: 0px

Opacitet: 40%

Förhandsvisa effekt

6Extrahera färger från bild

Klicka för att ladda upp eller dra en bild hit

Stöder JPG, PNG, GIF, WebP

1Ladda upp flera bilder

Klicka för att ladda upp eller dra flera bilder hit

Stöder batchval, huvudfärger extraheras automatiskt från varje bild

Antal färger per bild:

Färgschema:

Kopierat till urklipp

'; zip.file('preview.html', htmlContent); const content = await zip.generateAsync({ type: 'blob' }); const link = document.createElement('a'); link.href = URL.createObjectURL(content); const timestamp = new Date().toISOString().replace(/[-:.]/g, '').slice(0, 15); link.download = `color-palettes-${timestamp}.zip`; link.click(); downloadBatchZip.disabled = false; batchStatus.textContent = 'ZIP文件已下载'; }); // ========== 导出功能 ========== document.getElementById('exportPaletteBtn').addEventListener('click', function() { if (currentPalette.length === 0) return; const data = { baseColor: baseColorPicker.value, scheme: currentScheme, colors: currentPalette.map(c => ({ hex: c.hex, rgb: `rgb(${c.rgb.r}, ${c.rgb.g}, ${c.rgb.b})`, hsl: `hsl(${Math.round(c.hsl.h)}, ${Math.round(c.hsl.s)}%, ${Math.round(c.hsl.l)}%)` })), gradient: gradientCode.textContent, shadow: shadowCode.textContent }; const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' }); const link = document.createElement('a'); link.href = URL.createObjectURL(blob); link.download = `color-palette-${baseColorPicker.value.replace('#', '')}.json`; link.click(); showCopyToast('配色方案已导出'); }); // ========== 初始化 ========== schemeDescription.textContent = schemeDescriptions['monochromatic']; updateColorDisplay(); updatePalette(); });

Instruktioner

Användningsinstruktioner för verktyget

Välj basfärg:Använd färgväljaren för att välja en basfärg, eller ange ett HEX-värde direkt (t.ex. #4f46e5). Du kan också klicka på knappen "Slumpmässig färg" för inspiration. Verktyget visar RGB- och HSL-värden i realtid.
Välj färgschema:
- Monokrom färgsättning:Samma nyans, med variationer genom ändrad mättnad och ljushet
- Analog färgsättning:Intilliggande färger på färghjulet, naturliga och mjuka
- Komplementär färgsättning:Två motsatta färger på färghjulet, med stark kontrast
- Delad komplementfärg:Basfärgen och färgerna på båda sidor om dess komplementfärg
- Triadisk färgsättning:Tre färger jämnt fördelade på färghjulet
- Kvadratisk färgsättning:Fyra färger jämnt fördelade
- Tetradisk färgsättning:Två par komplementfärger, med tydliga nivåer
Justera parametrar:
- Antal färger:Välj att generera 3, 5, 7 eller 9 färger
- Justering av mättnad:Dra reglaget för att öka eller minska den totala mättnaden
- Justering av ljushet:Dra reglaget för att öka eller minska den totala ljusheten
Generera CSS-gradient:Välj linjär eller radiell gradienttyp och justera vinkelparametern för att generera färdig CSS-kod för gradienter.
Generera skuggeffekt:Justera parametrarna för oskärperadie, spridningsradie och opacitet för att generera CSS-kod för skuggor baserad på den aktuella basfärgen.
Extrahera färger från bild:När du har laddat upp en bild extraherar verktyget automatiskt huvudfärgerna. Du kan klicka var som helst i bilden för att välja en exakt färg och använda den extraherade färgen som basfärg.
Batchläge för färgplockning:Växla till fliken "Batchfärgplockning", ladda upp flera bilder, ange antal färger som ska extraheras per bild och utökningsläge för färgschema, klicka för att starta batchextraheringen. När den är klar kan du ladda ner en ZIP-fil med alla resultat.
Kopiera och exportera:Klicka på valfritt färgkort för att kopiera färgvärdet. Klicka på knappen "Exportera färgschema" för att ladda ner en JSON-fil med fullständig färginformation.

Vanliga frågor

Svar: Monokrom färgsättning passar enkla och eleganta designer; analoga färger passar naturteman och gradientbakgrunder; komplementfärger passar framträdande designer som kräver stark kontrast; triadiska färger passar livliga barnprodukter och konstnärliga skapelser; kvadratiska och tetradiska färger passar komplexa gränssnitt och datavisualisering. Välj ett lämpligt schema utifrån designmålet.

Svar: Ladda upp en bild i området "Extrahera färger från bild", så analyserar verktyget automatiskt bilden och extraherar 8 huvudsakliga färgtoner. Du kan klicka på en extraherad färg för att välja den och sedan klicka på knappen "Använd vald färg som basfärg" för att skapa ett komplett färgschema baserat på den färgen.

Svar: Klicka på knappen "Kopiera" i området för gradientkod, klistra in koden i din CSS-fil och använd den på elementet som ska ha en gradientbakgrund. Två typer stöds: linjär gradient och radiell gradient. För linjär gradient kan vinkelriktningen anpassas.

Svar: ZIP-filen som laddas ner efter batchbearbetningen innehåller tre filer: palette-summary.json (JSON-sammanställning av alla färgpalettsdata), palettes.css (CSS-variabeldefinitioner som kan användas direkt), preview.html (visuell förhandsgranskningssida). Detta gör det enkelt att använda de extraherade färgschemana i olika sammanhang.

Svar: Mättnad styr hur intensiv färgen är. Ökad mättnad gör färgen mer livfull, medan minskad mättnad gör färgen mjukare och mer gråtonad; ljushet styr hur ljus eller mörk färgen är. Ökad ljushet gör färgen ljusare, medan minskad ljushet gör färgen mörkare. Genom att justera dessa två parametrar kan du finjustera den övergripande färgeffekten.

Svar: Vanliga bildformat som JPG, JPEG, PNG, GIF och WebP stöds. Vi rekommenderar att du använder bilder med rika färger och hög kontrast för att få mer exakta resultat vid extrahering av huvudfärger. Bildbehandlingen sker helt lokalt och laddas inte upp till servern.

Svar: Klicka direkt på valfritt färgkort eller färgblock så kopieras motsvarande HEX-färgvärde automatiskt till urklipp, och längst ned på sidan visas meddelandet ”Kopierat till urklipp”. I massresultaten kan du på samma sätt klicka på en färgremsa för att kopiera motsvarande färgvärde.