Extrahera exempelpaletten först, använd sedan exakt val och manuella redigeringar för att bestämma vilka färger som hör hemma i ditt eget projekt. Öppna Färgväljare för bild.
Ladda upp och extrahera en startpalett
Öppna Image Color Picker och ladda upp en bild som stöds, eller prova exemplet. Automatisk extrahering laddar upp källan till servern. Exemplet i denna guide är collage-botanical.jpg, ett 1200 x 900 foto av blommor, blad och en persikofärgad bakgrund.
Lämna Färger att extrahera på 6 och välj Dominant för exemplet. Dominant gynnar huvudbildens färger, medan Vibrant ger färgglada accenter mer inflytande. En förfrågan kan använda 3 till 12 färger; en bild med färre distinkta synliga grupper kan returnera färre.
Det faktiska Dominant-resultatet innehåller #E3B49F, #A5927F, #F3C2AC, #FBCEBA, #746E4F, #C297CA. Den största gruppen är #E3B49F vid cirka 28.88% av de samplade synliga pixlarna. Extraheringen använde ett 512 x 384 urval; dessa procentsatser är inte en exakt folkräkning av bilden i full upplösning.
En palettfärg kan vara ett genomsnitt av närliggande färger. Välj en specifik pixel när du behöver värdet av en liten detalj.
Välj och förfina enskilda färger
Klicka eller tryck på bilden för att inspektera en pixel med förstoringsglaset. Fokusera bilden och använd piltangenterna för att flytta en pixel, Skift plus en pil för att flytta tio, tryck sedan på Enter för att välja. Kopiera HEX, RGB eller HSL med dess individuella kopieringsknapp, eller använd Lägg till i palett.
Välj ett färgprov för att ändra dess HEX-värde eller färg, flytta det åt vänster eller höger, eller ta bort det. Lägg till en anpassad färg accepterar ett HEX-värde som du väljer. Lås färg bevarar ett valt färgprov när Uppdatera palett eller en ändrad extraheringsinställning genererar en annan startpalett.
Sampling & transparens erbjuder Källfärg och Komposit över en bakgrund. Källfärg inkluderar opacitet i kopierade koder när det är relevant; Komposit visar pixeln blandad över den valda Exempelbakgrunden. Palettfärgproverna i sig är opaka RGB-värden. Redigerade och valda färger har ingen uppskattad källprocent.
Webbläsaravkodningsbara bilder använder webbläsarens sRGB-prover. Om en normaliserad förhandsgranskning används, märker färgväljaren uttryckligen sina färger och koordinater som ungefärliga.
Exemplet i denna guide
Färger att extrahera: 6; Dominant; inga manuella ändringar eller lås; Spara som: PNG. Automatisk extrahering samplade 512 x 384 pixlar.
- Källbild
- 1200 x 900 px
- Extraherade färger
- 6 opaka färger
- Palettkort
- 600 x 500 px
- Nedladdad PNG
- 9,163 byte
Kontrollera ett text- och bakgrundspar
Öppna Kontrollera färgkontrast. Ställ in Text och Bakgrund med färgkontrollerna, ange HEX-koder eller använd den valda färgen för endera sidan. Det levande textprovet låter dig jämföra paret, och förhållandet åtföljs av separata Normal AA, Normal AAA, Stor AA och Stor AAA-resultat.
Välj ett par för det avsedda syftet istället för att anta att varje extraherad färg kan användas som text. En ljus persikofärg och en ljus lila färg kan fungera tillsammans i ett foto samtidigt som de utgör en dålig kombination för text och bakgrund.
Denna kontroll kontrollerar endast det färgparet för textkontrast. Det är inte en fullständig tillgänglighetsgranskning och avgör inte om typografi, tangentbordsinteraktion eller resten av designen är användbar.
Ett godkänt kontrastförhållande är en användbar kontroll, inte en garanti för att en hel sida är tillgänglig.
Kopiera värden eller exportera paletten
För en snabb överlämning, kopiera en enskild kod eller använd Kopiera palett HEX-färger. För en fil, välj Spara som och välj Start. PNG skapar en märkt palettbild; SVG behåller färgproverna och etiketterna som vektorinnehåll; CSS tillhandahåller numrerade färgvariabler; JSON innehåller HEX, RGB och HSL-värden.
Det oredigerade sexfärgsexemplet exporterar palette.png vid 600 x 500 pixlar och 9,163 byte. Dess ordning på färgprover matchar paletten. Din slutgiltiga palett kan innehålla 1 till 12 färger efter redigering, även när det automatiska startantalet var annorlunda.
Ladda ner innan du lämnar eller uppdaterar. Den slutgiltiga exporten laddar upp källan och de valda färgerna för serverbearbetning. Den skapar en ny palettfil och färgar inte om eller ersätter det ursprungliga fotot.
PNG och SVG är praktiska visuella referenser. CSS och JSON är användbara när nästa steg kräver återanvändbara färgvärden.
Vanliga frågor
Ger färgväljaren samma färger som automatisk extrahering?
Inte nödvändigtvis. Ett valt värde beskriver en specifik käll- eller förhandsgranskningspixel. Automatisk extrahering grupperar samplade pixlar och kan returnera genomsnittliga färger.
Räknas transparenta pixlar?
Helt transparenta pixlar exkluderas från extrahering. Delvis transparenta pixlar har reducerad vikt. Källsampling kan visa opacitet, men exporterade palettfärgprover är opaka.
Vad händer med låsta färger när jag uppdaterar?
Låsta färger förblir i paletten medan nya extraherade färger fyller de andra positionerna. En behållen eller redigerad färg tilldelas inte en påhittad bildprocent.
Kan jag använda detta för en exakt varumärkesfärg?
Ange ett känt HEX-värde direkt eller välj en lämplig källpixel. Fotobelysning, komprimering, färghantering och normaliserade förhandsgranskningar kan ändra samplade värden, så en automatisk fotopalett är inte ett bevis på en ursprunglig varumärkesspecifikation.
Bygg en palett som du kan ta med dig till din nästa design
Prova ett exempel eller använd din egen fil, och granska resultatet innan du delar.
