Extraheer eerst het voorbeeldpalet en gebruik vervolgens nauwkeurig kiezen en handmatige bewerkingen om te bepalen welke kleuren in je eigen project thuishoren. Open Afbeelding kleurkiezer.
Upload en extraheer een startpalet
Open Image Color Picker en upload één ondersteunde afbeelding, of probeer het voorbeeld. Automatische extractie uploadt de bron naar de server. Het voorbeeld in deze gids is collage-botanical.jpg, een 1200 x 900 foto van bloemen, bladeren en een perzik-kleurige achtergrond.
Laat Colors to extract op 6 staan en selecteer Dominant voor het voorbeeld. Dominant geeft de voorkeur aan de hoofdkleuren van de afbeelding, terwijl Vibrant kleurrijke accenten meer invloed geeft. Een verzoek kan 3 tot 12 kleuren gebruiken; een afbeelding met minder duidelijke zichtbare groepen kan er minder retourneren.
Het daadwerkelijke Dominant-resultaat bevat #E3B49F, #A5927F, #F3C2AC, #FBCEBA, #746E4F, #C297CA. De grootste groep is #E3B49F op ongeveer 28.88% van de gesamplede zichtbare pixels. De extractie gebruikte een 512 x 384 sample; die percentages zijn geen exacte telling van de afbeelding op volledige resolutie.
Een paletkleur kan een gemiddelde zijn van nabijgelegen kleuren. Kies een specifieke pixel wanneer je de waarde van één klein detail nodig hebt.
Kies en verfijn individuele kleuren
Klik of tik op de afbeelding om een pixel te inspecteren met het vergrootglas. Focus op de afbeelding en gebruik de pijltjestoetsen om één pixel te verplaatsen, Shift plus een pijl om er tien te verplaatsen, en druk vervolgens op Enter om te kiezen. Kopieer HEX, RGB of HSL met de individuele kopieerknop, of gebruik Add to palette.
Selecteer een staal om de HEX waarde of kleur te wijzigen, naar links of rechts te verplaatsen of te verwijderen. Een aangepaste kleur toevoegen accepteert een HEX waarde naar keuze. Kleur vergrendelen behoudt een geselecteerd staal wanneer 'Palet vernieuwen' of een gewijzigde extractie-instelling een ander startpalet genereert.
Sampling & transparantie biedt Bronkleur en Samenstelling over een achtergrond. Bronkleur bevat dekking in gekopieerde codes waar relevant; Samenstelling toont de pixel gemengd over de gekozen Voorbeeldachtergrond. Paletstalen zelf zijn ondoorzichtige RGB waarden. Bewerkte en gekozen kleuren hebben geen geschat bronpercentage.
Browser-decodeerbare afbeeldingen gebruiken browser sRGB samples. Als een genormaliseerd voorbeeld wordt gebruikt, labelt de kiezer zijn kleuren en coördinaten expliciet als bij benadering.
Het voorbeeld in deze handleiding
Kleuren om te extraheren: 6; Dominant; geen handmatige wijzigingen of vergrendelingen; Opslaan als: PNG. Automatische extractie samplede 512 x 384 pixels.
- Bronafbeelding
- 1200 x 900 px
- Geëxtraheerde kleuren
- 6 ondoorzichtige kleuren
- Paletkaart
- 600 x 500 px
- Gedownload PNG
- 9,163 bytes
Controleer een tekst- en achtergrondpaar
Open Kleurcontrast controleren. Stel Tekst en Achtergrond in met de kleurregelaars, voer HEX codes in of gebruik de gekozen kleur voor beide zijden. Het live tekstvoorbeeld laat je het paar vergelijken, en de verhouding gaat vergezeld van afzonderlijke Normaal AA, Normaal AAA, Groot AA en Groot AAA resultaten.
Kies een paar voor het beoogde doel in plaats van aan te nemen dat elke geëxtraheerde kleur als tekst kan worden gebruikt. Een licht perzik en een licht paars kunnen samenwerken in een foto, terwijl ze een slechte tekst-en-achtergrondcombinatie vormen.
Deze regelaar controleert alleen dat paar kleuren op tekstcontrast. Het is geen volledige toegankelijkheidsaudit en bepaalt niet of typografie, toetsenbordinteractie of de rest van het ontwerp bruikbaar is.
Een geslaagde contrastverhouding is een nuttige controle, geen garantie dat een hele pagina toegankelijk is.
Kopieer waarden of exporteer het palet
Voor een snelle overdracht kopieer je een individuele code of gebruik je Palet kopiëren HEX kleuren. Kies voor een bestand Opslaan als en selecteer Start. PNG maakt een gelabelde paletafbeelding; SVG behoudt de stalen en labels als vectorinhoud; CSS biedt genummerde kleurvariabelen; JSON bevat HEX, RGB en HSL waarden.
Het onbewerkte voorbeeld met zes kleuren exporteert palette.png op 600 x 500 pixels en 9,163 bytes. De volgorde van de stalen komt overeen met het palet. Je uiteindelijke palet kan na bewerking 1 tot 12 kleuren bevatten, zelfs als het automatische startaantal anders was.
Download voordat je vertrekt of ververst. De uiteindelijke export uploadt de bron- en gekozen kleuren voor serververwerking. Het maakt een nieuw paletbestand aan en kleurt de originele foto niet opnieuw in of vervangt deze niet.
PNG en SVG zijn handige visuele referenties. CSS en JSON zijn nuttig wanneer de volgende stap herbruikbare kleurwaarden vereist.
Veelgestelde vragen
Geeft de pipet dezelfde kleuren terug als automatische extractie?
Niet noodzakelijkerwijs. Een gekozen waarde beschrijft een specifieke bron- of voorbeeldpixel. Automatische extractie groepeert gesamplede pixels en kan gemiddelde kleuren teruggeven.
Worden transparante pixels meegeteld?
Volledig transparante pixels worden uitgesloten van extractie. Gedeeltelijk transparante pixels hebben een verminderd gewicht. Bron-sampling kan dekking tonen, maar geëxporteerde paletstalen zijn ondoorzichtig.
Wat gebeurt er met vergrendelde kleuren wanneer ik ververs?
Vergrendelde kleuren blijven in het palet terwijl nieuwe geëxtraheerde kleuren de andere posities vullen. Een behouden of bewerkte kleur krijgt geen verzonnen afbeeldingspercentage toegewezen.
Kan ik dit gebruiken voor een exacte merkkleur?
Voer direct een bekende HEX waarde in of kies een geschikte bronpixel. Fotoverlichting, compressie, kleurbeheer en genormaliseerde voorbeelden kunnen gesamplede waarden veranderen, dus een automatisch fotopalet is geen bewijs van een originele merkspecificatie.
Bouw een palet dat je kunt meenemen naar je volgende ontwerp
Probeer een voorbeeld of gebruik je eigen bestand en bekijk het resultaat voordat je het deelt.
