網頁色彩知識匯集/學習 - Medium

在開始學網頁/CSS的過程中，常常會覺得配色很難練習的時候亂配一通，總覺得應該要好好學一下. “網頁色彩知識匯集/學習” is published by 張凱喬. GetunlimitedaccessOpeninappHomeNotificationsListsStoriesWrite網頁色彩知識匯集/學習在開始學網頁/CSS的過程中，常常會覺得配色很難練習的時候亂配一通，總覺得應該要好好學一下在這邊分享我所蒐集，從無到有的色彩觀念包含如何應用到網頁上，及一些設計實例色彩設計概念篇：為什麼我的配色亂七八糟？配色是設計師的強力工具。

它可以吸引觀眾的眼球、喚起情感，進而將訊息傳遞到受眾的腦海裡。

為了告訴你配色的重要性，我們援引了一篇名為TheImpactofColoronMarketing的文章，從中研究人員發現，高達90%…www.beforafter.org概念篇/集大成推薦使用K-I-S-S原理(KeepitSimple,stupid盡可能的簡單)。

首先，盡可能的讓顏色較少，考慮以下幾點：背景顏色主要色輔助色警告色成功色通常在設計網頁的時候，會建一個簡單的色票是網頁設計用來規範這個網站所使用的顏色如此一來可以讓這個網站的頁面具有一致性也能幫助瀏覽者的閱讀體驗更好一些色票的內容包含上述這些概念"背景顏色、主要色、輔助色、警告色、成功色"大概分成三類第一類背景色:你的網頁底色、跟主要區塊的顏色應相近不宜衝突(我覺得一開始練習網頁配色時，淺灰滿百搭的)第二類主色跟輔色:這會是你網站顏色搭配的成敗關鍵主色使用在頁面上包含重要區塊、按鈕、文字的顏色輔色使用在頁面上包含反白、副標題等等第三類則是一些功能顏色至少會包含正向顏色(成功、正確等)、負向顏色(失敗、警告等)參考https://www.websitebuilderexpert.com/how-to-choose-color-for-your-website/http://www.zcool.com.cn/article/ZMTQwNTY0.html連結裡也大致說明了如何挑選主色、副色喔再來就是如何挑選顏色了ColorTheoryforDesigners,Part1:TheMeaningofColorTherearefewthingsindesignthataremoresubjective-ormoreimportant-thantheuseofcolor.Acolorthatcanevoke…www.smashingmagazine.com最基本的，就是顏色會帶給你甚麼感覺不同的顏色會為你的網站帶給瀏覽者不同的感覺這也是一些色彩心理學理論相關的研究，可以參考ThePsychologyofColorinMarketingandBrandingThepsychologyofcolorasitrelatestopersuasionisoneofthemostinteresting-andmostcontroversial-aspects…www.helpscout.net但我認為，一開始接觸網頁設計時還不需要花太多時間研究色彩學只要參考幾個主流的配色、流行的網頁配色做出來的網頁應該就滿有質感2016年最優秀的20款網頁設計配色靈感來源-移動時代最優質的網頁設計公司GogoShark編者按：網頁設計領域的業界良心Awwwards除了每天推薦好網站，定期做評比之外，還會在博客裡面推薦各種網頁設計的技巧和總結，今天的這篇文章最初是源於一個探索性的項目，項目結果炫酷然而乍一看並沒有什麼卵用，不過，如果將這個項目同最近選…gogoshark.com(上面這篇的原文請參考下面連結，可以直接擷取顏色代碼)TrendyWebColorPalettesandMaterialDesignColorSchemes&ToolsAfewweeksago,MattDesLauriers@mattdesl,agraphicsprogrammerworkingatJam3,showedusaninteresting…www.awwwards.com接下來，發現網路上所建議的顏色參考不符合自己期待就可以開始自己動手建一個色票，但是對沒有顏色概念的人而言如何快速的建立對比色、鄰近色等多種配色的原則呢?AnIntroductiontoColorTheoryforWebDesignersTodaywe'regoingtolearntheimportanceofcolorinWebDesignandhowtochooseapleasingcolorscheme.This…webdesign.tutsplus.com配色宝典：教你制作一个给力的调色盘优秀网页设计联盟(SDC)，是有着良好职业交流氛围的网页设计行业联盟。

与优设哥、獠麝鸡、你丫才美工一起听讲座，聊设计。

联盟始终坚持开放、分享、成长的宗旨，为会员提供交流互动平台和网页设计讲座。

www.uisdc.com上列連結中，說明了一些配色常用的方式包含TriadicColorScheme、Analogous等簡單說明請參考色彩計畫：配色基本技巧PicturefromBasicColorSchemesforartist,illustrator,complementarycolorscheme.色輪色輪是配色的基本工具，通常包含三原色(primary…digitized-life.blogspot.tw基本上，都是運用色盤選取多種角度的顏色不同的方式、角度也都會產生不同效果例如三色式(也就是在色盤取三角形)正三角形的話色彩整體會比較平均頂角30%的等腰三角形，顏色對比效果比較強烈一些最後，談一些工具有些工具可以讓你很快找到自己的主副色透過隨機的挑選及建議，幫助你快速找到喜歡的配色hello-colorFunctionalcolorpalettegeneratorjxnblk.comPalettableGeneratecolorpalettesusingtheknowledgeofmillionsofdesigners.www.palettable.io也有完整的色票建議LOLColors-CuratedcolorpaletteinspirationSortingand"liking"colorpalettesistemporarilydisabledwhilewe'reexpandingthisresource.www.webdesignrankings.comColorionCuratedColorPaletteswithSearchandTagsSupportwww.colorion.co再來，進階的話就是自己操控色輪Paletton-TheColorSchemeDesignerInlovewithcolors,since2002.Adesignertoolforcreatingcolorcombinationsthatworktogetherwell.Formerly…paletton.comColorScheme-MonochromaticWellorganizedandeasytounderstandWebbuildingtutorialswithlotsofexamplesofhowtouseHTML,CSS,JavaScript…www.w3schools.com個人認為paletton跟w3school的工具都滿實用還能直接套用在範例網頁上，讓你看看布局配色的效果以上，繼續努力132Morefrom張凱喬Follow數位轉型Lovepodcastsoraudiobooks?Learnonthegowithournewapp.TryKnowableGetstarted張凱喬1.6KFollowers數位轉型FollowRelatedCreatingaCSSOnlyTooltipTocreateatooltipwithonlyCSS,wefirstneedtoisolatethetargettextintoitsownelement.Inthisexample,IwantthewordsHyper…Whoknew!?Aslikemypreviouspost,thisisaboutmyjourneyintocoding.However,unlikemylastpostIhavetosaythatIthinkIhavefoundmy…WhataretheframeworksavailableinCSSYouknow,CSShadlotaframworksCSSGrid:tableofcontentsHello.HereIgatherallthearticlespublishedsofarduringmyCSSGridseries.Ihopeyou’llfindhereeverythingyouneed😉HelpStatusWritersBlogCareersPrivacyTermsAboutKnowable