Deze vraag is waarschijnlijk meer dan eens opgekomen bij een webdesigner, ontwikkelaar of eenvoudige gebruiker computer. Vaak is het nodig om de kleur te selecteren die op een object wordt gebruikt, bijvoorbeeld een website of gewoon een punt op een beeldscherm.

Er zijn verschillende basismanieren om kleuren weer te geven, bijvoorbeeld wanneer elke kleur of tint wordt aangegeven HTML code en kleurenpalet RGB als #FF7700. Dit is de presentatie in de vorm van drie paren hexadecimale cijfers, waarbij elk paar een andere kleur vertegenwoordigt:
de eerste twee cijfers zijn rood, d.w.z. — R(rood)
twee in het midden - groen - G (groen)
laatste twee cijfers - blauw - B (blauw)
Heel vaak gebruiken ze een stiekeme weergave van de kleur in de vorm van drie tekens #F70, wat overeenkomt met #FF7700.

Trouwens, op webbronnen worden kleuren meestal gespecificeerd in CSS-stijlen.

Laten we verder gaan met het antwoord op belangrijkste vraag — Hoe kan ik de kleur van een pixel op een beeldscherm of foto achterhalen?

Er zijn veel manieren...

Methode 1. Ontdek de kleur in Photoshop

Laten we dus een “screenshot” maken door op een toets op het toetsenbord te drukken - Print scherm(PrtSc), op de plaats waar we onze kleurcode willen weten. Wanneer u op de toets drukt, slaat het systeem de momentopname op het klembord op. U kunt de afbeelding eenvoudig kopiëren, bijvoorbeeld vanuit een browser, zonder PrtSc. Nu hoeft u alleen nog maar de afbeelding uit de buffer in Photoshop te plakken.

Open Photoshop en voeg een afbeelding in (Bestand - Nieuw, Bewerken - Invoegen). We zoeken naar "Pipette" op de werkbalk (Toets I) en klikken vervolgens met de linkermuisknop in het gebied waarin we de kleur willen "verwijderen". Alles is klaar! Nu hoeft u alleen nog maar naar het palet te gaan en de kleurcode te achterhalen.

Methode 2. Ontdek de kleur in Paint

Ga naar Paint - voeg een afbeelding in - gebruik het gereedschap "palet" - ga naar "kleuren wijzigen":

In ons geval is rood 252, groen 168, blauw 10, d.w.z. RGB(252,168,10) of in HEX-formaat #FCA80A.

Methode 3: Bekijk de elementcode in de browser

Ik zal de methode hiervoor beschrijven Opera-browser. Selecteer met de muis een element op de site en klik erop klik met de rechtermuisknop muis - "Elementcode bekijken" (Ctrl + Shift + C). Er wordt een paneel met html geopend en css-code, zul je iets als "kleur" moeten vinden.

Methode 4. Speciale tools of programma's gebruiken.

Bestaat groot aantal speciale programma's voor kleurverwijdering hou ik van een heel eenvoudig programma genaamd "Pixie" met een gewicht van ongeveer 10-11 KB. De bediening is heel eenvoudig. U hoeft alleen maar uw muis aan te wijzen gewenste punt op het beeldscherm en druk als resultaat op de volgende toetsen: Ctrl + Alt + C kleurcode wordt naar het klembord gekopieerd.

HEX/HTML

HEX-kleur is niets anders dan een hexadecimale weergave van RGB.

Kleuren worden weergegeven als drie groepen hexadecimale cijfers, waarbij elke groep verantwoordelijk is voor zijn eigen kleur: #112233, waarbij 11 rood is, 22 groen en 33 blauw. Alle waarden moeten tussen 00 en FF liggen.

Veel toepassingen maken een verkorte vorm van hexadecimale kleurnotatie mogelijk. Als elk van de drie groepen dezelfde tekens bevat, bijvoorbeeld #112233, dan kunnen ze worden geschreven als #123.

