Anipapa
Anipapa
Oct 25, 2018 · 4 min read

哈囉,我是Anipapa!

下方是 Vivido 顏色選擇器的畫面,我們想讓你知道,按下「產生新的配色」這看似隨機又簡單的動作,背後其實有一套演算法支持喔!

深入介紹演算法之前,首先是要讓大家知道為什麼我們要做這個功能。Vivido 的目標用戶是給“非設計專業”來使用,而這些受眾…

  1. 不一定有專業美學訓練
  2. 品牌可能沒有自己的色彩運用準則

但這些人同樣都有可能會需要做影音行銷,而我們希望 Vivido 可以透過簡單快速的方式,找到自己喜歡的配色,進而產生出吸睛的影片。

為了達到這樣的目標,在我們設計配色演算法的時候,腦中最大的想像是:

「這些配色一起出現的時候,要超級舒服顯眼,並且,色彩學上來說必須是和諧的」

有了這樣的前提,接下來就跟各位分析我們是怎麼做的:

背景色的酒紅色我們稱之為 背景色,而「這是字型的樣子」我們稱之為 外層文案

「顏色有反差嗎」及「內文也要看得清楚哦」我們稱之為 內層文案;而背後的白色色塊則是 文案色框

而 Vivido 顏色選擇器的關鍵就是:

保持背景色與外層文案的對比;保持內層文案與文案色框的對比。

這是什麼意思呢?我們看看下方的 gif 檔就懂了~

可以看到,Vivido 會先選定兩組有對比效果的顏色,分別指派給背景色與外層文案,以及內層文案與文案色框這大分組。然後當你按下「顏色組合改變」的時候,我們就會調整配色的排列組合,產出不同的效果,讓使用者挑選自己最喜歡的結果。

但你可能會問,我們是怎麼選定一開始的兩組顏色呢?

非常好!請接著往下:

在色彩學的世界裡,每個顏色,可以用三個參數作為代表

  1. Hue(顏色):是在色環中,一個0–360的數值。
  2. Saturation(彩度):0–100%的數值,範圍是原本的顏色到變成灰色。
  3. Brightness(亮度):0–100%的數值,範圍是黑到白。

而我們的演算法是這麼做的:

。當使用者點擊「產生新的配色」

。電腦隨機選擇一個顏色的Hue

。透過我們的演算法產出對應的配色

。按下「顏色組合改變」,產生不同的對比排列

而我們的演算法,可以用下面這張圖來表示:

如上圖所示,Vivido 總共有七種不同的顏色排列公式,而每個公式下面又可以產生八組不同的顏色組合改變,搭配上0–360種不同的顏色,整個顏色選擇器可以產生的色彩變化公式如下:

360(Hue) x 7(Vivido顏色排列公式) x 8(顏色組合改變) = 20,160

這就是所謂「兩儀生四象,四象生八卦,八卦生萬千」的真諦呀~

看完之後有沒有很想親自去玩玩看呀?歡迎點選 vivido.video 去做支影片喔!

vivido

社群影片大躍進,你的品牌更吸睛

Anipapa

Written by

Anipapa

Hello, I'm Anipapa!!

vivido

vivido

社群影片大躍進,你的品牌更吸睛

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade