三色重疊圖產生器實測，30 秒做出不可能三角梗圖

用 AI 摘要這篇文章：

ChatGPT Claude Perplexity Google Grok

要在簡報或社群貼一張「快、穩、便宜只能選兩個」的矛盾圖，最省事的路徑不是打開設計軟體，而是一支叫三色重疊圖產生器（tricolor_image_generator）的線上小工具：開網頁、把文字換成自己的、按匯出，一張 2048×2048 的圖檔就存進下載夾。我實際把它跑了一遍，流程真的只有這三步，不需要註冊帳號、不需要安裝任何東西，畫面上也沒有廣告。更難得的是它的身世很單純：整支工具就是GitHub 倉庫裡那一個 535 行的 index.html，沒有後端、沒有資料庫，你輸入的每個字都只存在你自己的瀏覽器裡。

這篇文章把實測看到的細節攤開講：七個文字槽怎麼對應這種圖的語意、文字位置為什麼不用拖、匯出品質實測結果，以及三件用了會踩到的事。先講結論：它只做三圓重疊圖這一件事，做得輕快完整，倉庫裡沒有授權條款是唯一需要先知道的事，其餘缺點都繞得過去。

預設文案就在講一個流傳很久的梗

打開工具的第一眼，三顆半透明的圓已經排好，預設文案分別寫著穩定、速度、便宜；兩兩重疊的三個區域寫著貴、慢、差；正中心那格更直接，只有一個字：滾。這組預設值把工具的定位講得清清楚楚：它是拿來做「三個願望只能選兩個」這類矛盾圖的。中心那個滾字是整張圖的笑點，意思是三個全都要？門都沒有。

這種圖在台灣最常見的叫法是不可能三角，也有人不叫名字直接看圖說話：三個頂點各寫一個好處，兩兩交集寫下殘酷的現實，正中央放結論。它的應用場景比想像中廣：虛擬主機圈的快、穩、便宜；專案管理的時間、成本、品質；區塊鏈世界的去中心化、安全性、擴展性；連攝影圈都有鏡頭的輕便、畫質、便宜三角。只要你的論點是「這三件事同時要到的機率很低」，三圓重疊就是最直覺的表達方式。倉庫 README 裡那張示範圖的檔名，直接就把低價、穩定、高速三個詞放在一起，作者自己示範的就是主機圈的用法。

三圓重疊這種畫法好用，一半功勞在半透明混色：三顆圓各自半透明，兩兩交集會自然混出第三種顏色，不需要另外畫交集區，觀眾一眼就看出「同時要兩個」落在哪裡。預設的紅黃藍組合也剛好會讓三個交集分別混出橙黃、黃綠、藍紫三種可辨識的中間色。

反過來說，用簡報軟體手工做這張圖其實很煩：畫三個圓、填半透明色、打字、對齊、換字再對齊，改一組文案就要重調一次版面。這支工具把這段流程壓縮成填表格，文案換好位置自己長好。

Pin

七個文字槽，比重疊區看起來的多

畫面上看得到三顆圓，但真正能放字的位置有七個：三顆圓各自一個（上方、左下、右下），兩兩重疊的三個區域各一個，正中心再一個。這個結構剛好對應這類圖的語意：三個單獨區放你要的三個好處，三個重疊區放「只拿到其中兩個時，你其實失去了什麼」，中心放整組取捨的結論或笑點。預設文案就是一套完整範本：穩定加速度等於貴、便宜加速度等於差、穩定加便宜等於慢。換成自己的題目也一樣套，例如產品開發的功能多、上市快、品質好：三個重疊區分別寫上要燒錢、要砍功能、要賭運氣，中心下標題，一張產品三角就完成了。

每一格都能換字、調字級（12 到 100），反諷標籤和結論的視覺重量可以拉出層次。更值得注意的是，每個槽都能從文字切成圖片：選一張本機圖檔，設定 0.1 到 5 倍的縮放，圖就會被畫進對應的區域，程式會照圖片的長寬比自動算寬高，不會拉到變形。放標誌的時候建議用透明背景的 PNG，疊在色塊上不會出現白底方塊；圖片的基準尺寸是該槽字級的三倍再乘上縮放倍率，所以想要固定大小就要自己抓倍率，字級調大圖也會跟著變大。圖檔是用瀏覽器的 FileReader 讀進畫布，全程留在你的機器裡；實際操作期間整個工具只連兩個網域，一個是它自己的站，一個是載入 Vue 3 的 unpkg.com，沒有任何收資料的對象。同樣把產圖流程整個留在瀏覽器裡的，還有把 Markdown 做成分享圖的玉桃文饗軒。

Pin

文字不用拖，位置是算出來的

這類工具另一半的麻煩通常是對齊：字一多就要手動微調，改一個字重新排一次。這支工具直接把這件事交給程式，七個文字槽的位置是即時計算出來的。原始碼裡有一段光線與圓求交點的幾何計算，白話講是這樣：從三圓共同的中心點朝每顆圓的方向射一條線，算出這條線穿出圓邊的位置，文字放在交界與圓邊的正中間，也就是單獨區的中央；三個重疊區的文字取兩圓中點往外延伸的落點；中心槽取三個圓心的平均。實際拉動區域大小滑桿時，七段文字會跟著半徑自動重新歸位，換文案、改圓的大小都不會跑版。

半徑滑桿本身就是個排版工具，範圍從 50 到 240：照三個圓心的距離換算，拉到最小時三顆圓會完全分開、互不接觸；往最大拉，三顆圓重疊的面積越來越大。同一組文案，調一次滑桿就能從「三個並列的選項」變成「糾纏在一起的取捨」，這是手工畫圓最難模仿的細節。要留意的是，三顆圓分開後，三個重疊槽的文字照樣會畫出來，只是懸在圓與圓之間的空隙上，看起來會有點尷尬；想把工具當三個獨立選項的並列圖用，記得先把重疊槽清空。

代價是排列自由度：三顆圓等大，相對位置也寫死在程式裡，你能調的只有半徑、顏色和不透明度，拖不出自己想要的三角排列。想做一大兩小、或拖著圓自訂排列，它不做。

預覽 512，匯出 2048×2048

畫布上的預覽是 512×512，按匯出時程式會另建一張 2048×2048 的畫布重新繪製再存檔，成品邊長是預覽的四倍，直接放簡報或社群都夠用，就算印在 A4 講義上也站得住。我實際按了一次匯出，拿到一張 2048×2048 的 WebP，檔案約 219 KB，檔名會自動帶上時間戳記，連續匯出多張不會互相覆蓋，存檔不用改名。三種格式對應不同去處：WebP 是它的預設值，這類色塊圖的檔案通常最小，主流平台多半支援；PNG 無損、通用性高，進簡報比較保險；JPEG 相容性老牌，丟進老系統不怕。具體規格整理如下：

配色懶得自己配的話，內建五組預設（經典紅黃藍、CMYK、RGB、暗黑霓虹、馬卡龍）一鍵套用再微調最快，反正隨時能按重設回到出廠值。重疊區的混色濃淡靠每顆圓 0 到 100 的不透明度滑桿控制，數字越高圓越實、交集顏色越深。樣式裡也照顧了窄螢幕，寬度 960 以下會改成單欄排版，控制面板和畫布上下堆疊。

有一個細節先知道：文字最後用什麼字型畫出來，取決於你電腦裝了什麼。程式指定的優先序是 Noto Sans SC、PingFang SC、Microsoft YaHei，找不到就退回系統的無襯線字型，所以在 Mac、Windows、Linux 上匯出的同一張圖，字的長相可能不一樣。取捨很簡單：要跨機器一致的視覺，先在自己機器上匯出最終版再傳檔，別把網址丟給別人叫他重畫一張。

授權空白，還有三件事先知道

最需要先知道的是授權：倉庫裡沒有任何授權條款。GitHub 專案的授權欄位是空的，檔案清單只有 README、index.html 和兩張圖。這不影響你用線上版，但想把這份程式碼搬進自己的產品或服務，法律上是沒有依據的。分寸可以這樣拿捏：個人畫圖、公司內部簡報拿去用沒人管；把整份網頁複製後公開散佈、或改一改掛自己的名字經營，就踩進沒授權的灰色地帶，真要商用得先找作者談授權。

網路依賴是另一個要先看清的地方：它唯一的網路依賴是從 unpkg.com 載入的 Vue 3，unpkg 連不上頁面就不會動。日常使用沒問題，但如果你要在沒有網路的會場簡報、或公司網路對外部 CDN 有管制，只把網頁存成本機檔案還不夠，得連 Vue 一起抓下來、改成同一層目錄的引用才成立。

專案本身的狀態也要看一下：提交紀錄停在 2025 年 12 月中，一共九個提交、26 顆星（截至 2026 年 8 月）。對一個零建置、功能已經收斂的單檔工具來說，停更的實際風險很低，程式就擺在那裡不會跑；但別期待它再長新功能，遇到不順手的地方只能自己繞過。免費託管的網頁也一樣沒有永遠可用保證，養成做完就匯出存檔的習慣，比指望網址一直活著可靠。

還有一個容易誤會的地方：三顆圓等大、位置固定，它畫出來的是概念示意圖，不是按資料比例縮放的文氏圖。想表達真實的集合大小關係、或三個集合規模差很大的情境，這個工具幫不上忙。

短時間做概念圖它最快，別的活它不接

判斷很簡單：要在短時間內做一張三選二的概念圖，用在簡報開場、社群貼文、會議裡的吐槽或課堂上講取捨，它大概是最短路徑；要做的事只要超出這個範圍就換工具。舉兩個實際情境：業務要比價格、速度、品質的時候，先貼一張三角圖讓客戶自己選要犧牲哪個，比口頭解釋快；老師講機率或取捨的入門觀念，把三個條件放上三個圓，交集留白讓學生填，也是現成的教材模板。畫流程圖或架構圖，Next AI Draw.io 這類圖表工具才是對的選擇；要精確控制版面、字體與輸出品質的完整社群圖，DesignCap 這類線上設計平台比較合適。

最後提醒一件小事：介面是簡體中文，按鈕和標籤都是，但控制項種類不到十種，對照畫面看著猜也會用。開啟網頁、把七格文字換成自己的、選格式按匯出，一張夠貼文的不可能三角就完成了；用完直接關分頁也不可惜，反正下次重開，三十秒又是一張。