文件 / 06

調色：把電影的色彩真正落到頁面上

Cinematic UI 如何從電影影格量出調色：兩大類共 14 種有出處的 look、grade-from-stills 量測、grade.js 與偏色檢查。

選定電影的色彩必須真正落到頁面上。做不到的話，「復古」只是一層褐色濾鏡，「霓虹」只是白字後面一片粉紅到青色的漸層。Cinematic UI 把調色視為導演機制的一部分，而且一旦選定就做到底：一個畏縮的調色，是另一部電影。

調色是什麼

企劃書裡的調色（GRADE）區塊，記錄顏色從哪裡來、黑位、高光、使用與禁用的色相、顆粒，以及 look 數值。同一份量測同時餵給頁面的 token（底色、墨色、強調色與外框色）和畫面中的圖片，所以復古的片子看起來像那部片的拷貝，霓虹的片子是由它自己的光源打亮，而不是整張染上粉紅。

十四種 look，兩大類

references/grades.md 收錄 14 種有出處的 look。每一種都寫明攝影師實際的做法、該借用的機制，以及哪些屬於戲服。它們是這套方法的範例，不是選單：任何電影都可以被調研並選為範本。

從影格量出調色

流程從調研開始，到量測結束。Agent 蒐集六到十二張該段落的參考影格，然後執行：

node scripts/grade-from-stills.mjs refs/

它在 headless Chromium 裡載入這些影格，輸出 grade.json 和一張聯絡表 grade.jpg。數字包含帶占比的色票、黑位與白位、色度範圍、陰影與高光的冷暖，以及建議的 look。這些影格只作分析用的參考，絕不隨作品發布。

沒有影格時，skill 會使用 look book 的起始值，把這份調色標為「未量測」，並在素材通告中向你要影格。Look book 裡的起始值本身也標明是「待實測取代的轉譯」。

套用：grade.js

在純 DOM 網站上，kit/grade.js 透過一個 SVG 濾鏡，把調色套到照片、影片和 canvas。createGrade({ look, spec }) 的參數與 3D 舞台的 stage.look 相同（白平衡、對比、飽和、分色調、提升黑位、褪色），另外加上光暈、泛光、顆粒、暗角、漏光和片門晃動，以及底片抬起的黑位。文字和控制項不會被濾鏡處理。畫格可由單一時間值重現，減少動態模式也會保留色彩。kit/grade.html 是它的展示頁。

檢查：偏色

node scripts/screening.mjs <dir> --grade grade.json（或使用頁面自己的 grade.js 公開的規格）會在試片報告中加入調色相關的旗標：grade-drift、grade-warmth、grade-black、grade-white、grade-saturation 與 grade-outlier。它們抓出偏離選定調色的畫格、被壓死或被抬起的黑位、被削掉的高光，以及飽和度或冷暖不符的畫面。

拒絕的預設值

偷懶清單上有兩種「沒選過角的調色」：暖紙色加朱紅加深墨色，以及冷灰加一個藍或綠的強調色。調色根本沒落到頁面上的情況也一律拒絕，例如白底上整齊的色票 token、圖片完全沒調色。