In die , het ons die basiese beginsels van kleurkorreksie ondersoek en die belangrikheid van die werk met kleure verduidelik wanneer die beelde bewerk word. en Die kleur van die proses, sowel as die van beelde en gebruik dit om unieke visuele style te skep. Die eerste deel van hierdie reeks RGB LAB extracting palettes Soos ons in die vorige artikel gesien het, het sommige kleure en palette anders weergegee as wat ons aanvanklik verwag het. Dit is te danke aan die feit dat ons die eenvoudigste gereedskap gebruik het - die RGB-model en Euclidese afstandberekening. Eerstens 'n bietjie van die teorie. The RGB Model Die twee gewildste kleur modelle - en - is fundamenteel anders in die manier waarop hulle kleure verteenwoordig en verwerk. RGB LAB die Die model gebruik die die en kanale om kleure te verteenwoordig. Elke kanaal kan waardes van 0 tot 255 hê, wat tot meer as 16 miljoen moontlike kleure lei. Hierdie model is ideaal vir die werk met beelde wat op skerm verskyn, aangesien rekenaarmonitore, TV's en slimfone almal hierdie model gebruik. RGB Red Green Blue RGB Key Features: die die die die Dit gebruik 'n additiewe proses waar kleure geskep word deur rooi, groen en blou lig te kombineer. Dit is makliker om te verstaan en te verwerk op die pixelvlak. Dit is beperk in sy vermoë om alle kleure akkuraat te verteenwoordig, aangesien dit nie die menslike persepsie van kleur bereken nie. The LAB Model die die model verteenwoordig kleur in drie kanale: die en Hierdie model is nader aan hoe mense kleur waarneem en reken vir beide die kleur en helderheid van 'n beeld. LAB L (lightness) A (a color spectrum from green to red) B (a color spectrum from blue to yellow) LAB Key Features: die die die die Die L-kanaal beheer die helderheid, wat ligte aanpassings toelaat sonder om die kleur te verander. Die A en B kanale beskryf kleur skakerings, wat meer presiese beheer oor 'n wye spektrum van kleure toelaat. Die LAB-model is veral nuttig in professionele kleurklasering, aangesien dit meer veelvuldig is en presiese kleuraanpassings moontlik maak sonder om ander beeldparameters te beïnvloed. In die LAB-model word helderheid van kleur geskei, wat dit moontlik maak om die visuele parameters van 'n beeld aan te pas sonder om die kleurbalans te beïnvloed. Color Calculation Algorithm and Using LAB Om kleure te bereken en toe te pas, gebruik ons aansoek die Die integrasie van hierdie biblioteek in die projek laat ons toe om presiese berekenings uit te voer wat help om die gewenste resultate te bereik by die verwerking van beelde. colorjs.io Hier is 'n voorbeeld van die kode wat in ons app gebruik word om met kleure in die LAB-model te werk: // Sample code for using colorjs.io in LAB model
const findClosestColor = (r, g, b) => {
  if (mode === "lab") {
    const color1 = new Color({ coords: [r / 255, g / 255, b / 255], space: "srgb" }).to("lab");
    let minDist = Infinity;
    let closest = [r, g, b];
    for (let i = 0; i < paletteLAB.length; i++) {
      const color2 = paletteLAB[i];
      const dist = color1.distance(color2);  // Calculating the distance between colors in LAB space
      if (dist < minDist) {
        minDist = dist;
        closest = palette[i];
      }
    }
    return closest;
  } else {
    // RGB calculations
    let minDist = Infinity;
    let closest = [r, g, b];
    for (let [pr, pg, pb] of palette) {
      const dist = Math.sqrt((r - pr) ** 2 + (g - pg) ** 2 + (b - pb) ** 2);
      if (dist < minDist) {
        minDist = dist;
        closest = [pr, pg, pb];
      }
    }
    return closest;
  }
};
 Hierdie blok kode hanteer die proses van die vind van die naaste kleur in 'n gegewe palet deur die kleur afstand tussen die doel kleur en die kleure in die palet te bereken. of Die RGB LAB How This Works in Practice: die die 
 LAB-modus: Die LAB-kleurruimte is ontwerp om in ooreenstemming te wees met menslike siening, wat helderheid (L) van chromatiese komponente (A en B) skei. by die ooreenstemming van kleure in LAB, verseker die algoritme dat die kleure op 'n perseptuele akkurate manier vergelyk word, wat beteken dat dit prioriteer hoe ons kleurverskille waarneem, nie net die wiskundige RGB-verskille nie. RGB-modus: Die RGB-kleurruimte verteenwoordig eenvoudig kleur deur die intensiteit van rooi, groen en blou lig. In hierdie modus word die afstand direk bereken op grond van die kleurwaardes, wat kan lei tot minder perseptuele akkuraatheid, aangesien dit nie rekening hou met menslike kleurperceptiewe nuanses nie. In professionele kleur klassifikasie en beeldverwerking, ooreenstem kleur gebaseer op is baie voordelig omdat dit navolg hoe die menslike oog kleure waarneem, wat meer natuurlike en visueel aantreklike resultate toelaat.Met behulp van hierdie metode, kan die aansoek beter konsekwentheid bereik wanneer kleurpalette op beelde toegepas word, wat dit makliker maak om kleure te pas by gewenste style. LAB Optimization Challenge: LAB Computation Werk met die kleurmodel vereis aansienlik meer berekenings hulpbronne as die werk met Dit is omdat, in LAB, elke kleur nie net deur drie kanale (RGB) verteenwoordig word nie, maar ook bykomende berekenings behels om die kleurkoördinaat en hul afstande te verkry. LAB RGB Om hierdie proses te optimaliseer, het ons om redundante berekenings te vermy. Palette wat in mode in die geheue gestoor word, en as die beeld nie verander het nie, sal die stelsel nie die palet herbereken nie.Dit help om die proses aansienlik te versnel, veral wanneer palette op verskeie beelde toegepas word, deur die voorbereide data te hergebruik sonder om die duur berekenings weer uit te voer. palette caching LAB // Optimization with palette caching