1. h1 ( kleur: #ff0000; ) /* rood */
2. h2 ( kleur: #00ff00; ) /* groen */
3. h3 ( kleur: #0000ff; ) /* blauw */
4. h4 ( kleur: #00f; ) /* hetzelfde blauw, steno */

RGB

De RGB-kleurruimte (Rood, Groen, Blauw) bestaat uit alle mogelijke kleuren die kunnen worden gecreëerd door rood, groen en blauw te mengen. Dit model is populair in fotografie, televisie en computergraphics.

RGB-waarden worden gespecificeerd als een geheel getal van 0 tot 255. RGB(0,0,255) wordt bijvoorbeeld weergegeven als blauw omdat de blauwe parameter is ingesteld op de hoogste waarde (255) en de andere zijn ingesteld op 0.

Sommige applicaties (met name webbrowsers) ondersteunen percentageregistratie van RGB-waarden (van 0% tot 100%).

1. h1 ( kleur: rgb(255, 0, 0); ) /* rood */
2. h2 ( kleur: rgb(0, 255, 0); ) /* groen */
3. h3 ( kleur: rgb(0, 0, 255); ) /* blauw */
4. h4 ( kleur: rgb(0%, 0%, 100%); ) /* hetzelfde blauw, percentageinvoer */

RGB-kleurwaarden worden in alle grote browsers ondersteund.

RGBA

Onlangs moderne browsers geleerd te werken met het RGBA-kleurmodel - een uitbreiding van RGB met ondersteuning voor een alfakanaal, dat de dekking van een object bepaalt.

Betekenis RGBA-kleuren wordt gespecificeerd in de vorm: rgba(red, green, blue, alpha). De alpha-parameter is een getal variërend van 0,0 (volledig transparant) tot 1,0 (volledig ondoorzichtig).

1. h1 ( kleur: rgb(0, 0, 255); ) /* blauw in gewone RGB */
2. h2 ( kleur: rgba(0, 0, 255, 1); ) /* hetzelfde blauw in RGBA, omdat dekking: 100% */
3. h3 ( kleur: rgba(0, 0, 255, 0,5); ) /* dekking: 50% */
4. h4 ( kleur: rgba(0, 0, 255, .155); ) /* dekking: 15,5% */
5. h5 ( kleur: rgba(0, 0, 255, 0); ) /* volledig transparant */

RGBA wordt ondersteund in IE9+, Firefox 3+, Chrome, Safari en Opera 10+.

HSL

Het HSL-kleurenmodel is een weergave van het RGB-model in een cilindrisch coördinatensysteem. HSL vertegenwoordigt kleuren op een meer intuïtieve en voor mensen leesbare manier dan typisch RGB. Het model wordt vaak gebruikt in grafische toepassingen, in kleurenpaletten en voor beeldanalyse.

HSL staat voor Hue (kleur/tint), Saturation (verzadiging), Lightness/Luminance (lichtheid/lichtheid/helderheid, niet te verwarren met helderheid).

Tint specificeert de positie van de kleur op het kleurenwiel (van 0 tot 360). Verzadiging is de procentuele waarde van de verzadiging (van 0% tot 100%). Lichtheid is een percentage van de lichtheid (van 0% tot 100%).

1. h1 ( kleur: hsl(120, 100%, 50%); ) /* groen */
2. h2 ( kleur: hsl(120, 100%, 75%); ) /* lichtgroen */
3. h3 ( kleur: hsl(120, 100%, 25%); ) /* donkergroen */
4. h4 ( kleur: hsl(120, 60%, 70%); ) /* pastelgroen */

HSL wordt ondersteund in IE9+, Firefox, Chrome, Safari en Opera 10+.

HSLA

Net als RGB/RGBA heeft HSL een HSLA-modus die een alfakanaal ondersteunt om de dekking van een object aan te geven.

De HSLA-kleurwaarde wordt gespecificeerd als: hsla(tint, verzadiging, lichtheid, alfa). De alpha-parameter is een getal variërend van 0,0 (volledig transparant) tot 1,0 (volledig ondoorzichtig).

1. h1 ( kleur: hsl(120, 100%, 50%); ) /* groen in normale HSL */
2. h2 ( kleur: hsla(120, 100%, 50%, 1); ) /* hetzelfde groen in HSLA, omdat dekking: 100% */
3. h3 ( kleur: hsla(120, 100%, 50%, 0,5); ) /* dekking: 50% */
4. h4 ( kleur: hsla(120, 100%, 50%, .155); ) /* dekking: 15,5% */
5. h5 ( kleur: hsla(120, 100%, 50%, 0); ) /* volledig transparant */

CMYK

Het CMYK-kleurenmodel wordt vaak geassocieerd met afdrukken en afdrukken in kleur. CMYK is (in tegenstelling tot RGB) een subtractief model, wat betekent dat hogere waarden geassocieerd zijn met donkerdere kleuren.

Kleuren worden bepaald door de verhouding cyaan (cyaan), magenta (magenta), geel (geel), met toevoeging van zwart (key/black).

Elk van de cijfers die een kleur in CMYK definiëren, vertegenwoordigt het percentage inkt van die kleur waaruit de kleur bestaat kleurencombinatie, of beter gezegd, de grootte van de rasterpunt die op een fotozetmachine wordt weergegeven op een film van een bepaalde kleur (of rechtstreeks op een drukformulier in het geval van CTP).

Om bijvoorbeeld PANTONE 7526-kleur te verkrijgen, mengt u 9 delen cyaan, 83 delen magenta, 100 delen geel en 46 delen zwart. Dit kan als volgt worden aangegeven: (9,83,100,46). Soms worden de volgende aanduidingen gebruikt: C9M83Y100K46, of (9%, 83%, 100%, 46%), of (0,09/0,83/1,0/0,46).

HSB/HSV

HSB (ook bekend als HSV) is vergelijkbaar met HSL, maar het zijn twee verschillende kleurmodellen. Ze zijn beide gebaseerd op cilindrische geometrie, maar HSB/HSV is gebaseerd op het "hexcone" -model, terwijl HSL is gebaseerd op het "bi-hexcone" -model. Kunstenaars geven er vaak de voorkeur aan om dit model te gebruiken, algemeen wordt aangenomen dat het HSB/HSV-apparaat dichter bij de natuurlijke perceptie van kleuren staat. In het bijzonder kleur model HSB gebruikt in Adobe Photoshop.

HSB/HSV staat voor Tint (kleur/tint), Verzadiging (verzadiging), Helderheid/Waarde (helderheid/waarde).

Tint specificeert de positie van de kleur op het kleurenwiel (van 0 tot 360). Verzadiging is de procentuele waarde van de verzadiging (van 0% tot 100%). Helderheid is een percentage van de helderheid (van 0% tot 100%).

XYZ

Het XYZ-kleurenmodel (CIE 1931 XYZ) is een puur wiskundige ruimte. In tegenstelling tot RGB, CMYK en andere modellen zijn in XYZ de belangrijkste componenten ‘denkbeeldig’, wat betekent dat je X, Y en Z niet kunt associëren met welke set kleuren dan ook om te mengen. XYZ is het hoofdmodel van bijna alle anderen kleur modellen, gebruikt op technische gebieden.

LABORATORIUM

Het LAB-kleurmodel (CIELAB, “CIE 1976 L*a*b*”) wordt berekend op basis van de CIE XYZ-ruimte. Bij het ontwikkelen van Lab was het doel om te creëren kleur ruimte, waarbij de kleurverandering meer lineair zal zijn vanuit het oogpunt van menselijke perceptie (vergeleken met XYZ), dat wil zeggen, zodat dezelfde verandering in kleurwaarden coördineert in verschillende gebieden de kleurruimte produceerde hetzelfde gevoel van kleurverandering.

Op een dag leerde een man een computer kleur bepalen door middel van code. Het is eenvoudig: de code is gelijk aan de kleur en de kleur is gelijk aan de code. #FFFFFF = "wit", "zwart" = #000000. En nu geeft de computer een kleur weer op de monitor en moet je de kleurcode achterhalen om dezelfde kleur in een ander programma te gebruiken. Hoe de kleurcode achterhalen? Hiervoor heeft u een ‘pixelkleurdetector’ nodig, oftewel een ‘pipetprogramma’. Het ColorPic-programma bepaalt onmiddellijk de kleurcode op elk punt op het beeldscherm. Het hulpprogramma herkent de kleur en toont de code in hexadecimaal en decimaal formaat. Het ColorPic-hulpprogramma is nuttig en zal de ontwerper en ontwikkelaar goed van pas komen.

Bepaal de pixelkleur

De door het programma bepaalde kleuren kunnen worden opgeslagen in een apart palet van 16 kleuren om te onthouden. De gebruiker kan altijd terugkeren naar de samengestelde kaart van het gevonden kleurenpalet; ColorPic legt een fragment van het scherm rond de muisaanwijzer vast en geeft het vergrote beeld ervan in het venster weer, terwijl de schaalfactor van het vastgelegde beeld kan worden gewijzigd van 2 tot 36. Na het opstarten bepaalt het programma de kleur en de codeaanduiding van het pixel die zich ergens op het scherm onder de muiscursor bevindt. Om een ​​kleur aan het palet toe te voegen, implementeert ColorPic de toetsencombinatie Ctrl+G.

Bij het werken met afbeeldingen moet je vaak de kleur van een pixel nauwkeurig bepalen. Dit is nodig voor beeldcorrectie of bij ontwerpwerkzaamheden om het kleurenschema van de achtergrond, panelen of knoppen van uw internetpagina of website aan te passen.

Met deze service kunt u online de kleur van een stip achterhalen zonder te downloaden en te installeren aanvullende programma's. Werken in onze dienst online pipet kunt u snel en eenvoudig de kleur van elk deel van de afbeelding achterhalen.

Om dit te doen, moet u een foto naar de site uploaden. Om het bestand te downloaden, klikt u op de knop "Bladeren". Selecteer vereiste bestand met de afbeelding en klik op "Downloaden". Zodra de afbeelding laadt, zie je deze op het scherm. Vervolgens moet u de cursor over de pixel verplaatsen waarvan u de kleur wilt bepalen. In een apart venster kunt u de pixelkleur zien en in het veld Huidige waarde wordt het overeenkomstige pixelnummer weergegeven in de HTML- en RGB-kleur van de pixel.

De service biedt de mogelijkheid om de kleurcode op te slaan in HTML- en RGB-kleurformaat. Om dit te doen, moet u de cursor over de gewenste pixel bewegen en op de linkermuisknop klikken. In het veld ‘Opgeslagen waarden’ in een apart venster kunt u de pixelkleur zien, evenals de opgeslagen pixelcodewaarden in HTML- en RGB-kleurformaat.

Recensies

Ja, het lijkt goed, bedankt

Normaal

meesterwerk

gewicht

We hebben je veel geholpen

Als u een eigen website heeft, zult u, willens of wetens, de tools en vaardigheden van verschillende internetberoepen onder de knie moeten krijgen. De tools van de ontwerper zullen bijzonder zorgvuldig moeten worden bestudeerd, omdat de weg naar het hart van de lezer er doorheen loopt professioneel imago. Mooie en goedgekozen foto’s op je website vergroten de leeskans, dat is een feit! Dat deze foto’s uniek moeten zijn, is eveneens een onweerlegbaar feit. Om zelf foto's te leren maken, moeten we veel details leren, en een daarvan is het bepalen van de kleur van elk element op een internetpagina. Vandaag zullen we het hebben over hoe je de achtergrondkleur op een pagina kunt achterhalen.

Ik weet dat er veel andere methoden en hulpmiddelen zijn, maar ik deel mijn praktische ervaring met het maken van afbeeldingen. Als u geen professionele ontwerper bent, zal dit artikel erg nuttig voor u zijn. verder werk. Je kunt kleur op een pagina herkennen met behulp van een handige plug-in ColorZilla voor Mozilla Firefox en Google Chrome-browsers.

Wanneer hebben we dit hulpmiddel nodig?

— Als u een website ontwerpt;
- Als u een nieuwe aanmaakt reclame blok, corresponderend kleurenpalet locaties;
- Als je aan het maken bent kleurenschema stijlen voor de site;
— Als u bezig bent met het tekenen van elementen van een virtueel project;
— Als u een afbeelding maakt;
— In alle andere gevallen waarin u de kleur van een pixel moet bepalen zonder grootschalige en resource-intensieve programma's zoals PhotoShop of ColorDraw uit te voeren.

Hoe ColorZilla gebruiken?

Het is heel eenvoudig! Ga naar de website, klik op het linkerpictogram en selecteer het tabblad dat u het meest nodig heeft:

— Mozilla Firefox(browsertool);
— Google Chrome(browsertool);
— Gradiëntgenerator (online tool).

Downloaden vereiste plug-in voor de browser, en na installatie zal het extensiepictogram altijd in uw browserpaneel staan. Vergeet niet de plug-in te activeren, klik gewoon op het pictogram.

Hoe de ColorZilla-extensie te gebruiken

Ik zal schrijven in eenvoudige woorden over hoe ik met deze extensie werk. Bij het maken of bewerken van een afbeelding in de Canva-editor, waarover u meer kunt lezen als u deze link volgt, kan het nodig zijn om een ​​achtergrond toe te voegen die hetzelfde is als de originele afbeelding. Op de foto zie je dat met rechterkant er is een deel witte achtergrond, die gekleurd kan worden zodat deze overeenkomt met de achtergrondkleur van de afbeelding. Zonder een dergelijke uitbreiding is het zeer problematisch om dit te doen, misschien met behulp van een selectiemethode die geen 100% identiteit zal opleveren. Door op het pipet in de extensie te klikken en vervolgens met de linkermuisknop op een willekeurige pixel in de afbeelding te klikken, verschijnt bovenaan een geweldige tooltip die me de kleurcode in hexadecimaal en RGB geeft.

Om met de Canva-editor te werken, heb ik alleen het hexadecimale formaat nodig. Ik kopieer het en voer vervolgens in de Canva-editor de waarde van deze kleur in, en ik ben erg tevreden met het resultaat. Dus met slechts een paar bewegingen kan ik een identieke kleur selecteren, waardoor ik uniekheid aan de originele foto toevoeg door de grootte ervan te veranderen.

Ik stel voor dat u even gaat zitten en kennis maakt met alle tools in deze extensie die in het menu staan. U zult er zeker een paar vinden die u met bijzonder plezier zult gebruiken. En de rest zul je na verloop van tijd onder de knie krijgen. Jij weet beter dan ik dat je op een foto niet alleen de achtergrond kunt veranderen, maar ook dat er iets geschreven moet worden. Het kiezen van de juiste lettertypekleur is ook niet zo eenvoudig als het op het eerste gezicht lijkt. Misschien geeft u de voorkeur aan een palet of gradiëntgenerator in plaats van een pipet. Eén ding weet ik zeker: met ColorZilla kunnen alle problemen zeer snel worden opgelost.

Zoals altijd is het beter om één keer te zien dan honderd keer te lezen! Daarom raad ik u aan een video te bekijken waarin u leert hoe u de ColirZilla-extensie installeert en in uw werk gebruikt. Ik wens u veel kijkplezier en prachtige unieke foto's!