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 starten 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.

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, aangezien de weg naar het hart van de lezer via een professioneel imago loopt. 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 zeer nuttig voor u zijn bij uw toekomstige 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 advertentie-eenheid maakt die past bij het kleurenpalet van de site;
— Als u een kleurenschema met stijlen voor de site maakt;
— 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).

Download de vereiste browserplug-in en na installatie staat het extensiepictogram altijd in uw browserpaneel. Vergeet niet de plug-in te activeren, klik gewoon op het pictogram.

Hoe de ColorZilla-extensie te gebruiken

Ik zal in eenvoudige woorden schrijven 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 afbeelding kunt u zien dat er aan de rechterkant een deel van de witte achtergrond is dat gekleurd kan worden zodat het 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!

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 hebben moderne browsers leren werken met het RGBA-kleurmodel - een uitbreiding van RGB met ondersteuning voor een alfakanaal, dat de dekking van een object bepaalt.

De RGBA-kleurwaarde wordt gespecificeerd als: rgba(rood, groen, blauw, 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, kleurenpaletten en 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 een bepaalde kleur waaruit de kleurencombinatie bestaat, of preciezer gezegd, de grootte van de schermpunt die op de fotozetmachine wordt weergegeven op film van die kleur (of direct op de drukplaat bij CTP).

Om bijvoorbeeld de 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 Adobe Photoshop wordt met name gebruik gemaakt van het HSB-kleurmodel.

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 de belangrijkste componenten in XYZ '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 voor vrijwel alle andere kleurmodellen die op technisch gebied worden gebruikt.

LABORATORIUM

Het LAB-kleurmodel (CIELAB, “CIE 1976 L*a*b*”) wordt berekend op basis van de CIE XYZ-ruimte. Het ontwerp van Lab is ontworpen om een ​​kleurruimte te creëren waarin kleurveranderingen lineairer zouden zijn in termen van menselijke perceptie (vergeleken met XYZ), dat wil zeggen, zodat dezelfde kleurverandering waarden in verschillende delen van de kleur coördineert. de ruimte zou hetzelfde gevoel van kleurverandering veroorzaken.

Soort software: Kleurdetectie
Ontwikkelaar/uitgever: Vlad Polyanskiy
Versie: 1.0
iPhone + iPad: 33 roebel [Downloaden uit de App Store]

Er zijn zoveel belangrijke en interessante dingen in het leven! Kleurnamen horen daar niet bij. Onthoud de verschillen van sommigen ecru van kameel alleen nodig voor sommige mensen met zeer specifieke beroepen. Voor alle anderen is het genoeg om bij de hand te hebben Colorimeter. Dit is een iPhone-applicatie die de kleur van een foto bepaalt, waardoor je maximale informatie over elke tint krijgt.

Weet je nog dat je op zoek was naar behang van een bepaalde kleur? Of een kledingstuk voor een specifieke dresscode? Of heeft u misschien een interieurdetail nodig dat precies bij de kleuren van het meubilair past of accenten toevoegt? Een nieuwe huishoudelijke toepassing zal al deze en andere kleine huishoudelijke problemen helpen oplossen. Colorimeter voor iPhone.

Elke tiende man wordt geconfronteerd met kleurenblindheid: het onvermogen om kleuren te onderscheiden. Bijna alle anderen hebben moeite met het onderscheiden van rode variëteiten. EN niemand niemand van ons weet echt welke kleur behang op de muren van ons eigen huis zit. De lijst met tinten eindigt niet met de typische krijtkleuren uit de kindertijd. Kleuren tafel omber of behang Grullo-pak- geen glibberige vertaling uit een andere taal, maar de echte namen van de echte kleuren van de objecten om je heen.

Colorimeter Het werkt eenvoudig. Start het programma, maak een foto en beweeg uw vinger eroverheen. Het virtuele vergrootglas analyseert de kleur op het contactpunt en geeft de culturele naam weer.

Nadat je met je iPhone door het huis hebt gerend en veel nieuwe woorden hebt geleerd, begin je de voordelen van het praktische gebruik van de applicatie te beseffen. Je kunt het geluid nabootsen. Het is ook niet moeilijk om de vorm van objecten in woorden te beschrijven. Maar het is bijna onmogelijk uit te leggen hoe de grijstint die je leuk vindt, verschilt van de tint die je gesprekspartner zich voorstelt. En dit is waar het van pas komt kleur basis Colorimeter.

U moet bijvoorbeeld behang van een bepaalde kleur kopen. Of nog erger: iemand een andere je moet behang kopen en je zit vol verwachting dat er 's avonds een tiental rollen behang bij je thuis worden afgeleverd in een heel andere tint dan je had gedroomd. Door het artikel te fotograferen en de tint te kiezen die er het dichtst bij zit, weet u zeker dat uw partner of reparatiemedewerker precies weet welke kleur het is. Wat hoeft te kopen.

Soms kan zelfs de kleinste kleurafwijking kritisch worden. Bijvoorbeeld bij het kiezen van verf. Een titel of afbeelding is niet langer voldoende. We hebben normen en cijfers nodig. Het is goed dat Colorimeter dit allemaal ook heeft. Als u op een kleurnaam klikt, wordt deze geopend gedetailleerde beschrijving. Hier zijn de kleurparameters in de meest populaire kleurmodellen - RGB(digitaal beeld) en CMYK, voor afdrukken.

Als we het niet hebben over vloeibare verven en kleuren, maar over virtuele, zullen ontwerpers twee extra parameters waarderen: H.S.B.(tint, verzadiging en helderheid) en HEX-kleurcode voor websites. Daarnaast toont de applicatie de drie meest geschikte kleuren in het bekende systeem Pantone Als u weet welke, zal het voor u veel gemakkelijker zijn om een ​​dialoog te voeren met een fabrikant of verkoper van meubels en decoratie.

Aan de ontwikkelaars Colorimeter Er zijn verschillende voorstellen voor verdere ontwikkeling. Kleurreferentie-informatie moet naar het klembord worden gekopieerd of op zijn minst als tekst worden gemarkeerd. Dit zal u helpen snel informatie met mensen te delen via iMessage of e-mail, in plaats van hen een dikke schermafbeelding te sturen. En in de interface van de ingebouwde camera zou een schakelaar voor de flitser geen kwaad kunnen, want deze flitst nu automatisch, wat niet altijd goed is.

Heel vaak heb je dit nodig als je met websites en afbeeldingen werkt bepaal de kleur elk punt op uw beeldscherm.

U wilt bijvoorbeeld de achtergrondkleur op uw website exact hetzelfde maken als de kleur van de blauwe lucht op de foto. Of maak het koplettertype in dezelfde kleur als zeegroen. Of andersom: gebruik de kleur van het lettertype als achtergrond om een ​​banner te maken. Kortom, er zijn veel opties. Zorgvuldige kleurkeuze betekent veel, zowel bij webdesign als bij het werk van een webmaster.

Het bepalen van een kleur betekent het vinden van de code ervan. Vervolgens kan de code, afhankelijk van uw doeleinden, zowel in verschillende grafische editors als direct in de html-code worden gebruikt.

Meestal wordt het gebruikt, waarbij de code kan worden weergegeven in decimale en hexadecimale systemen.

Het is erg handig om een ​​pipet te gebruiken om de kleur te bepalen. Maar naast dit programma zijn er nog andere waarmee u dit kunt doen.

Adobe Photoshop-pipet

Ik denk dat maar weinig gebruikers van dit programma weten dat je het kunt gebruiken bepaal de kleur niet alleen elk punt in de afbeelding die in de editor wordt geopend, maar ook elk punt op uw beeldscherm.

Dit gebeurt heel eenvoudig. Open, maak er een afbeelding in en verplaats, zonder de linkermuisknop los te laten, de pipetcursor naar de plaats waar het geselecteerde punt zich bevindt. Dit kan elk punt buiten het programmavenster zijn. Terwijl u de cursor verplaatst, ziet u hoe de tekeningkleur verandert in het kleurenpalet. Nadat u het gewenste punt heeft geselecteerd, laat u de muisknop los. Klik op het kleurvak van de tekening in het kleurenpalet en bekijk de code voor uw kleur.

Deze methode om kleur te bepalen is handig omdat er geen extra programma's voor nodig zijn, behalve Photoshop, dat de meeste gebruikers al hebben geïnstalleerd.