const extractPalette = () => {
  if (!image || image === lastExtractedImageRef.current) return;  // Check for changes

  const img = new Image();
  img.src = image;
  img.onload = () => {
    const canvas = document.createElement("canvas");
    const ctx = canvas.getContext("2d");
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage(img, 0, 0);

    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
    const colorMap = new Map();

    // Creating a color map
    for (let i = 0; i < imageData.length; i += 4) {
      const key = `${imageData[i]},${imageData[i + 1]},${imageData[i + 2]}`;
      colorMap.set(key, (colorMap.get(key) || 0) + 1);
    }

    const sorted = Array.from(colorMap.entries()).sort((a, b) => b[1] - a[1]);
    const topRaw = sorted.map(([str]) => str.split(",").map(Number));
    const topColors = filterColors(topRaw).slice(0, 10);

    const randomId = Math.floor(10000 + Math.random() * 90000);
    const name = `Palette_${randomId}`;

    setPalettes(prev => ({ ...prev, [name]: topColors }));
    setSelectedPalette(name);
    lastExtractedImageRef.current = image;  // Saving cache
  };
};
 Hierdie verbetering help om die prestasie van die aansoek te versnel, veral wanneer verskeie soortgelyke beelde herhaaldelik verwerk word. Palette Extraction and Application Palette-uittreksel is die proses om die mees kenmerkende en lewendige kleure uit 'n beeld te identifiseer, wat dan gebruik kan word om filters of visuele style te skep. van die kleur voorkoms en sy , verseker dat die palet nie kleure bevat wat te soortgelyk aan mekaar is nie. frequency luminance Die belangrikste meganisme vir die uittreksel van die palet is soos volg: const extractPalette = () => {
  // Check for image changes
  if (!image || image === lastExtractedImageRef.current) return;

  const img = new Image();
  img.src = image;
  img.onload = () => {
    const canvas = document.createElement("canvas");
    const ctx = canvas.getContext("2d");
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage(img, 0, 0);

    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
    const colorMap = new Map();

    // Counting the frequency of occurrence of each color
    for (let i = 0; i < imageData.length; i += 4) {
      const key = `${imageData[i]},${imageData[i + 1]},${imageData[i + 2]}`;
      colorMap.set(key, (colorMap.get(key) || 0) + 1);
    }

    // Sorting by frequency and filtering similar colors
    const sorted = Array.from(colorMap.entries()).sort((a, b) => b[1] - a[1]);
    const topRaw = sorted.map(([str]) => str.split(",").map(Number));
    const topColors = filterColors(topRaw).slice(0, 10);  // Segmentation and filtering

    const randomId = Math.floor(10000 + Math.random() * 90000);
    const name = `Palette_${randomId}`;

    // Saving the palette
    setPalettes(prev => ({ ...prev, [name]: topColors }));
    setSelectedPalette(name);
    lastExtractedImageRef.current = image;
  };
};
 Hierdie kode word gebruik om 'n palet uit 'n beeld te onttrek, waar kleure deur helderheid en verskil gefiltreer word.Met hierdie meganisme kan jy vinnig die mees representatiewe kleure versamel vir verdere toepassing. Ons het outomatiese naamgenerasie bygevoeg vir geëxtraheerde palette om te voorkom dat die gebruikersinterface met onnodige knoppies verstreng word. Custom Palettes Een van die gereedskap in ons aansoek is die aangepaste palette skepblok. Hierdie funksie laat gebruikers toe om palette te skep wat geskik is vir verskillende projekte, wat volle beheer oor kleure verskaf. Die proses begin met die kies van 'n kleur deur die Die gebruiker kan 'n kleur uit die beeld of 'n eksterne bron kies. Elke gekose kleur word outomaties bygevoeg aan die gebruiker se kleurlys, waaruit 'n palet geskep word. HexColorPicker Nadat 'n paar kleure gekies is, kan die palet met 'n aangepaste naam gered word. Color Neutralization with Color Palettes Kleurneutralisering met kleurpalette Dit is 'n belangrike aspek van Hy speel 'n kritieke rol in Dit is die proses waar individuele scènes of skote, geneem onder verskillende beligtingsomstandighede, tot 'n gemeenskaplike kleur toon kan bring.Dit word gewoonlik gedoen om 'n eenvormige visuele styl gedurende die film te verseker en om die scènes visueel konsekwent te maak, ongeag die shooting toestande. Color neutralization color grading film post-production Kom ons ondersoek hoe palette toegepas word deur twee ikoniese voorbeelde van cinematografiese visuele taal. Palettes in the Movie “The Matrix” Die film (1999), geregisseer deur die Wachowski broers, het ikoon geword as gevolg van sy unieke visuele styl, wat 'n spesifieke groenagtige kleurpalet insluit. Hierdie kleurstyl is ontwerp om die digitale realiteit waarin die hoofkarakters bestaan te visualiseer. “The Matrix” Groen, swart en metaal Main Colors Palette Application: die die die Ekstraktiewe groen tonusse: Om 'n Matrix-stylpalet te skep, kan ons al die skakerings van groen, swart en grijs uit die prentjie uitneem. Deur hierdie tonusse toe te pas, kan ons die "digitale werklikheid" -effek wat kenmerkend is vir die film bereik. Toepassing op nuwe beelde: Wanneer ons hierdie palet toepas, sal die kleure van die beeld verander, wat al die piksels vervang met diegene wat die naaste is aan die gekose kleure van die palet, wat die gewenste "gekodeerde" styl skep. Palettes in Wes Anderson’s Works is bekend vir sy lewendige, kleurvolle en simmetrieke visuele oplossings. die en almal het sy handtekening styl, wat gekenmerk word deur ryk pastelkleur en versigtig geselekteerde palette. Een sleutelelement van sy films is die harmonie en kontras in kleur ontwerp. Wes Anderson “The Grand Budapest Hotel”, “Moonrise Kingdom”, “The French Dispatch”, : Pastel tinte, helder kontrasterende kleure, rooi, geel, turquoise, groen. Main Colors Palette Application: die die die Extracing Pastel Shades: In Wes Anderson se films word pastel kleure dikwels gebruik. Byvoorbeeld, ligte roze, blou en oranje tinte. Ons kan hierdie kleure uitneem en dit op 'n nuwe beeld toepas om 'n effek te skep wat soortgelyk is aan vintage fotograaf of om 'n gestyliseerde atmosfeer te beklemtoon. In ons app, kan ons die palet uit 'n beeld uitneem deur kleure te filter deur helderheid en kontras, wat slegs die sagte pastel tinte bewaar. Toepassing op nuwe beelde: Nadat die palet geëxtraheer is, kan dit op enige beeld toegepas word, wat dit die kenmerkende voorkoms gee wat aan Anderson se werke herinner, met helder maar harmonieuse kleure. Nou dat ons palette uit verwysings kan uittreksel, is dit tyd vir 'n paar eksperimente! Aangesien ons palette gebruik wat beperk is in die aantal kleure en ons aansoek in die leser hardloop (wat beteken dat ons beperkte berekenings hulpbronne gebruik), moet ons nie uitstekende resultate verwag nie. Hier is voorbeelde van verwerkte beelde in beide RGB en LAB modes. Die uittreksel en toepassing van palette is 'n belangrike aspek van die skep van visuele style, soos die "Matrix" styl, Wes Anderson se of Denis Villeneuve se. Ons app bied 'n visuele instrument vir die werk met kleure wat gebruikers toelaat om palette te uittreksel, aan te pas en unieke visuele effekte te skep. In die finale deel sal ons fokus op die verfining en optimalisering van kleure.

Read My Stories

Hierdie oudio word in die oorspronklike taal van die storie vervaardig!

Te lank; Om te lees

Make resilience your competitive advantage

Hierdie kleur gereedskap verander enige prentjie in 'n Wes Anderson-koors droom

About Author

KOMMENTAAR

HANG TAGS

HIERDIE ARTIKEL IS AANGEBIED IN

Related Stories

The Opt Out Writing Contest: Final Round Results Announcement 🎉

The #decentralize-ai Writing Contest by ICP and HackerNoon: Results Announcement 🎉

"What If ... I didn't Do It?"

"Walk Down the Road of Life Without Fearing Anything" Max Azarov, CEO and Co-Founder, Novakid

The Opt Out Writing Contest: Final Round Results Announcement 🎉

The #decentralize-ai Writing Contest by ICP and HackerNoon: Results Announcement 🎉

"What If ... I didn't Do It?"

"Walk Down the Road of Life Without Fearing Anything" Max Azarov, CEO and Co-Founder, Novakid

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps