Kleurenschema-generator

Ondersteunt het genereren van meerdere kleurenschema’s, kleuren uit afbeeldingen halen, CSS-verlopen en schaduweffecten genereren, met verwerking van één kleur of in batch.

Bug melden

Browseruitvoermodus: Je gegevens worden in je browser verwerkt en niet naar de server geüpload.

Snelheid en stabiliteit: De verwerkingssnelheid hangt af van je apparaat en browser. Voor grote batchtaken kan de desktopversie stabieler zijn.

Tool wordt geladen, even geduld...

Als de online tool niet kan laden of uitvoeren, probeer dan de desktoptool. https://tools.yikeaigc.com/

Toolgebruik

Terug naar oude versie

Monochrome modus

Kleuren batchgewijs kiezen

1Basiskleur kiezen

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

2Kleurenschema kiezen

Aantal kleuren:

Verzadiging: 0%

Helderheid: 0%

3Kleurenschema

4CSS-verloop

Verlooptype:

Hoek: 90°

5Schaduweffect

Vervagingsradius: 20px

Spreidingsradius: 0px

Transparantie: 40%

Voorbeeld bekijken

6Kleuren uit afbeelding halen

Klik om te uploaden of sleep afbeelding hierheen

Ondersteunt JPG, PNG, GIF, WebP

1Meerdere afbeeldingen uploaden

Klik om te uploaden of sleep meerdere afbeeldingen hierheen

Batchselectie ondersteund; hoofdkleur wordt per afbeelding automatisch geëxtraheerd

Aantal kleuren per afbeelding:

Kleurenschema:

Gekopieerd naar klembord

'; 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(); });

Instructies

Gebruiksinstructies voor de software

Kies een basiskleur:Gebruik de kleurkiezer om een basiskleur te selecteren, of voer direct een HEX-kleurwaarde in (zoals #4f46e5). U kunt ook op de knop "Willekeurige kleur" klikken voor inspiratie. De tool toont RGB- en HSL-kleurwaarden in realtime.
Kies een kleurenschema:
- Monochroom kleurenschema:Dezelfde tint, met variaties door verzadiging en helderheid aan te passen
- Analoge kleuren:Aangrenzende kleuren op de kleurencirkel, natuurlijk en zacht
- Complementaire kleuren:Twee tegenover elkaar liggende kleuren op de kleurencirkel, met sterk contrast
- Gesplitst complementair:De basiskleur en de kleuren aan beide zijden van de complementaire kleur
- Triadisch kleurenschema:Drie kleuren die gelijkmatig over de kleurencirkel zijn verdeeld
- Vierkant kleurenschema:Vier gelijkmatig verdeelde kleuren
- Tetradisch kleurenschema:Twee paren complementaire kleuren, met duidelijke lagen
Parameters aanpassen:
- Aantal kleuren:Kies om 3, 5, 7 of 9 kleuren te genereren
- Verzadiging aanpassen:Sleep de schuifregelaar om de algemene verzadiging te verhogen of te verlagen
- Helderheid aanpassen:Sleep de schuifregelaar om de algemene helderheid te verhogen of te verlagen
CSS-verloopkleuren genereren:Kies een lineair of radiaal verlooptype en pas de hoekparameter aan om direct bruikbare CSS-code voor verloopkleuren te genereren.
Schaduweffect genereren:Pas de vervagingsradius, spreidingsradius en transparantieparameters aan om CSS-schaduwcode te genereren op basis van de huidige basiskleur.
Kleuren uit een afbeelding extraheren:Na het uploaden van een afbeelding extraheert de tool automatisch de hoofdkleuren. U kunt op een willekeurige plek in de afbeelding klikken om nauwkeurig een kleur te kiezen en de geëxtraheerde kleur als basiskleur toe te passen.
Batchkleurselectiemodus:Schakel over naar het tabblad "Batchkleurselectie", upload meerdere afbeeldingen, stel het aantal te extraheren kleuren per afbeelding en de uitbreidingsmodus voor het kleurenschema in, klik op starten met batchextractie en download na voltooiing een ZIP met alle resultaten.
Kopiëren en exporteren:Klik op een willekeurige kleurkaart om de kleurwaarde te kopiëren. Klik op de knop "Kleurenschema exporteren" om een JSON-bestand met volledige kleurinformatie te downloaden.

Veelgestelde vragen

Antwoord:Monochrome kleuren zijn geschikt voor eenvoudige, elegante ontwerpen; analoge kleuren zijn geschikt voor natuurlijke thema’s en verloopachtergronden; complementaire kleuren zijn geschikt voor opvallende ontwerpen die sterk contrast vereisen; triadische kleuren zijn geschikt voor levendige kinderproducten en artistieke creaties; vierkante en tetradische kleuren zijn geschikt voor complexe interfaces en datavisualisatie. Kies het juiste schema op basis van uw ontwerpdoel.

Antwoord: Upload een afbeelding in het gedeelte "Kleuren uit afbeelding extraheren". De tool analyseert de afbeelding automatisch en haalt 8 hoofdkleurtinten op. U kunt op een geëxtraheerde kleur klikken om deze te selecteren en vervolgens op de knop "Geselecteerde kleur als basiskleur gebruiken" klikken om op basis van die kleur een volledig kleurenschema te genereren.

Antwoord: Klik op de knop "Kopiëren" in het gedeelte met de kleurverloopcode, plak de code in uw CSS-bestand en pas deze toe op het element dat een verloopachtergrond nodig heeft. Zowel lineaire als radiale verlopen worden ondersteund; bij lineaire verlopen kunt u de hoekrichting aanpassen.

Antwoord: De ZIP die na batchverwerking wordt gedownload bevat drie bestanden: palette-summary.json (JSON-overzicht van alle kleurgegevens), palettes.css (direct bruikbare CSS-variabelendefinities), preview.html (visuele voorbeeldpagina). Dit maakt het gemakkelijk om de geëxtraheerde kleurenschema's in verschillende scenario's te gebruiken.

Antwoord: Verzadiging bepaalt hoe levendig een kleur is; het verhogen van de verzadiging maakt kleuren levendiger, terwijl verlagen ze zachter en grijzer maakt. Helderheid bepaalt hoe licht of donker een kleur is; het verhogen van de helderheid maakt kleuren lichter, terwijl verlagen ze donkerder maakt. Door deze twee parameters aan te passen, kunt u het algehele kleureffect fijn afstemmen.

Antwoord: Ondersteunt gangbare afbeeldingsformaten zoals JPG, JPEG, PNG, GIF en WebP. Het wordt aanbevolen afbeeldingen met rijke kleuren en hoog contrast te gebruiken voor nauwkeurigere resultaten bij het extraheren van de hoofdkleur. De beeldverwerking gebeurt volledig lokaal en wordt niet naar de server geüpload.

Antwoord: Klik rechtstreeks op een willekeurige kleurkaart of kleurvlak; de bijbehorende HEX-kleurwaarde wordt automatisch naar het klembord gekopieerd en onderaan de pagina verschijnt de melding "Gekopieerd naar klembord". In de batchresultaten kun je op dezelfde manier op een kleurenbalk klikken om de bijbehorende kleurwaarde te kopiëren.