புதிய வரலாறு

This Simple App lets you see how Hollywood uses color to mess with your emotions இந்த எளிய பயன்பாட்டை நீங்கள் உங்கள் உணர்வுகளை எப்படி பயன்படுத்துகிறீர்கள் என்று பார்க்கலாம்

மூலம் Nailya Safarova8m2025/04/14
Read on Terminal Reader

மிக நீளமானது; வாசிப்பதற்கு

எவ்வாறு Color Grading வேலை செய்கிறது, Color Targets என்ன, மற்றும் உங்கள் சொந்த Palette-based Grading Tool in React உருவாக்கவும் - முதலில் மற்றும் இலக்கு.
featured image - This Simple App lets you see how Hollywood uses color to mess with your emotions இந்த எளிய பயன்பாட்டை நீங்கள் உங்கள் உணர்வுகளை எப்படி பயன்படுத்துகிறீர்கள் என்று பார்க்கலாம்
Nailya Safarova HackerNoon profile picture


Why does Joker feel so restlessly green and yellow?

ஏன் Joker இவ்வளவு ஆச்சரியமாக அரிதாக மற்றும் குளிராக உணர்கிறது?

Why does Joker feel so disturbingly green and yellow?ஜாக்கிரதையர்

Why is Blade Runner in teal and orange?

ஏன் Blade Runner Teal மற்றும் orange உள்ளடக்கியது?

Why is Blade Runner soaked in teal and orange?BLADE RUNNER இல்

ஏன் குளிர்ச்சியாகவும் சூடாகவும் இருக்கும்?

ஏன் குளிர்ச்சியும் குளிர்ச்சியும் குளிர்ச்சியும் இருக்கும்?

Why does film make skin look soft and warm? ஏன் குளிர்ச்சியான குளிர்ச்சியான குளிர்ச்சியான குளிர்ச்சியான குளிர்ச்சியான குளிர்ச்சியான குளிர்ச்சியான குளிர்ச்சியான குளிர்ச்சியான குளிர்ச்சியான குளிர்?


இது அற்புதமாக இல்லை.

இது அற்புதமாக இல்லை.இது குளம்.


ஒரு முதியவன் பாதாளங்களைத் தாண்டும் தன் மந்திரக்கோலால் சாய்த்தபடியிருக்கிறான் நாட்சத்திரங்களை. .............................................................................................................................................................................. இது எத்தனையாவது [...]


பல வேலை உண்மையில் எங்கே தொடங்குகிறது? எவ்வாறு நாம் "சரியான" குளம் கூட என்ன தெரியும்?


Spoiler: அது LUTs அல்லது வடிவமைப்பாளர்கள் தொடங்குவதில்லை. இது Color Target, Calibration, and carefully chosen palettes தொடங்குகிறது.

It begins with color targets, calibration, and carefully chosen palettes


இந்த தொடரில், நாம் அறிய வேண்டும்:

  • என்ன குளிர்பானம் மிகவும் அடிப்படை நிலைக்கு உள்ளது;
  • ஏன் உங்கள் பால் குறைக்க ஒரு அம்சம், ஒரு பிழை அல்ல;
  • How color charts work (and why they matter);
  • and how to build your own grading tool in browser - with React and some simple math.
  • What color grading is on the most fundamental level;
  • why limiting your palette is a feature, not a bug;
  • ஏன் உங்கள் பால் குறைக்க ஒரு அம்சம் அல்ல;
  • How color charts work (and why they matter);
  • குளிர்பானங்கள் எப்படி வேலை செய்கின்றன (and why they matter);
  • and how to build your own grading tool in the browser — with React and some simple math.
  • ‘பி’இந்த மாதிரி think different type விளம்பரங்கள் தான் add industriesla இப்போ Hot...நாம் அதை விளக்கமாட்டோம்.நாம் அதை காண்போம்.இன்டர்நெட் see

    என்ன Color Grading, மற்றும் ஏன் Color Targets மூலம் தொடங்குவது?

    Color Grading என்றால் என்ன, மற்றும் ஏன் Color Targets மூலம் தொடங்குவது?ஒரு முதியவன் பாதாளங்களைத் தாண்டும் தன் மந்திரக்கோலால் சாய்த்தபடியிருக்கிறான் நாட்சத்திரங்களை. .............................................................................................................................................................................. இது எத்தனையாவது [...]


    • balancing exposure and white point;
    • correcting technical color shifts;
    • crafting a visual style with contrast, tones, and color curves.
    • balancing exposure மற்றும் white point;
    • technical color shifts சரியான மாற்றங்கள்;
    • ஆங்கிலத்தில் இதை Single Orgasm, Multiple Orgasm என்றும் கூறுகிறார்கள்.


      ஒரு முதியவன் பாதாளங்களைத் தாண்டும் தன் மந்திரக்கோலால் சாய்த்தபடியிருக்கிறான் நாட்சத்திரங்களை. .............................................................................................................................................................................. இது எத்தனையாவது [...]

      X-Rite ColorChecker Classic

      X-Rite ColorChecker Classic


      ஒவ்வொரு படைப்பான பார்வை பயன்படுத்தும் முன், நீங்கள் ஒரு neutral state இல் படத்தை கொண்டு வர வேண்டும், இது:

      neutral state உச்சநீதிமன்றம்


      • விரும்பாத குளிர்பானங்களை சரிசெய்யவும் (color correction);

      • standard color space (like Rec.709 or sRGB);

      • matching material from different cameras into a consistent baseline.


    • நல்ல குளிர்பானங்களை சரிசெய்யவும் (Color Correction);

    • நல்ல குளிர்பானங்களை சரிசெய்யவும் (color correction);

    • சிறிய குளிர்பானம் (எப்படி Rec.709 அல்லது sRGB);

    • படத்தை ஒரு standard color space (like Rec.709 or sRGB) வரை நீக்கவும்;

    • பல கேமராக்களின் பொருட்களை ஒப்பிடும் ஒரு ஒப்பிடும் அடிப்படையில்.


    • பல்வேறு கேமராக்களில் இருந்து பொருட்களை ஒப்பிடும் ஒரு ஒப்பந்தம்.



      And for that, colorists use color targets like the **ColorChecker, ChromaDuMonde,**or other reference charts.

      Color இலக்குகள்ColorCheckerChromaDuMonde‘பி’

      A color target is a chart of color patches with precisely measured values. These values aren’t arbitrary — they’re obtained through spectrophotometric measurements in controlled environments using professional equipment like X-Rite or Konica Minolta spectrophotometers.

      சிறிய அளவிலான மதிப்புகள்Konica Minolta spectrophotometers.Konica Minolta spectrophotometers


      One of the first widely adopted targets was the Kodak Gray Scale — a strip of neutral gray tones used for exposure control. Later came more advanced charts with full-color patches — like the Macbeth ColorChecker, introduced in 1976 (now known as the X-Rite ColorChecker). It features 24 color swatches designed to represent common real-world colors: human skin, blue sky, green foliage, and more.

      Kodak Gray ScaleKodak Gray Scaleதொடர்பாக்ஸ் ColorCheckerX-Rite ColorChecker ஐப் பயன்படுத்துவது


      ஆளை விடுங்கள்.3) Like in some countries such as Dubai, is there a possibility in India too, that there will be no income tax, someday?பதில்: எண்பதுகளில் வருமான வரி ஒழிக்கப்படும் என்ற மாதிரி ஒரு எண்ணம் வந்தது.


      The process of calibrating with color targets

      The process of calibrating with color targets


      X-Rite’s ColorChecker, for example. each patch is measured under standardized lighting (usually D65 or D50), with results recorded in CIE XYZ coordinates — a device-independent color model.These coordinates are then converted into RGB values, depending on your working color space (like sRGB, Rec.709, or AdobeRGB).

      D65 D50 ஐந்து வகைகள்CIE XYZ ஒப்பந்தங்கள்RGB அளவுகள் sRGB குறியீடுRec.709 குறியீடுAdobeRGB


      எனவே, எங்கள் பயன்பாட்டில் நாம் பயன்படுத்தும் RGB அட்டவணைகள் நிரூபிக்கப்படவில்லை - அவர்கள் standardized, physically measured patches சரியான டிஜிட்டல் பரிமாற்றங்கள்.



      ஒரு முதியவன் பாதாளங்களைத் தாண்டும் தன் மந்திரக்கோலால் சாய்த்தபடியிருக்கிறான் நாட்சத்திரங்களை. .............................................................................................................................................................................. இது எத்தனையாவது [...]


      The Catch: Color Charts Are Just the Beginning

      The Catch: Colour Charts Are Just the Beginning இன்ஸ்டாகிராம் வகுப்பு

      Color targets are essential for calibration - but that's all they are. ஒரு முதலீடு. அவர்கள் மதிப்பீடு இல்லை:

      ஒரு முதலீடு.
      • how colors behave in highlights or shadows;
      • the unique characteristics of film stock or lenses;
      • or the creative intent behind a particular look.
    • how colors behave in highlights or shadows;
    • film stock அல்லது lenses இன் தனிப்பட்ட அம்சங்கள்;
    • or the creative intention behind a particular look.
    • ஒரு குறிப்பிட்ட பார்வைக்குப் பின்னூட்டம்


      In professional tools like DaVinci Resolve or Dehancer, color charts are just step one in a long pipeline. From there, you move into advanced processes like film emulation, tone mapping, grain, halation, bloom, and other stylistic transformations. So it’s critical to understand: a chart is a calibration tool — not a style.

      DaVinci ResolveDaVinci ResolveDehancerDehancera chart is a calibration tool — not a style. ஒரு அட்டவணை ஒரு அமைப்பு அல்ல.

      CinePalette: A Minimal Tool for Exploring Colour Palettes

      CinePalette: A Minimal Tool for Exploring Colour Palettes குளிர்பானங்கள் கண்டுபிடிக்க ஒரு சிறிய கருவி

      கால்பந்து தேர்வு ஒரு படத்தை எப்படி பாதிக்கிறது என்பதை காட்டுவதற்காக, நாம் CinePalette - ஒரு எளிய வலை பயன்பாட்டை உருவாக்கியுள்ளோம் - நீங்கள் உங்கள் குளிர்பானம் தவிர்க்கும் போது என்ன நடக்கிறது என்பதை காண்பது (palette reduction எனப்படும் ஒரு செயல்பாடு).

      தொடர்பாகவும்பால்ட் குறைப்பு


      நீங்கள் CinePalette மூலம் என்ன செய்ய முடியும்:

      நீங்கள் CinePalette மூலம் என்ன செய்ய முடியும்:
      • ஒவ்வொரு படத்தை பதிவிறக்கவும்;
      • ஒரு பால்ட் தேர்வு செய்யவும் (ColorChecker, Portra, Sepia, etc.);
      • ஒவ்வொரு பால்ட் ஒவ்வொரு பால்ட்லையும் அந்த பால்ட்லின் நெருக்கமான குளிரை மாற்றவும்;
      • ஒவ்வொரு படத்தை பதிவிறக்கவும்;
      • pick a palette (ColorChecker, Portra, Sepia, etc.);
      • ஒவ்வொரு டிக்கெட்டை அந்த அலங்காரத்தில் அடுத்த குளிராக மாற்றவும்;
      • compare before & after with an interactive slider;
      • இன் பின்னூட்டங்கள்
      • save the result;
      • பதிவிறக்க
      • or build your own palette from scratch.
      • உங்களுடைய சொந்த அட்டவணை உருவாக்க


        இது எப்படி வேலை செய்கிறது

        How It Works in Code இல் எப்படி வேலை செய்கிறது

        Main Menu

        Main Menu

        Our app runs entirely in the browser using React and the Canvas API. The project — called CinePalette — will be open-source and available on GitHub (link at the end of the series).

        பயிற்றுவிழாCanvas ஐபிஎல்தொடர்பாகவும்


        We start with a set of predefined palettes, but users can also build and save their own.Palettes are defined as array of RGB values — for example, here is what the Kodak Portra 400 palette looks like:

        Kodak Portra 400 குறியீடு
        "தொடர்பு 400": [ [ [75, 60, 50], // ஒளிப்பதிவுகள் [160, 130, 110], // குளிர்பானங்கள் [220, 200, 180], // ஒளிப்பதிவுகள் [60, 100, 80], // சுருக்கங்கள் [180, 150, 100] // சுருக்கமான ], 
        "Portra 400": [ [75, 60, 50], // shadows [160, 130, 110], // skin tones [220, 200, 180], // highlights [60, 100, 80], // foliage [180, 150, 100] // neutral ],


        ஒரு முதியவன் பாதாளங்களைத் தாண்டும் தன் மந்திரக்கோலால் சாய்த்தபடியிருக்கிறான் நாட்சத்திரங்களை. .............................................................................................................................................................................. இது எத்தனையாவது [...]


        ஒரு பயனர் ஒரு புகைப்படத்தை பதிவிறக்க மற்றும் ஒரு பால் தேர்வு போது, இங்கே ஹோட்டல் கீழ் என்ன நடக்கிறது:

        1. The image is rendered to a hidden <canvas> — this gives us pixel-level access to manipulate the data.
        2. We extract the ImageData object, which contains an array where each pixel is represented by four values: [R, G, B, A].
        3. We loop through every pixel, extract its RGB color.
        4. For each pixel, we find the closest matching color from the selected palette, using Euclidean distance in RGB space — and replace it.
      • The image is rendered to a hidden <canvas> - இது நமக்கு pixel-level access to manipulate the data.
      • The image is rendered to a hidden <canvas>
      • We extract the ImageData object, which contains an array where each pixel is represented by four values: [R, G, B, A].
      • We extract the ImageData object நாம் ImageData பொருளை வெளியிடுகிறோம்
      • We loop through every pixel, extract its RGB color.
      • We loop through every pixel நாம் ஒவ்வொரு ஸ்கிரிப்டுக்குள் செல்கிறோம்
      • ஒவ்வொரு பிஜேபிக்கு, நாம் தேர்வுசெய்யப்பட்ட பிஜேபிளில் இருந்து சிறந்த ஒப்பிடும் குளிரை கண்டுபிடிப்போம், RGB இடுகையில் Euclidean distance-ஐ பயன்படுத்தி - and replace it.
      • ஒவ்வொரு பேக்ஸ்ல, நாங்கள் தேர்வுசெய்யப்பட்ட அலங்காரத்திலிருந்து சிறந்த ஒப்பிடும் குளிரை காண்கிறோம்


        நாங்கள் ஒரு Shirley அட்டை பதிவிறக்க மற்றும் வேறு வடிவங்களை பயன்படுத்த முயற்சி - நீங்கள் நேரடியாக வடிவமைக்க வடிவமைக்க வடிவமைக்க வடிவமைக்க வடிவமைக்க பார்க்க முடியும்.

        We applied Teal & Orange, Sepia, and ColorChecker Classic palettes to a classic Shirley card

        We applied Teal & Orange, Sepia, and ColorChecker Classic palettes to a classic Shirley card


        The core of the magic lies in a function that analyzes each individual pixel and finds the nearest matching color from the selected palette:

        ஒவ்வொரு தனியார் ஸ்பெக்டர்முதல் ஒப்பிடும் குளம்இந்நிகழ்ச்சியால், இந்நிகழ்ச்சியால், இந்நிகழ்ச்சியால், இந்நிகழ்ச்சியால், இந்நிகழ்ச்சியால், இந்நிகழ்ச்சியால், இந்நிகழ்ச்சியால், இந்நிகழ்ச்சியால், இந்நிகழ்ச்சியால், இந்நிகழ்ச்சியால், இந்நிகழ்ச்சியால், இந்நிகழ்ச்சியால், இந்நிகழ்ச்சியால், இந்நிகழ்ச்சியால், இந்நிகழ்ச்சியால், இந்நிகழ்ச்சியால், இந்நிகழ்ச்சியால், இந்நிகழ்ச்சியால், இந்நிகழ்ச்சியால், இந்நிகழ்ச்சியால், இந்நிகழ்ச்சியால், இந்நிகழ்ச்சியால்,const findClosestColor = (r, g, b) => { 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; };


        Next Topic: கதுவா: ஒரு குரூரமான குற்றம் எவ்வாறு அரசியல் மற்றும் மத சாயம் பூசப்பட்டு ஒற்றை பரிமாணமாக்கப்பட்டது for each single pixel ஒவ்வொன்றும்இந்நிகழ்ச்சியால், இந்நிகழ்ச்சியால், இந்நிகழ்ச்சியால், இந்நிகழ்ச்சியால், இந்நிகழ்ச்சியால், இந்நிகழ்ச்சியால், இந்நிகழ்ச்சியால், இந்நிகழ்ச்சியால், இந்நிகழ்ச்சியால், இந்நிகழ்ச்சியால், இந்நிகழ்ச்சியில், இந்நிகழ்ச்சியில், இந்நிகழ்ச்சியில், இந்நிகழ்ச்சியில், இந்நிகழ்ச்சியில், இந்நிகழ்ச்சியில், இந்நிகழ்ச்சியில், இந்நிகழ்ச்சியில், இந்நிகழ்ச்சியில், இந்நிகழ்ச்சியில், இந்நிகழ்ச்சியில், இந்நிகழ்ச்சியில், இந்நிகழ்ச்சியில், இந்நிகfor (let i = 0; i < data.length; i += 4) { const [r, g, b] = [data[i], data[i + 1], data[i + 2]]; const [nr, ng, nb] = findClosestColor(r, g, b); data[i] = nr; data[i + 1] = ng; data[i + 2] = nb; }


        ஒவ்வொரு மேக்ஸ் செயல்படுத்தப்பட்ட பிறகு, நாம் <canvas> இல் முடிவை திரும்பவும் <canvas> ஐ பயன்படுத்தி .toDataURL() பயன்படுத்தி ஒரு படத்திற்கு மாற்றலாம்.This allows the user to see the result instantly in the browser - and download the filtered image with a single click.

        நேரத்தில் காணப்படும் முடிவை காணலாம்


        ctx.putImageData(imageData, 0, 0); setFilteredImage(canvas.toDataURL()); 
        ctx.putImageData(imageData, 0, 0); setFilteredImage(canvas.toDataURL());


        இங்கு, நாம் RGB இல் Euclidean distance ஐ பயன்படுத்துகிறோம் - இரண்டு குளம்கள் எவ்வளவு "அதிகமாக" உள்ளன என்பதை அறிய ஒரு கிளிநொடி முறை:

        RGB இல் Euclidean distance in RGB space
        const dist = Math.sqrt((r - pr) ** 2 + (g - pg) ** 2 + (b - pb) ** 2); 
        const dist = Math.sqrt((r - pr) ** 2 + (g - pg) ** 2 + (b - pb) ** 2);


        ஒரு முதியவன் பாதாளங்களைத் தாண்டும் தன் மந்திரக்கோலால் சாய்த்தபடியிருக்கிறான் நாட்சத்திரங்களை. .............................................................................................................................................................................. இது எத்தனையாவது [...] nearest visual match இன்டர்நெட்


        This approach is intuitive and easy to implement, but it has limitations: RGB space does not account for how humans actually perceive color - for example, we are more sensitive to green than to blue, and brightness differences can be misleading.

        RGB இடம் மனிதர்கள் உண்மையில் குளிரை எப்படி உணர்கிறார்கள் என்பதைக் குறிப்பதில்லை

        B&W palette

        B&W paletteஒரு முதியவன் பாதாளங்களைத் தாண்டும் தன் மந்திரக்கோலால் சாய்த்தபடியிருக்கிறான் நாட்சத்திரங்களை. .............................................................................................................................................................................. இது எத்தனையாவது [...]தொடர்பாகவும்


        நாளை பதிப்புகளில், நாம் RGB மற்றும் CIELAB Color Spaces இடையே ஒரு மாற்றத்தை சேர்க்க திட்டமிடுகிறோம் - பயனர்கள் வெவ்வேறு மாதிரிகள் குளிரை ஒப்பிடும் சரியை எப்படி பாதிக்கும் என்பதை ஒப்பிட அனுமதிக்கிறது.

        RGB மற்றும் CIELAB

        இது ஏன் முக்கியம்?

        இது ஏன் பொருந்தும்?ஒரு முதியவன் பாதாளங்களைத் தாண்டும் தன் மந்திரக்கோலால் சாய்த்தபடியிருக்கிறான் நாட்சத்திரங்களை. .............................................................................................................................................................. இது எத்தனையாவது [...]தொடர்பு குறியீடு “நாங்கள் இந்த மாளிகைகளை மட்டுமே பயன்படுத்தினால் என்ன?”


        ஆங்கிலத்தில் இதை Single Orgasm, Multiple Orgasm என்றும் கூறுகிறார்கள்.3) Like in some countries such as Dubai, is there a possibility in India too, that there will be no income tax, someday?பதில்: எண்பதுகளில் வருமான வரி ஒழிக்கப்படும் என்றும் கூறுகிறார்கள்.color is a tool for style and storytelling.


        Application interface

        Application interface

        அடுத்து என்ன செய்வது?

        அடுத்து என்ன?

        This is just the beginning. in the next parts of the series:

        • we will expand CinePalette with the ability to pick a palette from a reference image;
        • add automatic extraction of color schemes from any frame or photo;
        • introduce a shift between RGB and LAB for more perceptually accurate matching;
        • and break down how color harmony works - and how you can use it in real-world grading.
      • we will expand CinePalette with the ability to pick a palette from a reference image;
      • தொடர்பாகவும்
      • add automatic extraction of colour schemes from any frame or photo;
      • ஒரு மாற்றத்தை RGB மற்றும் LAB இடையே உருவாக்குகிறது.
      • RGB மற்றும் LAB
      • and break down how color harmony works - and how you can use it in real-world grading.Color Harmony குளிர்பானம்


        செய்யுங்கள் - மற்றும் குளிரை மட்டுமே அறிந்து கொள்ள தயாராக இருங்கள், ஆனால் உண்மையில் see அதை.

        தொடர்ந்து கொள்ளுங்கள் - மற்றும் குளிரை மட்டுமே அறிந்து கொள்ள தயாராக இருங்கள், ஆனால் உண்மையில் see அதை. see
L O A D I N G
. . . comments & more!

About Author

Nailya Safarova HackerNoon profile picture
Nailya Safarova@nailyasaf
Expert in Signal and Image processing with over 25 years of experience in analogue and digital photography.

ஹேங் டேக்குகள்

இந்த கட்டுரையில் வழங்கப்பட்டது...

Trending Topics

blockchaincryptocurrencyhackernoon-top-storyprogrammingsoftware-developmenttechnologystartuphackernoon-booksBitcoinbooks