Kleurkiezer online

Gebruik deze online kleurkiezer om een kleur uit een geüploade afbeelding te selecteren, een kleur van het scherm te kiezen wanneer je browser dit ondersteunt, of handmatig een kleurwaarde in te voeren. Zet de gekozen kleur om, haal paletten uit afbeeldingen, genereer bijpassende kleuren, controleer tekstcontrast en kopieer CSS-variabelen zonder van pagina te wisselen.

1. Kleur uit afbeelding kiezen

Kies een lokale afbeelding, beweeg eroverheen om pixels vooraf te bekijken en klik om een kleur te kiezen. Na het klikken kun je met de pijltoetsen de geselecteerde pixel nauwkeuriger aanpassen.

Er is nog geen afbeelding geselecteerd. Kies hierboven een afbeelding om kleuren te kiezen.
Voorbeeld van geselecteerde afbeelding
Kleurenpalet uit afbeelding
Klik op een kleur om deze toe te passen
Upload een afbeelding om de belangrijkste kleuren eruit te halen.
Meer manieren om een kleur te kiezen
2. Kleur van scherm kiezen

Gebruik de schermkleurkiezer van de browser wanneer deze wordt ondersteund. Het kan even duren voordat de browser de ingebouwde kleurkiezer opent.

3. Kleur handmatig invoeren

Voer HEX of HEXA in, bijvoorbeeld #2563EB of #2563EBFF.

Palet
Klik op een kleur om deze toe te passen
Bijpassende kleuren
Tint- en schaduwtinten
Huidige kleur
#2563EB

Resultaat

Gebruiken in UI
Tekstcontrast en CSS
Tekstcontrast en UI-combinatie
CSS-variabelen

                        
Privacyverklaring van StarryTool: Bij StarryTool hechten we veel waarde aan je privacy. Alle gegevensverwerking op deze pagina wordt via client-side JavaScript op je apparaat uitgevoerd, wat de gegevensbeveiliging waarborgt. We registreren of bewaren geen ingediende of gegenereerde gegevens. Lees voor meer informatie over de privacypraktijken op onze website ons Privacybeleid.

Over de online kleurkiezer

Gebruik deze online kleurkiezer om een kleur uit een geüploade afbeelding te selecteren, een kleur van het scherm te kiezen wanneer je browser dit ondersteunt, of handmatig een kleurwaarde in te voeren. De geselecteerde kleur wordt direct omgezet naar veelgebruikte formaten zoals HEX, HEXA, RGB, RGBA, HSL, HSLA, HSV en CMYK, zodat je de waarde kunt kopiëren die je nodig hebt zonder van pagina te wisselen.

• Functies

Kleur uit afbeelding kiezen: kies een lokale afbeelding en beweeg over de afbeelding om omliggende pixels vooraf te bekijken. Klik op de afbeelding om de huidige kleur te selecteren. Kleurenpalet uit afbeelding halen: na het uploaden van een afbeelding haalt de tool een compact palet met hoofdkleuren uit de afbeelding. Deze kleuren kun je kopiëren of toepassen als huidige kleur. Pixelnauwkeurige aanpassing: nadat je een kleur uit een afbeelding hebt geselecteerd, kun je de pijltoetsen gebruiken om de positie van de gekozen pixel nauwkeuriger aan te passen. Kleur van scherm kiezen: gebruik de schermkleurkiezer van de browser om een kleur van het scherm te selecteren wanneer deze functie door je browser wordt ondersteund. Handmatige kleurinvoer: voer handmatig een kleur in met een kleurkiezer of met een HEX- / HEXA-waarde zoals #2563EB of #2563EBFF. Meerdere kleurformaten: zet de gekozen kleur om naar HEX, HEXA, RGB, RGBA, HSL, HSLA, HSV en CMYK. Bijpassende kleuren: genereer complementaire, analoge, triadische, zachte tinten en gedempte kleurvarianten op basis van de huidige kleur. Tinten en schaduwen: maak een praktische kleurreeks van licht naar donker voor achtergronden, randen, hover-states, badges en UI-componenten. Tekstcontrast en UI-combinatie: vergelijk witte en zwarte tekst met WCAG-contrast, toon een APCA-achtige perceptuele referentie en krijg een comfortabelere UI-combinatie voorgesteld wanneer een sterk verzadigde kleur een donkerdere of lichtere achtergrond nodig heeft. CSS-variabelen: kopieer kant-en-klare CSS-variabelen voor de huidige kleur, lichte en donkere varianten, een leesbare tekstkleur en een aanbevolen UI-combinatie voor achtergrond en tekst. Verwerking in de browser: het lezen van afbeeldingen, kiezen van kleuren, extraheren van paletten en omzetten van kleurformaten gebeurt direct in je browser, zonder dat je een aparte app hoeft te installeren.

• Opmerkingen

De schermkleurkiezer is afhankelijk van browserondersteuning. In browsers die schermkleur kiezen niet ondersteunen, kun je nog steeds kleuren uit afbeeldingen kiezen of handmatige invoer gebruiken. Wanneer je kleuren uit een afbeelding kiest, kan de afbeelding worden geschaald om op de pagina te passen, maar de gemeten kleur wordt teruggekoppeld naar de pixelpositie in de originele afbeelding. Tekstcontrast wordt berekend op basis van de geselecteerde effen kleur. Staat tekst op verlopen, foto's, transparante lagen of gestructureerde achtergronden, controleer het uiteindelijke ontwerp dan ook visueel. De APCA-achtige waarde wordt naast het WCAG-contrast als perceptuele referentie weergegeven. WCAG-contrast blijft op deze pagina de toegankelijkheidscontrole voor geslaagd of niet geslaagd. Voor kleuren die worden gebruikt in interfaces, documenten, afbeeldingen of drukwerk kan de uiteindelijke weergave verschillen door scherminstellingen, kleurprofielen, bestandsformaten en uitvoerapparaten. :wiki_link
#2563EB
rgb(37, 99, 235)
x: 0, y: 0
Gekopieerd