iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 23
0
自我挑戰組

蛻變事實-UI設計師勇闖前端城系列 第 23

[蛻變事實/D23] 設計師勇闖前端城-(懶得用腦:色彩篇)

問:「有沒有人跟我一樣有RGB16進位,懶得輸入的懶態?」/images/emoticon/emoticon25.gif


在測試code時,都應該有自己最習慣的暫時色!
每看到各大大在DEMO時,都是 blue、yellow、red ... 基礎色彩名
而我這懶人最常用的色彩是

[ #eee ]

/images/emoticon/emoticon01.gif
這原因非常簡單了得~!
因為都只用左手操作外,二個按鈕在上下而已啊~!(哈哈哈哈)

看看看~是多麼可以順手的在測試時打上,如以下的CODE啊!:

border: 1px solid #eee;
color:#eee;
background-color:#eee;

這些暫時代碼常出現是很正常的事!


維持這懶人習慣,也沒有想過靜下心來研究研究...
一直直到前陣子有一天看到一個大大在做線上直播DEMO時
奇怪....他對色彩的運用好順手啊!??
也就這麼引起我想好好的理解一下16進位!
而且即使我是做測試DEM也很不喜歡用 blue、yellow、red ... 基礎色彩名
除了很多字拼出來外,那實際的純色會讓我很不舒服(工作中的心情很重要的!)

試問:
誰可以一直盯著上圖看,覺得不眼花花的??/images/emoticon/emoticon06.gif/images/emoticon/emoticon06.gif/images/emoticon/emoticon06.gif


如果你們想問:「咦!但你不是學設計出身,怎麼網頁色彩都不知道?? 」
我只會告訴你:設計師誰管你網頁幾進位!我們只喜歡自己眼前看的色好嗎!平面設計稿都是CMYK(印刷色),如果活動要出網頁版的就是轉成RGB,用滴管吸出顏色!然後給網頁設計檔或前端工程師的~~~~....= =

好啦!反正我這回要來研究看看,到底那顏色有什麼邏輯性!

此學習目的:增強我的選色能力!
但要維持懶人風格不變:最簡單可重覆進位的色彩!
看網看了些資料~
先讀了RGB、HSL、Hex 網頁色彩碼,看完這篇全懂了
透過這張圖

再參考了色 碼 表
選出RGB最基本的三色!然後 上/下/左/右,延伸色彩代碼

打完此篇,再看完二圖比較心得:
我內心已竊笑啦。。。。。。。。/images/emoticon/emoticon39.gif

唷呵!好多~懶人用的進位色彩啊!/images/emoticon/emoticon39.gif

應該也有眼尖的人看出RGB向四方延伸!+ 無彩色的(F~0)色階,就可以產生出很多色!!


參考資料:

此篇分享給各位,跟我一樣想變化多一點RGB16進位的色彩朋友們,一起來研究學習


上一篇
[蛻變事實/D22] 設計師勇闖前端城-(無扣不成才,無錯不成鋼)
下一篇
[蛻變事實/D24] 設計師勇闖前端城-(懶得用腦:Google大神來顯靈)
系列文
蛻變事實-UI設計師勇闖前端城35

尚未有邦友留言

立即登入留言