هذا التطبيق البسيط يمنعك من رؤية كيف تستخدم هوليوود اللون لتناقش عواطفك

وهذا يعني أن المجموعات RGB التي نستخدمها في تطبيقنا ليست فكرة، بل إنها تكوينات رقمية دقيقة من الملفات المعتمدة، التي يتم قياسها بشكل طبيعي.

إذا تم تحديد ملصق الجلد في ColorChecker Classic على [194, 150, 130] في RGB ، فهذه هي الطريقة التي يجب أن تبدو عليها في الظروف المناسبة.

The Catch: Color Charts Are Just the Beginning

أهداف الألوان ضرورية للتقييم - ولكن هذا هو كل ما هو عليه. بدء. لا تتضمن:

• كيف تتصرف الألوان في الخصائص أو الشواطئ؛
• الخصائص الفريدة للفيلم أو الأطباق؛
• أو الهدف الإبداعي خلف نظرة معينة.

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.

CinePalette: A Minimal Tool for Exploring Color Palettes

ماذا يمكنك القيام به مع CinePalette:

• تسجيل أي صورة؛
• تسجيل صفحة (ColorChecker، Portra، Sepia، وما إلى ذلك)؛
• تسجيل كل مقطع إلى الألوان الأكثر قوة في هذا صفحة؛
• تسجيل الوصفات قبل & بعد،
• تسجيل النتيجة؛
• أو بناء صفحة الخاصة بك من البداية.

كيفية عمل التطبيق

نبدأ مع مجموعة من الخلايا المحددة، ولكن المستخدمين يمكنهم أيضا إنشاء وتخزين أنفسهم.خلايا المحددة هي مجموعة من القيم RGB - على سبيل المثال، هذه هي كيف تبدو الخلايا Kodak Portra 400:

"تصنيف 400": [ [ [75, 60, 50], // الضوء [160, 130, 110], // أساطير الجلد [220, 200, 180], // الضوء [60, 100, 80], // الضوء [180, 150, 100] // ناتج ], 

تحدد اللوحة المختارة ما هي الألوان التي "تسمح" بالظهور في الصورة النهائية.

عندما يقوم المستخدم بإرسال صورة واختيار صفحة، هذا ما يحدث تحت القفص:

1. تصوير الصورة إلى <canvas> مخفية - هذا يوفر لنا الوصول على مستوى الجيل القادم للتلاعب بالبيانات.
2. نختار موضوع ImageData، الذي يحتوي على مجموعة من الألوان التي تمثل كل الجيل القادم من قبل أربع قواعد: [R، G، B، A].
3. نختار كل الجيل القادم من خلال كل الجيل القادم من الجيل القادم من الجيل القادم من الجيل القادم من الجيل القادم من الجيل القادم من الجيل القادم من الجيل القادم من الجيل القادم من الجيل القادم من الجيل القادم من الجيل القادم من الجيل القادم من الجيل القادم من الجيل القادم من الج
4. تصوير الصورة إلى <canvas> مخفية - هذا يوفر لنا الوصول على مستوى الجيل القادم للتعامل مع البيانات.
تصوير الصورة إلى مخفي <canvas>نحن نختار موضوع ImageData، الذي يحتوي على مجموعة حيث يتم تصنيف كل مقطوع من قبل أربع قيمة: [R، G، B، A]. نحن نختار مصطلح ImageData
5. نحن نقوم من خلال كل بيكسل، استخراج لون RGB.
We loop through every pixel
6. لدى كل كيلومتر ، نجد الألوان المرتبطة الأكثر قوة من الخلايا المختارة ، باستخدام المسافة اليكليدية في مساحة RGB - وبدلاً من ذلك ، يتم استبدالها.
لدى كل بيكسل ، نجد الألوان المرتبطة الأكثر قوة من الخلايا المختارة




أرسل بطاقة شيرلي وحاول تطبيق بطاقات مختلفة - سوف ترى على الفور كيف يتم تشكيل الصورة من خلال اختيار بطاقة.








أساس السحر يقع في ميزة تحليل لكل مقطع منفصل و العثور على الأصلي المرتبط باللون من الخلايا المختارة:

كل كيلومتر واحدأكبر لون متوافق

const findClosestColor = (r, g, b) => { let minDist = Infinity; let closest = [r, g, b]; for (let [pr, pg, pb]) { const dist = Math.sqrt((r - pr) ** 2 + (g - pg) ** 2 + (b - pb) ** 2); if (dist < minDist) { minDist = dist; closest = [pr, pg, pb]; } return closest; }; }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;
};
 
 
بعد ذلك ، نقوم بتبديل اللون الأصلي للكتروني في ImageData بالطريقة الأكثر تفاؤلاً من الخلايا.
 ونكرر هذا -  لكل كتروني واحد.
 
 
 لكل كيلومتر واحد
for (let i = 0; i < data.length; i += 4) { const [r, g, b] = [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; } 
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> و تحويلها إلى صورة باستخدام .toDataURL(). هذا يسمح للمستخدم بزيارة النتيجة على الفور في المتصفح - و تحميل الصورة المصفحة بسهولة واحدة.
 
 
شاهد النتيجة على الفور في المتصفح
 
 
ctx.putImageData(imageData, 0, 0); setFilteredImage(canvas.toDataURL()); 
ctx.putImageData(imageData, 0, 0);
setFilteredImage(canvas.toDataURL());
 
 
هناك، نحن نستخدم الطول اليكليدي في مساحة RGB - طريقة الكلاسيكية لتقييم مدى "قرب" اثنين من الألوان:
الطريق اليكليدي في الفضاء RGB
تقسيم = Math.sqrt((r - pr) ** 2 + (g - pg) ** 2 + (b - pb) ** 2); 
const dist = Math.sqrt((r - pr) ** 2 + (g - pg) ** 2 + (b - pb) ** 2);
 
 
هنا، (r، g، b) هو لون الكتروني الحالي، و (pr، pg، pb) هو واحد من الألوان في الخلايا. من بين جميع المسافات التي يتم حسابها، نختار الأقصر - القوة أقرب تقييم في الخلايا المختارة.
على أقرب نقطة مشاهدة
 
 
هذا النهج سهل الاستخدام، ولكن لديه الحد الأدنى: المساحة RGB لا تتناول كيف تفكر البشر في اللون - على سبيل المثال، نحن أكثر حساسية إلى الأخضر من اللون الأزرق، ويمكن أن تكون الاختلافات في الضوء مشوهة.
المساحة RGB لا تتحدث عن كيفية شعور البشر باللون
نحن نستخدم هذا النهج في CinePalette كوسيلة بسيطة وموضوعية لتثبيت المبادئ الأساسية لخرائط الألوان. ، ومع ذلك ، حتى في شكلها الحالي ، قد تلاحظ أن بعض الألوان يتم تغييرها بطرق تشير إلى غير متوقعة أو "الخلفية".
 
 
CinePalette
 
 
في الإصدارات المستقبلية، ونحن نتطلع إلى إضافة تحول بين RGB و CIELAB مساحة الألوان - مما يسمح للمستخدمين بمقارنة كيف تؤثر النماذج المختلفة على دقة التصنيف.
RGB و CIELAB
لماذا يحدث هذا؟
 لماذا يهم هذا؟
CinePalette يوضح خطوة أساسية ولكن أساسية في تقييم الألوان: تقييم الألوان.تقييم الخلايا "ماذا لو استخدمنا فقط هذه الألوان؟"
 
 
لعبة Portra تعطي ألوانًا دافئة وأحاسيسًا. Pro 400 يشعر بالراحة والترفيه. Teal & Orange تعطي ضربة فيلمية عالية النطاق. على عكس أدوات مثل Dehancer أو Resolve، CinePalette لا يثبت الفيزياء الفنية. ولكنها تكتشف الأهمية: color هو أداة لتصميم النسخة.
اللون هو أداة لتصميم النماذج والمسلسل.
 
 
ما هو التالي؟
ما هو التالي؟
هذه هي البداية فقط.في الأجزاء التالية من سلسلة:
 
نضيف CinePalette مع القدرة على اختيار صفحة من صورة التقويم؛
 
نضيف استخراجًا تلقائيًا من خرائط الألوان من أي نطاق أو صورة؛
 
نضيف التبديل بين RGB وLAB للحصول على توازن أكثر دقة من الواقع؛
 
نضيف كيف يعمل المرحلة الألوية - وكيف يمكنك استخدامها في التقييم في العالم الحقيقي.
 
we will expand CinePalette with the ability to pick a pallet from a reference image;
CinePalette
 add استخراج تلقائي من مجموعة الألوان من أي نطاق أو صورة؛
إدخال تحويل بين RGB و LAB للحصول على تقييم أكثر دقة من نظري؛
RGB و LAB
 وإزالة كيف يعمل العدالة اللون - وكيف يمكنك استخدامها في التصنيف في العالم الحقيقي.
توازن الألوان
 
 
بعد التكيف - وكن مستعدًا لنعلم فقط اللون ، ولكن حقًا see it.
بعد التكيف - وكن مستعدًا ليس فقط لتعلم اللون ، ولكن حقًا see.see