Verktyg för färgkombinationer

Professionell generator för färgkombinationer som stöder flera färgsättningslägen som monokromt, komplementfärger och triader, kan generera färgscheman i batch och exportera dem.

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

Ställ in först, bearbeta sedan

Välj huvudfärg och färgregler först, generera sedan ett exporterbart schema

Starta snabbt med exempelfärger eller ange HEX för exakt färg. Varje steg har en Nästa-knapp. Generera, spara och ladda ned när allt är klart.

HEX / RGB / HSL / CMYK Monokrom / Komplement / Triad CSS / SCSS / JSON / PNG Inställningar kan sparas

Aktuell huvudfärg Klicka på färgvärdet för att kopiera

HEX

RGB

HSL

Huvudfärg

Ställ in huvudfärg först. Använd färgväljaren, HEX-fältet eller HSL-reglagen. Schemat uppdateras i realtid.

BasfärgStöder 6-siffrig HEX

HEX-färgvärde Exempel: #0F6FAE

CMYK

HSL-finjusteringFör finjustering av nyans, mättnad och ljusstyrka

Nyans205°

Mättnad78%

Ljusstyrka37%

Namnge schema

ExempelfärgKlicka för att justera vidare

Färgregler

Välj en färgmodell och ange sedan antal färger och ljus-/mörkerförskjutning. Behåll gärna standardvärdena första gången och finjustera sedan efter designbehov.

FärgmodellAnaloga färger passar en enhetlig, mjuk stil

GenereringsparametrarStäll in parametrar först, gå sedan till förhandsvisning

Antal färger

Närliggande vinkel24°

Mättnadsförskjutning0%

Ljusstyrkeförskjutning0%

Neutralisering8%

Sortering

Gradienttyp

Gradientvinkel90°

Förhandsgranska och finjustera

Kontrollera varje färgkod, textens läsbarhet och UI-förhandsvisning. Klicka på ett färgvärde för att kopiera.

Färgschema5 färger

FörhandsvisningFör snabb bedömning av hierarki

GradientkodKan kopieras direkt till CSS

Spara export

Exportera aktuellt schema eller skapa flera i batch. Batchresultat visar bara de första 20; nedladdningen innehåller alla.

BatchalternativStäll in antal efter behov

Antal scheman

Variationsgrad

ExportinnehållFör filer och kod

HEX RGB HSL CMYK

JSON CSS SCSS PNG

NedladdningZIP packar alla batchresultat

BatchresultatIngen batch skapad än

Ange först huvudfärg och färgregler, klicka sedan på ”Skapa i batch”.

Sparade scheman0 st

Sparade scheman visas här och kan tillämpas igen eller tas bort.

Instruktioner

Användningsinstruktioner för programvaran

Ställ in huvudfärg:Använd färgväljaren, HEX-inmatningsfältet eller HSL-reglagen i ”Inställning av huvudfärg” för att ange grundfärgen. Du kan även klicka på en exempelfärg för att snabbt läsa in den.
Välj färgsättningsregel:
- Monokrom:Genererar ljusa och mörka nivåer baserat på samma nyans, lämpligt för en enhetlig designstil.
- Analoga färger:Väljer intilliggande nyanser, lämpligt för mjuka visuella effekter med djup.
- Komplementfärger:Använder färger på motsatt sida av färgcirkeln, lämpligt för att framhäva knappar, rubriker och viktigt innehåll.
- Delad komplement:Lägger till en mjukare färg i kontrastförhållandet, lämpligt för kampanjbilder och aktivitetsvisualiseringar.
- Triad, tetrad, kvadratisk färgsättning:Lämpligt för diagram, kategorietiketter och gränssnitt med flera moduler.
- Neutrala färger:Lämpligt för affärssidor, verktygsgränssnitt och dokumentbaserad design.
Justera genereringsparametrar:Ställ in antal färger, närliggande vinkel, mättnadsförskjutning, ljushetsförskjutning, neutraliseringsgrad, sorteringsmetod och gradientvinkel.
Förhandsgranska färgschemat:Gå till ”Förhandsgranskning och finjustering” för att visa HEX-, RGB-, HSL- och kontrastinformation för varje färg. Klicka på färgvärdesknappen för att kopiera.
Spara schema och inställningar:Klicka på ”Spara aktuellt schema” för att spara färgschemat som favorit, och klicka på ”Spara inställningar” för att spara aktuella parametrar för senare användning.
Massgenerering:Gå till ”Spara och exportera” för att ange antal scheman och variationsnivå, och klicka på ”Massgenerera” för att skapa flera färgscheman. Gränssnittet visar de första 20 schemana, men nedladdningen innehåller alla resultat.
Exportera filer:Du kan ladda ned JSON-, CSS-, SCSS- och PNG-filer separat, eller välja exportinnehåll och ladda ned ett ZIP-arkiv.

Vanliga frågor

Svar:Monokrom passar för varumärkesutveckling och enkla gränssnitt; analoga färger passar för mjuka och enhetliga sidor; komplementfärger passar för att framhäva viktig information; triad passar för diagram och layouter med flera moduler; neutrala färger passar för affärsverktyg och dokumentscenarier.

Svar: Ange en färgkod i HEX-inmatningsfältet, till exempel #0F6FAE, så uppdaterar verktyget färgväljaren, HSL-reglagen och färgförhandsgranskningen automatiskt. Du kan även finjustera med reglagen för nyans, mättnad och ljushet.

Svar: CSS-filen genererar färgkoder i form av variabler som kan användas för webbsideformat; SCSS-filen passar Sass-projekt. Båda formaten gör det enkelt att återanvända färger i designsystem, temaväxling och komponentstilar.

Svar: Batchgenerering utgår från aktuell huvudfärg, färgregler och variationsgrad och gör rimliga justeringar av nyans, mättnad och ljusstyrka, vilket ger flera färgscheman som är stilmässigt relaterade men inte identiska.

Svar: Sparade scheman lagras i den aktuella enhetens lokala lagring. Om du rensar webbplatsdata eller byter enhet kan tidigare sparade scheman sluta visas, så vi rekommenderar att du exporterar viktiga scheman som filer i tid.

Svar: Nej. Färgberäkningar, sparande av scheman och filgenerering sker på den aktuella enheten, och huvudfärger, scheman och exporterat innehåll laddas inte upp till servern.

Svar: I ”Förhandsgranska finjustering” kan du se kontrasten för vit text och mörk text för varje färg. Ju högre värde, desto tydligare blir texten att läsa. När färgen används som bakgrund för brödtext rekommenderas att välja textfärgen med högre kontrast.