篇文章會記錄我們平時常用到的 CSS 片段，使用這些 CSS 可以幫助我們解決許多實際項目問題中遇到的，墻裂建議點贊收藏再看，方便日后查找

• 附筆記鏈接，閱讀往期更多優質文章可移步查看：前端筆記本

清除浮動

浮動給我們的代碼帶來的麻煩，想必不需要多說，我們會用很多方式來避免這種麻煩，其中我覺得最方便也是兼容性最好的一種是，在同級目錄下再創建一個<div style="clear:both;"></div>；不過這樣會增加很多無用的代碼。此時我們用:after這個偽元素來解決浮動的問題，如果當前層級有浮動元素，那么在其父級添加上 clearfix 類即可。

// 清除浮動
.clearfix:after {
  content: "\00A0";
  display: block;
  visibility: hidden;
  width: 0;
  height: 0;
  clear: both;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
}
.clearfix {
  zoom: 1;
}

垂直水平居中

在 css 的世界里水平居中比垂直居中來的簡單一些，經過了多年的演化，依然沒有好的方式來讓元素垂直居中(各種方式各有優缺點，但都不能達到兼容性好，破壞力小的目標)，以下是幾種常見的實現方式

絕對定位方式且已知寬高

position: absolute;
top: 50%;
left: 50%;
margin-top: -3em;
margin-left: -7em;
width: 14em;
height: 6em;

絕對定位 ＋ 未知寬高 ＋ translate

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
//需要補充瀏覽器前綴

flex 輕松搞定水平垂直居中(未知寬高)

display: flex;
align-items: center;
justify-content: center;

文本末尾添加省略號

當文本的內容超出容器的寬度的時候，我們希望在其默認添加省略號以達到提示用戶內容省略顯示的效果。

寬度固定，適合單行顯示...

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

寬度不固定，適合多行以及移動端顯示

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

制造文本的模糊效果

當我們希望給文本制造一種模糊效果感覺的時候，可以這樣做

color: transparent;
text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);

動畫實現簡潔 loading 效果

我們來實現一個非常簡潔的 loading 效果

.loading:after {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  content: "\2026";
  -webkit-animation: ellipsis 2s infinite;
}

// 動畫部分
@-webkit-keyframes ellipsis {
  from {
    width: 2px;
  }
  to {
    width: 15px;
  }
}

自定義文本選中樣式

默認情況下，我們在網頁上選中文字的時候，會給選中的部分一個深藍色背景顏色(可以自己拿起鼠標試試)，如果我們想自己定制被選中的部分的樣式呢？

// 注意只能修改這兩個屬性 字體顏色 選中背景顏色

element::selection {
  color: green;
  background-color: pink;
}
element::-moz-selection {
  color: green;
  background-color: pink;
}

頂角貼紙效果

有時候我們會有這樣的需求，在一個列表展示頁面，有一些列表項是新添加的、或者熱度比較高的，就會要求在其上面添加一個貼紙效果的小條就像 hexo 默認博客的 fork me on github 那個效果一樣。

接下來我們開始一步步完成最左邊的這個效果

html

<div class="wrap">
  <div class="ribbon">
    <a href="#">Fork me on GitHub</a>
  </div>
</div>

css

/* 外層容器幾本設置  */
.wrap {
  width: 160px;
  height: 160px;
  overflow: hidden;
  position: relative;
  background-color: #f3f3f3;
}

.ribbon {
  background-color: #a00;
  overflow: hidden;
  white-space: nowrap;
  position: absolute;
  /* shadom */
  -webkit-box-shadow: 0 0 10px #888;
  -moz-box-shadow: 0 0 10px #888;
  box-shadow: 0 0 10px #888;
  /* rotate */
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  /* position */
  left: -50px;
  top: 40px;
}

.ribbon a {
  border: 1px solid #faa;
  color: #fff;
  display: block;
  font: bold 81.25% "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: 1px 0;
  padding: 10px 50px;
  text-align: center;
  text-decoration: none;
  /* shadow */
  text-shadow: 0 0 5px #444;
}

input 占位符

當我們給部分 input 類型的設置 placeholder 屬性的時候，有的時候需要修改其默認的樣式。

input::-webkit-input-placeholder {
  color: green;
  background-color: #f9f7f7;
  font-size: 14px;
}
input::-moz-input-placeholder {
  color: green;
  background-color: #f9f7f7;
  font-size: 14px;
}
input::-ms-input-placeholder {
  color: green;
  background-color: #f9f7f7;
  font-size: 14px;
}

移動端可點擊元素去除默認邊框

在移動端瀏覽器上，當你點擊一個鏈接或者通過 Javascript 定義的可點擊元素的時候，會出現藍色邊框，說實話，這是很惡心的，怎么去掉呢?

-webkit-tap-highlight-color: rgba(255, 255, 255, 0);

首字下沉

要實現類似 word 中首字下沉的效果可以使用以下代碼

element:first-letter {
  float: left;
  color: green;
  font-size: 30px;
}

小三角

在很多地方我們可以用得上小三角，接下來我們畫一下四個方向的三角形

.triangle {
  /* 基礎樣式 */
  border: solid 10px transparent;
}
/*下*/
.triangle.bottom {
  border-top-color: green;
}
/*上*/
.triangle.top {
  border-bottom-color: green;
}
/*左*/
.triangle.top {
  border-right-color: green;
}
/*右*/
.triangle.top {
  border-left-color: green;
}

可以看出畫一個小三角非常簡單，只要兩行樣式就可以搞定，對于方向只要想著畫哪個方向則設置反方向的樣式屬性就可以

鼠標手型

一般情況下，我們希望在以下元素身上添加鼠標手型

• a
• submit
• input[type="iamge"]
• input[type="button"]
• button
• label
• select

a[href],
input[type="submit"],
input[type="image"],
input[type="button"],
label[for],
select,
button {
  cursor: pointer;
}

屏蔽 Webkit 移動瀏覽器中元素高亮效果

在訪問移動網站時，你會發現，在選中的元素周圍會出現一些灰色的框框，使用以下代碼屏蔽這種樣式

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

移除常用標簽的瀏覽器默認的 margin 和 padding

pre、code、legend、fieldset、blockquote … 等標簽不是很常用，所以就不一一列舉，如果項目中使用到，可以自己單獨寫

body,
p,
h1,
h2,
h3,
h4,
h5,
h6,
dl,
dd,
ul,
ol,
th,
td,
button,
figure,
input,
textarea,
form {
  margin: 0;
  padding: 0;
}

統一 input、select、textarea 寬度

不同瀏覽器的 input、select、textarea 的盒子模型寬度計算方式不同，統一為最常見的 content-box

input,
select,
textarea {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

table {
  /*table 相鄰單元格的邊框間的距離設置為 0*/
  border-spacing: 0;
  /*默認情況下給 tr 設置 border 沒有效果，如果 table 設置了邊框為合并模式：「border-collapse: collapse;」就可以了*/
  border-collapse: collapse;
}

移除瀏覽器部分元素的默認邊框

acronym、fieldset … 等其他標簽不是很常用，就不會一一列舉；如果項目中用到，可以自己單獨寫

img,
input,
button,
textarea {
  border: none;
  -webkit-appearance: none;
}

input {
  /*由于 input 默認不繼承父元素的居中樣式，所以設置：「text-align: inherit」*/
  text-align: inherit;
}

textarea {
  /*textarea 默認不可以放縮*/
  resize: none;
}

取消元素 outline 樣式

由于以下元素的部分屬性沒有繼承父節點樣式，所以聲明這些元素的這些屬性為父元素的屬性

a,
h1,
h2,
h3,
h4,
h5,
h6,
input,
select,
button,
option,
textarea,
optgroup {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-style: inherit;
  line-height: inherit;
  color: inherit;
  outline: none;
}

取消超鏈接元素的默認文字裝飾

另外 del、ins 標簽的中劃線、下劃線還是挺好的，就不去掉

a {
  text-decoration: none;
}

ol,
ul {
  /*開發中 UI 設計的列表都是和原生的樣式差太多，所以直接給取消 ol，ul 默認列表樣式*/
  list-style: none;
}

button,
input[type="submit"],
input[type="button"] {
  /*鼠標經過是「小手」形狀表示可點擊*/
  cursor: pointer;
}

input::-moz-focus-inner {
  /*取消火狐瀏覽器部分版本 input 聚焦時默認的「padding、border」*/
  padding: 0;
  border: 0;
}

取消部分瀏覽器數字輸入控件的操作按鈕

input[type="number"] {
  -moz-appearance: textfield;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

輸入控件 placeholder 色設置 #999

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #999;
}

input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #999;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
  color: #999;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #999;
}

template {
  /*由于部分瀏覽 template 會顯示出來，所以要隱*/
  display: none;
}

position: fixed 的縮寫

.pf {
  position: fixed;
  /*chrome 內核 瀏覽器 position: fixed 防止抖動*/
  -webkit-transform: translateZ(0);
}

利用絕對定位寬高拉升原理，中心居中元素

.middle {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

利用相對定位于 CSS3 使元素垂直居中

.v-middle {
  position: relative;
  top: 50%;
  -webkit-transform: -webkit-translateY(-50%);
  -moz-transform: -moz-translateY(-50%);
  -o-transform: -o-translateY(-50%);
  transform: translateY(-50%);
}

元素計算寬高的盒子模型以 border 為外界限「bb==> border-box」

.bb {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

單行文本溢出顯示省略號「to==> text-overflow」

.to {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

初始化樣式

不同的瀏覽器對各個標簽默認的樣式是不一樣的，而且有時候我們也不想使用瀏覽器給出的默認樣式，我們就可以用 reset.css 去掉其默認樣式

body,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
blockquote,
dl,
dt,
dd,
ul,
ol,
li,
pre,
form,
fieldset,
legend,
button,
input,
textarea,
th,
td {
  margin: 0;
  padding: 0;
}
body,
button,
input,
select,
textarea {
  font: 12px/1.5 tahoma, arial, \5b8b\4f53;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
}
address,
cite,
dfn,
em,
var {
  font-style: normal;
}
code,
kbd,
pre,
samp {
  font-family: couriernew, courier, monospace;
}
small {
  font-size: 12px;
}
ul,
ol {
  list-style: none;
}
a {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
sup {
  vertical-align: text-top;
}
sub {
  vertical-align: text-bottom;
}
legend {
  color: #000;
}
fieldset,
img {
  border: 0;
}
button,
input,
select,
textarea {
  font-size: 100%;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

強制換行/自動換行/強制不換行

/* 強制不換行 */
div {
  white-space: nowrap;
}

/* 自動換行 */
div {
  word-wrap: break-word;
  word-break: normal;
}

/* 強制英文單詞斷行 */
div {
  word-break: break-all;
}

table 邊界的樣式

table {
  border: 1px solid #000;
  padding: 0;
  border-collapse: collapse;
  table-layout: fixed;
  margin-top: 10px;
}
table td {
  height: 30px;
  border: 1px solid #000;
  background: #fff;
  font-size: 15px;
  padding: 3px 3px 3px 8px;
  color: #000;
  width: 160px;
}

絕對定位與 margin

當我們提前知道要居中元素的長度和寬度時，可以使用這種方式：

.container {
  position: relative;
  width: 300px;
  height: 200px;
  border: 1px solid #333333;
}
.content {
  background-color: #ccc;
  width: 160px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -80px; /* 寬度的一半 */
  margin-top: -50px; /* 高度的一半 */
}

絕對定位與 transform

當要居中的元素不定寬和定高時，我們可以使用 transform 來讓元素進行偏移。

.container {
  position: relative;
  width: 300px;
  height: 200px;
  border: 1px solid #333333;
}
.content {
  background-color: #ccc;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  text-align: center;
}

line-height

line-height其實是行高，我們可以用行高來調整布局！

不過這個方案有一個比較大的缺點是：文案必須是單行的，多行的話，設置的行高就會有問題。

.container {
  width: 300px;
  height: 200px;
  border: 1px solid #333333;
}
.content {
  line-height: 200px;
}

table 布局

給容器元素設置display: table，當前元素設置display: table-cell：

.container {
  width: 300px;
  height: 200px;
  border: 1px solid #333333;
  display: table;
}
.content {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

flex 布局

我們可以給父級元素設置為display: flex，利用 flex 中的align-items和justify-content設置垂直方向和水平方向的居中。這種方式也不限制中間元素的寬度和高度。

同時，flex 布局也能替換line-height方案在某些 Android 機型中文字不居中的問題。

.container {
  width: 300px;
  height: 200px;
  border: 1px solid #333333;
  display: flex;
  align-items: center;
  justify-content: center;
}
.content {
  background-color: #ccc;
  text-align: center;
}

圖片上下左右居中

一種常用的方式是把外層的 div 設置為 table-cell；然后讓內部的元素上下左右居中。當然也還有一種方式，就是把 img 當做 div，參考 6 中的代碼進行設置。CSS 代碼如下：

.content {
  width: 400px;
  height: 400px;
  border: 1px solid #ccc;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}

html 代碼如下：

<div class="content">
  <img src="./4.jpg" alt="img" />
</div>

標題兩邊的小橫杠

我們經常會遇到這樣的 UI 需求，就是標題兩邊有兩個小橫崗，之前是怎么實現的呢？比如用個border-top屬性，然后再把中間的文字進行絕對定位，同時給這個文字一個背景顏色，把中間的這部分蓋住。

現在我們可以使用偽元素來實現！

<div class="title">標題</div>
title {
  color: #e1767c;
  font-size: 0.3rem;
  position: relative;

  &:before,
  &:after {
    content: "";
    position: absolute;
    display: block;
    left: 50%;
    top: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    border-top: 0.02rem solid #e1767c;
    width: 0.4rem;
  }
  &:before {
    margin-left: -1.2rem;
  }
  &:after {
    margin-left: 1.2rem;
  }
}

用 border 屬性繪制元素

border 除了作為簡單的繪制邊框以外，還可以繪制三角形，梯形，星形等任意的多邊形，以下為繪制的兩個三角形和梯形

<div class="triangle1"></div>
<div class="triangle2"></div>
<div class="trapezoid"></div>
.triangle1 {
  /*銳角三角形*/
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-bottom: 100px solid #249ff1;
  border-left: 30px solid transparent;
  border-right: 100px solid transparent;
}
.triangle2 {
  /*直角三角形*/
  width: 0;
  height: 0;
  border-top: 80px solid transparent;
  border-bottom: 80px solid #ff5b01;
  border-left: 50px solid #ff5b01;
  border-right: 50px solid transparent;
}
.trapezoid {
  /*梯形*/
  width: 0;
  height: 0;
  border-top: none;
  border-right: 80px solid transparent;
  border-bottom: 60px solid #13dbed;
  border-left: 80px solid #13dbed;
}

用 border-radius 繪制元素

border-radius主要用于繪制圓點、圓形、橢圓、圓角矩形等形狀，以下為簡單繪制的兩個圖形。

<div class="circle"></div>
<div class="ellipse"><div></div></div>
.circle,
.ellipse {
  width: 100px;
  height: 100px;
  background: #249ff1;
  border-radius: 50%;
}
.ellipse {
  width: 150px;
  background: #ff9e01;
}

但border-radius屬性實際上可以設置最多 8 個值，通過改變 8 個值可以得到許多意想不到的圖像

用 box-shadow 繪制元素

對于box-shadow，其完整的聲明為box-shadow: h-shadow v-shadow blur spread color inset,各個值表示的意義分別為：s 水平方向的偏移，垂直方向的偏移，模糊的距離（羽化值），陰影的大小（不設置或為 0 時陰影與主體的大小一致），陰影的顏色和是否使用內陰影。實際應用時可以接收 3-6 個值，對應分別如下：

• 3 個值： h-shadow v-shadow color
• 4 個值： h-shadow v-shadow blur color
• 5 個值： h-shadow v-shadow blur spread color
• 6 個值： h-shadow v-shadow blur spread color inset

同時，border-shadow接受由多個以上各種值組成的以逗號分隔的值，通過這一特性，我們可以實現如多重邊框的等效果。以下我們用該屬性來實現一個單標簽且不借助偽元素的添加圖標和代表目標的的圖標。

<div class="plus"></div>
<div class="target"></div>
.plus {
  width: 30px;
  height: 30px;
  margin-left: 50px; /*由于box-shadow不占空間，常常需要添加margin來校正位置*/
  background: #000;
  box-shadow: 0 -30px 0 red, 0 30px 0 red, -30px 0 0 red, 30px 0 0 red;
}
.target {
  width: 30px;
  height: 30px;
  background: red;
  border-radius: 50%;
  margin-left: 50px;
  box-shadow: 0 0 0 10px #fff, 0 0 0 20px red, 0 0 0 30px #fff, 0 0 0 40px red;
}

使用 CSS 漸變來繪制圖標

CSS3 的漸變屬性十分強大，理論上通過漸變可以繪制出任何的圖形，漸變的特性和使用足足可以寫一篇長文，以下為一個例子

<div class="gradient"></div>
.gradient {
  position: relative;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background-color: silver;
  background-image: linear-gradient(335deg, #b00 23px, transparent 23px),
    linear-gradient(155deg, #d00 23px, transparent 23px), linear-gradient(
      335deg,
      #b00 23px,
      transparent 23px
    ), linear-gradient(155deg, #d00 23px, transparent 23px);
  background-size: 58px 58px;
  background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;
}

• 杯子

.cup {
  display: inline-block;
  width: 0.9em;
  height: 0.4em;
  border: 0.25em solid;
  border-bottom: 1.1em solid;
  border-radius: 0 0 0.25em 0.25em;
}
cup:before {
  position: absolute;
  right: -0.6em;
  top: 0;
  width: 0.3em;
  height: 0.8em;
  border: 0.25em solid;
  border-left: none;
  border-radius: 0 0.25em 0.25em 0;
  content: "";
}

• 心形

.heart {
  display: inline-block;
  margin-top: 1.5em;
  width: 50px;
  height: 50px;
  background: green;
}
.heart:before,
.heart:after {
  position: absolute;
  width: 1em;
  height: 1.6em;
  background: #000;
  border-radius: 50% 50% 0 0;
  content: "";
  bottom: 0;
}
.heart:before {
  -webkit-transform: rotate(45deg);
  -webkit-transform-origin: 100% 100%;
  right: 0;
  background: red;
  opacity: 0.5;
  z-index: 5;
}
.:after {
  -webkit-transform: rotate(-45deg);
  -webkit-transform-origin: 0 100%;
  left: 0;
  opacity: 0.8;
}

• 相機

.camera {
  display: inline-block;
  border-style: solid;
  border-width: 0.65em 0.9em;
  border-radius: 0.1em;
}
.camera:before {
  position: absolute;
  top: -0.3em;
  left: -0.3em;
  width: 0.4em;
  height: 0.4em;
  border-radius: 50%;
  border: 0.1em solid #fff;
  box-shadow: 0 0 0 0.08em, 0 0 0 0.16em #fff;
  content: "";
}
.camera:after {
  position: absolute;
  top: -0.5em;
  left: 0.5em;
  width: 0.2em;
  border-top: 0.125em solid #fff;
  content: "";
}

• 月亮

.moon {
  display: inline-block;
  height: 1.5em;
  width: 1.5em;
  box-shadow: inset -0.4em 0 0;
  border-radius: 2em;
  transform: rotate(20deg);
}

浮動類

常規浮動 list 浮動 image 浮動

.float-left {
  float: left;
}
.float-right {
  float: right;
}
.float-li li,/*定義到li父元素或祖先元素上*/ li.float-li {
  float: left;
}
.float-img img,/*定義到img父元素或祖先元素上*/ img.float-li {
  float: left;
}
.float-span span,/*定義到span父元素或祖先元素上*/ span.float-span {
  float: right;
}

背景圖片嵌入與定位

.bg-img {
  background-image: url("../img/bg.png");
  background-position: center top;
  background-repeat: no-repeat;
}
.bg01-img {
  background-image: url("../img/bg01.png");
  background-position: center top;
  background-repeat: no-repeat;
}
.bg02-img {
  background-image: url("../img/bg02.png");
  background-position: center top;
  background-repeat: no-repeat;
}
.bg03-img {
  background-image: url("../img/bg03.png");
  background-position: center top;
  background-repeat: no-repeat;
}
.bg04-img {
  background-image: url("../img/bg04.png");
  background-position: center top;
  background-repeat: no-repeat;
}

繼承類

.inherit-width {
  width: inherit;
}
.inherit-min-width {
  min-width: inherit;
}
.inherit-height {
  height: inherit;
}
.inherit-min-height {
  min-height: inherit;
}
.inherit-color {
  color: inherit;
}

文本縮進

.text-indent {
  text-indent: 2rem;
}
/*16px*/
.text-indent-xs {
  text-indent: 1.5rem;
}
/*12px*/
.text-indent-sm {
  text-indent: 1.7rem;
}
/*14px*/
.text-indent-md {
  text-indent: 2rem;
}
/*18px*/
.text-indent-lg {
  text-indent: 2.4rem;
}
/*20px*/

行高

.line-height-xs {
  line-height: 1.3rem;
}
.line-height-sm {
  line-height: 1.5rem;
}
.line-height-md {
  line-height: 1.7rem;
}
.line-height-lg {
  line-height: 2rem;
}

.line-height-25x {
  line-height: 25px;
}
.line-height-30x {
  line-height: 30px;
}

ul 縮進

.ul-indent-xs {
  margin-left: 0.5rem;
}
.ul-indent-sm {
  margin-left: 1rem;
}
.ul-indent-md {
  margin-left: 1.5rem;
}
.ul-indent-lg {
  margin-left: 2rem;
}
.ol-list,
.ul-list {
  list-style: disc;
}

文本截斷

.truncate {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hide {
  display: none;
}

圖片、視頻規范

.img-max,
.video-max {
  width: 100%;
  height: auto;
}
/*display顯示方式*/
.inline {
  display: inline;
}
.inline-block {
  display: inline-block;
}
.block {
  display: block;
}

邊框樣式

.border-xs-black {
  border: 1px solid #000;
}
.border-sm-black {
  border: 2px solid #000;
}
.border-md-black {
  border: 3px solid #000;
}
.border-lg-black {
  border: 5px solid #000;
}

.border-xs-gray {
  border: 1px solid #9c9c9c;
}
.border-sm-gray {
  border: 2px solid #9c9c9c;
}
.border-md-gray {
  border: 3px solid #9c9c9c;
}
.border-lg-gray {
  border: 5px solid #9c9c9c;
}

背景顏色

.bg-white {
  background: #fff !important;
}
.bg-black {
  background: #1b1c1d !important;
}
.bg-gray {
  background: #767676 !important;
}
.bg-light-gray {
  background: #f8f7f7 !important;
}
.bg-yellow {
  background: #fbbd08 !important;
}
.bg-orange {
  background: #f2711c !important;
}
.bg-red {
  background: #db2828 !important;
}
.bg-olive {
  background: #b5cc18 !important;
}
.bg-green {
  background: #21ba45 !important;
}
.bg-teal {
  background: #00b5ad !important;
}
.bg-darkGreen {
  background: #19a97b !important;
}
.bg-threeGreen {
  background: #097c25 !important;
}
.bg-blue {
  background: #2185d0 !important;
}
.bg-violet {
  background: #6435c9 !important;
}
.bg-purple {
  background: #a333c8 !important;
}
.bg-brown {
  background: #a5673f !important;
}

分割線預設

hr,
.hr-xs-Silver,
.hr-sm-black,
.hr-sm-Silver,
.hr-xs-gray,
.hr-sm-gray {
  margin: 20px 0;
}
hr {
  border: none;
  border-top: 1px solid #000;
}
.hr-xs-Silver {
  border: none;
  border-top: 1px solid #c0c0c0;
}
.hr-sm-black {
  border: none;
  border-top: 2px solid #000;
}
.hr-sm-Silver {
  border: none;
  border-top: 2px solid #c0c0c0;
}
.hr-xs-gray {
  border: none;
  border-top: 1px solid #767676;
}
.hr-sm-gray {
  border: none;
  border-top: 2px solid #767676;
}

鼠標 a 標簽 hover 效果

.hover-red a:hover,/*為a標簽祖先元素添加類名 默認無智能提醒*/ a.hover-red:hover {
  color: red;
} /*單獨為a標簽添加類名*/
.hover-yellow a:hover,/*為a標簽祖先元素添加類名 默認無智能提醒*/ a.hover-yellow:hover {
  color: #ffd700;
} /*單獨為a標簽添加類名*/
.hover-green a:hover,/*為a標簽祖先元素添加類名 默認無智能提醒*/ a.hover-green:hover {
  color: #70aa39;
} /*單獨為a標簽添加類名*/
.hover-blue a:hover,/*為a標簽祖先元素添加類名 默認無智能提醒*/ a.hover-blue:hover {
  color: blue;
} /*單獨為a標簽添加類名*/
.hover-gray a:hover,/*為a標簽祖先元素添加類名 默認無智能提醒*/ a.hover-gray:hover {
  color: #9c9c9c;
} /*單獨為a標簽添加類名*/
.underline a:hover,
a.underline:hover {
  text-decoration: underline;
}

陰影效果

.shadow-text-xs {
  text-shadow: 4px 3px 0 #1d9d74, 9px 8px 0 rgba(0, 0, 0, 0.15);
} /*智能兼容ie10以上 暫不考慮*/

.shadow-xs {
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=100, Color='#cccccc')"; /* For IE 8 */
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=100, Color='#cccccc'); /* For IE 5.5 - 7 */
  -moz-box-shadow: 1px 1px 2px #cccccc; /* for firefox */
  -webkit-box-shadow: 1px 1px 2px #cccccc; /* for safari or chrome */
  box-shadow: 1px 1px 2px #cccccc; /* for opera or ie9 */
}
.shadow-sm {
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=120, Color='#cccccc')"; /* For IE 8 */
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=120, Color='#cccccc'); /* For IE 5.5 - 7 */
  -moz-box-shadow: 2px 2px 3px #cccccc; /* for firefox */
  -webkit-box-shadow: 2px 2px 3px #cccccc; /* for safari or chrome */
  box-shadow: 2px 2px 3px #cccccc; /* for opera or ie9 */
}
.shadow-md {
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#cccccc')"; /* For IE 8 */
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#cccccc'); /* For IE 5.5 - 7 */
  -moz-box-shadow: 3px 3px 5px #cccccc; /* for firefox */
  -webkit-box-shadow: 3px 3px 5px #cccccc; /* for safari or chrome */
  box-shadow: 3px 3px 5px #cccccc; /* for opera or ie9 */
}
.shadow-lg {
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=150, Color='#cccccc')"; /* For IE 8 */
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=150, Color='#cccccc'); /* For IE 5.5 - 7 */
  -moz-box-shadow: 5px 5px 8px #cccccc; /* for firefox */
  -webkit-box-shadow: 5px 5px 8px #cccccc; /* for safari or chrome */
  box-shadow: 5px 5px 8px #cccccc; /* for opera or ie9 */
}

圓角

.border-radius-xs {
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}
.border-radius-sm {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
.border-radius-md {
  -webkit-border-radius: 7px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
.border-radius-lg {
  -webkit-border-radius: 9px;
  -moz-border-radius: 9px;
  border-radius: 9px;
}

.border-radius-xs {
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}
.border-radius-sm {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
.border-radius-md {
  -webkit-border-radius: 7px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
.border-radius-lg {
  -webkit-border-radius: 9px;
  -moz-border-radius: 9px;
  border-radius: 9px;
}

如果文章和筆記能帶您一絲幫助或者啟發，請不要吝嗇你的贊和收藏，你的肯定是我前進的最大動力

日常設計中，色彩這個元素是不容忽視的，它可以說是除了形狀和字體之外，最能表達氛圍的一項要素了，好的色彩設計甚至可以傳達出一個品牌的狀態、情緒等內容。這篇文章里，作者就梳理了一份色彩設計指南，一起來看一下。

我們都知道，在我們的日常設計中的五要素是“形、色、字、構、質”，這五個部分的內容緊密相連，構成一整個產品的設計體系。其中，色彩更是我們設計時候特別重要的內容，是除了形狀和字體之外，最能表達一個差評氛圍的一項要素。

好的色彩設計，我們通?？梢酝ㄟ^品牌色感受一個品牌產品的狀態、情緒、情感，以及要表達的精神內容。

色彩還是一項特別好做品牌區分或行業劃分的要素，因此我們在市場上才能看到不同品牌的配色不一樣，比如偏商務的、科技的公司會用冷色調（比如騰訊、Facebook），餐飲方向的公司喜歡用暖色調（比如美團、大眾點評、麥當勞），健康行業的公司喜歡用綠色系（比如說國藥、泰康人壽），這都是因為人面對色彩體系具有先入為主的認知。當然這也不完全是唯一恒定的，比如一個餐飲行業，他們是做健康餐的，那極有可能會把品牌色設定為綠色系。

除此之外，人的年齡差異、興趣愛好差異、性別差異、習性差異，都可能對同一種顏色的感受不一樣，這就是為什么有的人喜歡藍色、有的人喜歡綠色、有的人喜歡黃色，因此很多大廠在產品初始的時候都會調研目標用戶的色彩趨向

但，好的色彩往往不是隨意為之的，而是設計師通過心理研究、用戶調研等方式最終確定的，這就需要我們具有比較完善的設計體系理論。

一、色彩基礎內容

大部分設計師在初入行業的時候，設計都是純靠自己天生的色感，但是不一定所有人的色感都是高級的，因此我們需要學會一些基礎的色彩內容，了解不同的色彩邏輯的關系是怎么樣的，這樣更有助于我們去做色彩設計

人類看到色彩是由光產生的反射所覺得的，而不同的波長的光射線就產生了不同的顏色，這里包含有單色及混色，如果光足夠純凈，那我們看到的顏色都是單色的。

不過從現實中來說，人類看到的光普射線波長都是混合的，這也是為什么我們除了七彩虹的單色外，還能看到其他混合的顏色。

*圖片來自網絡

當光的反射彌散值超過了一定的數值，我們看到的就是白色，反之，如果一個物體無法反射光，那我們看到這個物體可能就是黑色。

1. 什么是三原色

三原色的劃分有2種邏輯，分別是美術三原色：紅（品紅）黃藍（青）；光學三原色紅綠藍。

2. 什么是色相、飽和度、明度

色相、飽和度、明度合并成為色彩三要素，我們在設計的時候基本都需要考慮這三個維度的組合來取設定我們的顏色色值。

色相：指的是顏色本身，比如紅色、藍色、綠色，比如下圖的色組。

飽和度：也稱為純度，飽和度是一個混灰多與少的問題，混灰越多，飽和度則月底，如果不混則越高。

明度：也稱為亮度，明度與飽和度類似，但明度是混白或黑多與少的邏輯，以標準色作為明度最高的標準，混黑越多明度越低，混白越多顏色越淡，屬于雙向邏輯。

3. 什么是色值

在rgb模式下，通過十六進制轉換而成的顏色數值（簡稱Hex），數值轉換一般通過專業的設計軟件或者一些在線轉換的小工具來進行實現。

4. 什么是色彩模式

色彩模式是我們常再軟件中并且選擇的具體模式，一般包含有Hex、RGB、CMYK、HSB。在使用的過程中也有區分，下面對每種模式進行項系數說明：

*圖片來自網絡

Hex（Hexadecimal）：在設計和顏色表示中通常指的是十六進制顏色值，也稱為 Hex Code。Hex Code 是一種用于表示 RGB（紅綠藍）顏色的方式，通過六個十六進制數字來描述顏色的深淺和純度。

RGB（Red、Green、Blue）：RGB就比較好理解了，一般來說與CMYK對應，RGB 是最常用的顏色模型之一，廣泛用于數字圖像、電腦顯示器、攝影和許多其他領域。

sRGB（標準紅綠藍）是一種用于顯示器、相機和互聯網圖像的標準 RGB 顏色空間。它是一種廣泛采用的顏色標準，旨在確保在不同設備和平臺上顯示的顏色保持一致性。

CMYK（Cyan、Magenta、Yellow、Black）：CMYK 是一種顏色模型，其名稱代表著青色（Cyan）、品紅色（Magenta）、黃色（Yellow）、黑色（Key/Keyline）這四種顏色。CMYK 被廣泛用于印刷行業，特別是在創建彩色印刷品時，如雜志、海報、包裝等。

在 CMYK 模型中，每個顏色通道的值通常以百分比表示，表示每種顏色的濃度。由于這種顏色模型是通過混合顏色的方式來創建其他顏色的，因此使用 CMYK 能夠模擬出廣泛的顏色。黑色通道被添加，是因為在實際印刷中，使用純粹的 CMY 無法完全產生深度和真實感，而加入黑色通道可以增強深度和對比度。

HSB/HSV（色調、飽和度、亮度）：是一種顏色模型，它以人類感知顏色的方式來表示顏色。HSB 模型常用于圖形設計、圖像處理和其他創意領域，因為它更直觀地反映了顏色的特性。HSL與HSB屬于同一種模式，唯一的差異是軸線的差異。

5. 什么是色系

色系，可以理解為顏色系列，屬于色相的擴展說法，色系往往是以一整組的方式進行設計或者出現在大家眼前。

我們常說的色系有暖色系和冷色系，這個是以人類對于顏色感知的溫度來劃分的， 在色環中，以綠和紫色兩個中性色為界，紅、橙、黃等為暖色，綠、藍綠、藍等為冷色。

但在實際應用中，設計師會根據自己設計的內容去定義一些色系名稱，比如藍色系（冷色系），設計師一般會意義為海洋色系；綠色系，設計師會定義為森色系；再比如粉色系，通常會明明為芭比粉，這些命名的方式都是營銷者為了讓用戶更加具象直觀的認知所定義的，在色彩學中，并沒有這些說法。

*圖片來自網絡

6. 什么是色環

色環又稱色輪、色圈，是將可見光區域的顏色以環形的方式來進行展示，是色彩設計應用的常用工具，最基礎的色環會包含12種不同的顏色。但在實際設計中，設計師會根據實際的色彩應用擴展為24色環或者36色環。

7. 什么是互補色

簡單來說就是2組顏色混合后產生非色彩的顏色（中性灰）的顏色就為互補色，互補色包含于對比色。

從色環的邏輯來說，180°直線對著的2組顏色即為互補色，但由于不同顏色系統的組成方式不同，所以我們在CMYK（消減性補色）和RGB（疊加性補色）下會產生不同的對比色邏輯，大致如下：

互補色，分為疊加性補色和消減性補色，這個比較好理解，我們可以直接理解為疊加性為RGB模式消減性為CMYK即可，RGB中，如果2種顏色RGB值相加255，那么即為互補色。

8. 什么是對比色

在色環中，跨度在120°-179°的顏色都可以稱為對比色 。

9. 什么是中差色

中差色介于鄰近色和對比色之間，在色環上互為90°的顏色，中差色組對比明確，在基準色和鄰近色不夠區分的時候，就可以考慮使用中差色來進行設計，加強色感的明確性。

10. 什么是鄰近色

鄰近色即為在色環中相鄰較近的顏色，一般色環在60°左右的兩個顏色可以定義為鄰近色，比如藍色和綠色，黃色和橙色。

11. 什么是類似色

類似色與鄰近色比較接近，但是類似色的區間比鄰近色小，一般在色環的30度左右的兩個顏色可以定義為類似色，比如橘黃色和黃色，藍綠色和藍色。

12. 什么是撞色

撞色是設計表達的一種命名方式，一般指2種有沖突的顏色，比如紅色和綠色，紅色和藍色?；谶@個概念就比較好理解了，也就是說我們常說的對比色或者互補色都可以定義為撞色邏輯。

13. 什么是混合色

混合色是基于三原色的原則下提出的色彩概念，也就是兩兩混合而成的第三種顏色，比如紅色+黃色會變成橙色，黃色+藍色會變成綠色。在設計的時候，混合色一般用來做過渡性的色彩搭配輔助。

二、色彩的情緒

色彩情緒是指，人面看到顏色時產生的情感或情緒沖動，這份情緒是由于不同頻率的色彩產生的光信息經過眼睛傳遞到大腦后產生的聯想思考結果，是從外在到內在，從生理到心理的轉換聯想的結果。

從理論上來說，同一個地區的不同的人對同一種顏色產生的情緒都會有微妙的差異，但總體來說是一致的，差異就是在于情緒產生的程度，色彩情緒會受我們從小到大的環境所影響，從而產生不同人對于同一種顏色有較大的認知差異。

比如是常年住在樹木很多的地方，自然會更喜歡綠色，而從小在海邊長大的孩子則會更喜歡藍色，這個是因為長久的環境影響對大腦反射的影響產生的情感差異，但大家對于色彩的情緒反饋大致是一樣的。

不同的顏色代表不同的情緒反饋

1）紅色

紅色是血液的顏色，給人的感覺往往是熱辣的，使人情緒高漲，變得激動。紅色在所有的光譜中是頻率最低的，是膨脹的。在設計中，切忌大面積的使用紅色，除非你對顏色的應用很有經驗，不然容易引起視覺疲勞。

*圖片來自網絡

2）黃色

太陽的顏色，給人溫暖、輝煌、燦爛的情緒感受。如果在設計中使用黃色，說明了這個品牌具有較高的自信，是一個正能量的企業。但黃色切忌與白色進行重疊，容易造成輪廓不清晰而影響內容的識別度。黃色作為金色的輔助顏色，在設計使用上也是比較百搭的。

*圖片來自網絡

3）藍色

天空和大海的顏色都是藍色，藍色是冷色調，給人一種冷靜、向內的情緒感受。同時，藍色也是一種科技、商務的色彩，大多的商業化品牌都喜歡使用藍色作為主色調，比如騰訊、Facebook等大廠。

*圖片來自網絡

4）綠色

大自然的顏色，綠色給人一種清新、舒服的的感覺。屬于中性色，既沒有黃色的明艷，也不具備藍色的深邃，給人一種安全感的情緒價值。市場上大多的健康類品牌會選擇綠色作為主色調。但正因為綠色屬于中性色，因此在設計時需要拿捏得比較到位，才能設計出高級個感。

*圖片來自網絡

5）橙色

橙色與黃色同屬于太陽的顏色，但卻相比黃色弱了幾分。橙色是由黃色和紅色混合而成的顏色，所以橙色的應用選擇需要選擇偏黃的一些，這樣會給人一種自然的舒服感，如果橙色太深則具有“”焦“”感，讓設計看起來沒有那么年輕。

*圖片來自網絡

6）紫色

紫色具有一定的“魅”感，是一種比藍色還要深邃的顏色，給人的感覺是一種邪魅、深邃、妖嬈的感覺。因此在設計的時候為了讓紫色更好的表達，可以考慮適當加一些白來提亮，讓紫色粉一些，來降低紫色本身的氣質。

*圖片來自網絡

7）金色

黃金的顏色，給人一種高貴、奢華、貴族的感受。市面上無論是線上，還是線下，所有的VIP的設計基本都會使用金色作為主色調，金色搭配白色、銀色、黑色、紫色…都能夠體現出一種高級感，因此也被譽為最百搭的顏色。但是要在設計中使用好金色，則需要控制好金屬呈現的比例，稍有不慎則會變得“土”。

*圖片來自網絡

8）黑白色

黑白，一陰一陽，黑白在大多數的情況下都是作為輔助性的顏色出現，比如在品牌設計中，只有文字色是屬于黑白的，不過單純使用黑白也可以設計得很高級，比如國際一線潮牌off-white，就是把黑白玩到極致了，以至于很多品牌都爭先的模仿，黑白作為品牌色最大的好處就是不容易過時，因為黑白是身邊必然要的色調。

*圖片來自網絡

不同的顏色可以產生不同的心理作用。從細節上來說這些感受每個人都各不相同，但總的來說即使是來自不同文化的人也往往有同樣的感受。比如紅色使人心情激動，藍色使人們安靜。對藝術家、建筑師、服裝設計師和廣告制作者等來說顏色的心理作用是非常重要的。

除此之外人對顏色的感受還有許多特別的效應。一個有趣的現象是假如一個畫家在繪畫時只使用少數幾種顏色，我們的眼睛會試圖將灰色或其他中立的顏色看成是缺乏的顏色。假如一幅畫中只有紅黃黑和白色，那么我們就會把黃和黑的混合色看成一種綠色，把紅和黑的混合色看成一種紫色，而灰色會顯得有點藍。

三、組合顏色，創造新感受

雖然不同的顏色產生出不同的情緒感受，但如果我們在設計的時候只使用單一的色彩就會顯得太過于單調了，甚至，我們在大自然的世界中也不會存在完全單色的物體。

因此我們在設計時仍然需要通過不同顏色的組合來進行設計，通過組合的顏色會傳遞出全新的視覺感受，有的協調、有的自然、有的新鮮、有的沖突，有的高級。

下面我們通過幾組色彩來看看不同的色彩搭配感覺：

1.這組顏色整體屬于中飽和度，藍色和黃色本身就是一組匹配度較高的色調，一冷一暖，整體沖突卻又協調。

*圖片來自網絡

2.這組顏色屬于深色調性，無論是深邃的墨藍色背景或者是深紅色都給人一種神秘感，但紅藍的撞色沖突中又帶有一些協調。

*圖片來自網絡

3.這組顏色，主體整體比較偏粉，屬于低飽和的狀態，給人的感覺就很溫柔、舒服、柔軟。

*圖片來自網絡

4.這組顏色，主要是由紫色和黃色互補而成組成，對比強烈，給人一種神秘卻又鮮活的感受。

*圖片來自網絡

5.這組水果的配色，具有高飽和度，整體的感覺就是“新鮮”。

*圖片來自網絡

四、設計中的顏色應用

色彩設計，在圖形設計中也是非常重要，在實際的產品設計中，需要通過不同的顏色來設定圖形的屬性、表意、內容的歸屬。圖標顏色的應用可以涵蓋許多不同的領域，包括設計、用戶界面（UI）、品牌標識等。

總體來說，圖形中的顏色應用需要根據設計的目的、受眾、信息層次等因素進行慎重選擇，適當的顏色運用有助于提升圖形設計的效果，使其更具有吸引力和表達力。

1. 保證品牌色調嚴謹性

公司和品牌通常使用特定的顏色來識別和區分自己，因此在任何場景下都要保證品牌色調準確，以加強品牌的可識別性和一致性。

2. 品牌主題化設計

比如星巴克的設計一直都是以品牌綠作為主調，從logo開始，貫穿到整個產品內容、宣傳內容、APP、網站，整體都是品牌化的主題性設計，經過日積月累的時間，用戶以后看到綠色都會聯想到星巴克的品牌。

*圖片來自網絡

3. 圖形顏色一致性

在圖標設計的時候，保持色彩的一致性，是圖標設計的其中意向基礎?？梢酝ㄟ^配合質感、造型等內容提升整體產品的協調感，以及品牌的統一調性。

*圖片來自網絡

4. UI中的應用

通過品牌色調的點綴，提升品牌的設計調性，利用留白、對比、及強調，讓用戶記住色彩調性。

*圖片來自網絡

5. 可視化虛擬界面

在可視化的界面設計的時候，由于真實環境或者虛擬環境本身已經具有一定的干擾性，因此在設計的時候需要做到顏色更加明快，內容設計本身需要做到直接、干凈、簡潔。

*圖片來自網絡

五、品牌色彩結構

品牌色彩結構是指一個品牌在設計和視覺表達中所使用的特定顏色組合。這種顏色結構有助于建立品牌的視覺識別和一致性，使其在各種媒體和平臺上都能夠被認出。

品牌色彩結構的建立需要經過深思熟慮的品牌戰略和設計過程，以確保品牌在不同情境下都能夠傳達出一致的形象和價值觀。一旦建立，品牌色彩結構將成為品牌標識的核心元素之一。

品牌色彩結構主要包含有：主色、輔助色、中性色、強調色、互補色、色彩規范、相應色。

*案例來自google search 品牌

1.主色

品牌中的核心主要應用顏色，通常與整體品牌調性息息相關、緊密相連，在整個色彩結構中的占比也是最大，用戶大多從品牌主色中感受品牌的整體調性。比如星巴克黑綠給人的恬靜、麥當勞紅黃給人的活躍激動、Facebook藍色給人的商務冷靜。

2.輔助色

輔助色可以是與主色相配的顏色或者是撞色的設計，用來彌補色彩設計單一的問題，屬于品牌設計中出現第二多的顏色。除此之外，輔助色可以用于背景、文本、按鈕等各種元素，以提供更多的設計靈活性。

3.中性色

中性色通常來說會使用黑、白、灰，或者說深度較高帶有品牌主色色相的深色。中性色主要的作用是用于填補顏色應用的缺位，在一些沒法使用品牌色或者輔助色的場景中出現，比如我們的字體顏色，就可以使用中性色來進行大面積的設計，平衡整體的色彩，讓文字類設計的可讀性更高。

4.強調色

強調色，也是我們常說的highlight的顏色，大部分情況下會使用品牌主色或者輔助色，當主色沒法被大面積應用的時候，可以拓展出別的顏色來進行應用。一般用于強調某些內容或者某些文字，比如說我們的鏈接、人名、特殊地址、按鈕、圖標等等。

5.互補色

互補色是與主色相對立的顏色，用于提供對比度和吸引眼球。互補色的使用可以使品牌在設計中更具活力和引人注目。

7.響應色

在建立品牌色彩結構時，要考慮到不同設備和屏幕上的表現。確保品牌顏色在不同分辨率和屏幕上都能夠保持一致性和可識別性，大部分情況下響應色會使用品牌主色或者強調色。

9.顏色規范

顏色規范即把以上的所有顏色的內容寫成一份文檔，建立一套顏色規范，定義主色、輔助色和其他顏色的具體數值，以確保在各種媒體和平臺上都能實現一致的品牌表達，方便在后續的設計中繼續應用。

*圖片來自網絡

我們在設計品牌色彩結構的時候，需要遵循一些規則，以確保品牌的視覺識別性和一致性。以下是我梳理的一些主要規則：

1.一致性

一致性主要是在應用上，也就是說，如果我們設定了一整套色彩系統或者色彩結構，我們需要保證品牌色彩在任何的場景下或者媒介下都是具有一致性。

比如谷歌的品牌系統色調的延伸設計（如下圖）：

2.目標受眾

需要考慮用戶對品牌色的接受程度，盡可能選擇用戶喜歡或者常見的色調來做品牌主色調，并且基于這個方向，設計出更高級的色彩質感。

*圖片來自網絡

3.品牌價值觀

色彩是品牌傳遞的一個比較直觀的工具，如我們上面寫到的，不同顏色代表不同的情緒、情感，因此我們在設定品牌色彩的時候也需要結合色彩情緒來取定義。

*圖片來自網絡

4.競爭對手差異化（可識別性）

品牌色差異化，是品牌設計師最基本的思考概念，避免與競爭對手產生重疊，確保自己的品牌色與競爭對手有足夠大的差異化，才能產生獨特點，從而讓用戶或者消費者可以記住品牌特點，從而提升自身品牌的可識別性，使消費者在看到品牌色時能夠迅速聯想到自家的產品。比如瑞幸和星巴克的差異化

*圖片來自網絡

5.靈活性

色彩的設定不應該是一成不變的，結合品牌宣傳的需要或者產品的需要，需要設計出一定的色彩容錯率或冗余?；蛘咴谠O計之初提前對于多場景的應用進行考慮，保證品牌在不同的時間段、不同的場景下都具有較高的靈活性。比如Apple的品牌特性，每一年的品牌大會，品牌logo的設計都會變，隨之品牌色調也會有特定的設計。

*圖片來自網絡

六、顏色的行業應用差異

行業與行業直接的使用色彩是有一定的認知壁壘在里面的，當然這個認知不是本來就有，而是長久以往被大環境的影響產生的，比如一個賣金的商家或者餐飲的商家，不太可能把品牌色設定為冷色系，科技化的公司也比較少把品牌色設定為大紅色。

色彩的認知是會直接烙印在人的大腦的，行業的色彩壁壘也是如此，這個壁壘收到基層邏輯影響，比如長久以往的所看到的影響或人類作為生物天生的認知，都會導致不同行業之間的色彩的差異壁壘。

不同行業通常會有特定的配色方向，以體現品牌的特性、業務性質，但這不是唯一的選項，只是設計行業發展多年的一份趨勢，設計師可以依據一些趨勢去大膽的提出自己的想法，幫助品牌主在行業紅海中突出自己的品牌調性。

1.科技行業：

科技行業大多以藍色主要主要色調，藍色通常可以代表創新、信任、可靠性和平和，也有少部分使用綠色或者紅色。

*圖片來自網絡

2.金融行業：

藍色、金色通常是金融行業比較常見的色彩，藍色可以表達出一種商務化氛圍，選擇較深一些的藍色則會更透出一絲的沉穩的氣質，而金屬通常作為輔助色彩，使用在一些產品宣傳物料上，金色給人一種自然的尊貴感，前面也提到，金屬很具有VIP的情緒氛圍。

*圖片來自網絡

3.醫療行業：

醫療行業給人最大的色彩認知就是藍色、綠色、白色，整體給人一種冷靜、清潔、安全的感受，白色和灰色用于提供專業性，而綠色和藍色用于傳遞健康和舒適感。

*圖片來自網絡

4.食品和餐飲行業：

特性顏色：紅色、橙色和黃色在食品和餐飲中很常見，因為它們能夠激發食欲和活力。

中性顏色：常常使用中性的棕色、米色或黑色（日料店很喜歡使用黑色作為主品牌色），以與食品本身形成對比。

*圖片來自網絡

5.時尚行業：

時尚行業比較?？吹降纳适呛诎谆?，但是時尚行業比較受消費程度和季節性趨勢影響，越高級的品牌設計越簡約，這也導致了品牌色調的簡潔化，比如GUCCI、LV等大牌的品牌色都是黑色主調，但這不影響他們在產品設計中去使用別的顏色，這就是品牌色彩的“靈活性”最好的體現

*圖片來自網絡

6.藝術與文化行業：

藝術行業來說比較少有特定的顏色，因為整體行業跨度比較大，大家對于藝術的認知比較少有固定的認知。

*圖片來自網絡

男、女及兒童的色彩設計差異：

男性與女性乃至兒童的色彩設計也是具有一定的差異性的，男女性的色彩差異比較好劃分，從男女的心理上來說，男性比較偏理想，女性比較偏感性，因此就造成的在這2個方向下的色調差異，兒童的話則是另一個范疇，從非嚴格的意義上來講，任何的顏色都適合兒童。

男性行業的顏色比較偏冷色系，比如藍色、綠色或者黑白灰等，而女性行業的顏色則會偏暖色系，比如粉色、紫色、紅色、黃色、金色…等。但兒童行業的顏色通常會使用明亮、活潑、多彩的色彩，以吸引兒童的注意力，傳達歡樂、友好和有趣的感覺。

*圖片來自網絡

七、背景色對設計的影響

背景色是我們在設計時候比較重要的一個因素，控制好背景色與前景的關系，可以大大提升設計的質感，相反，如果背景色過于搶眼則會導致主題弱化，變得喧賓奪主。

我們在設計背景色的時候主要從幾個維度來進行考慮：

1. 保持一致性

保持與前景顏色的一致性，這樣的背景色可以達到一種協調統一的美，比如前景是一種暖色調，我們在設計背景色時只需要考慮把前景物體顏色進行降飽和或者降亮度的方法來處理即可。

*圖片來自網絡

2. 對比突出

對比突出是一種比較大膽的設計方法，采用與前景互補的顏色來進行設計，可以大大提升畫面的跳脫感，提升一些活躍的程度。

*圖片來自網絡

3. 使用中性色

如果你對背景使用什么樣的顏色沒有注意，那么可以考慮使用一些比較中性的顏色，比如黑白灰，或者一些比較低飽和的混合色，比如綠色

*圖片來自網絡

4. 使用最靠近背景物件的色彩

如果前景具有一定的空間感，我們可以考慮使用最靠后的物體的顏色來作為背景色。來達到空間的延伸。

*圖片來自網絡

5. 使用品牌主色調或者輔助色

比如discord或者Apple的設計，就比較常直接使用品牌色或者輔助顏色作為網站設計的背景色，這樣可以直接在視覺上給人直觀的色彩調性。

*圖片來自網絡

八、潘通色

PantoneMatching System（PMS）是一種廣泛用于顏色標準化的色彩匹配系統。它是由美國公司Pantone LLC開發的，旨在提供一種標準的、精確的方法，以確保在不同的媒體和設備上能夠精準地再現相同的顏色。

潘通基于不同的場景開發了2種場景使用的顏色系統，一種是平面設計上使用的，編號為“PMS”開頭；另一種是家居+室內裝潢應用的，分別是“TCX”指的是紡織品，“TPG”指的是顏料及圖層。

潘通目前已經研究了15000多種顏色，目前設計軟件主要是和Adobe合作，也有提供獨立的APP供用戶進行使用。

我們可以再潘通的官網了解到很多關于色彩趨勢的文章，相信對喜歡色彩設計的你來說會很有幫助，網址：https://www.pantone.com/hk/tc/articles/colors

潘通過去這些年發布了很多的年度主題色，我們可以來看看每一年的色彩。詳細可以進入網站查看：https://www.pantone.com/hk/tc/articles/color-of-the-year

九、取色工具分享

我們在設計的時候，大多使用軟件來吸取顏色，對于設計師來說這無疑是最方便的工具，但是如果你不是設計師或者你懶得打開設計軟件的話，那么這些取色工具對你將非常有用。

1. Adobe Color Wheel

Adobe Color Wheel是Adobe提供的在線配色工具，可以幫助用戶選擇、調整和預覽顏色方案。

鏈接：https://color.adobe.com/zh/create/color-wheel

2. Color Hunt

Color Hunt提供了各種由設計師創建的精選顏色方案，用戶可以瀏覽、篩選和獲取相應的顏色值。

鏈接：https://colorhunt.co/

3. Paletton

Paletton是一個在線色彩方案設計工具，用戶可以通過選擇基礎顏色來生成單色、對比色、三角形配色等方案。

鏈接：https://paletton.com/#uid=13h0u0kleqtbzEKgVuIpcmGtdhZ

4. WebGradients

WebGradients是一個在線工具，提供了豐富的漸變顏色方案，用戶可以預覽漸變效果并獲取相應的顏色代碼。

鏈接：https://webgradients.com/

5. Image Color Picker

Image Color Picker是一個在線取色器，用戶可以上傳圖片或提供圖片鏈接，然后點擊圖片獲取所選位置的顏色信息。

鏈接：https://imagecolorpicker.com/

6. HTML Color Codes

HTML Color Codes是一個簡單的在線工具，用戶可以通過選擇顏色或輸入顏色代碼來獲取顏色信息。

鏈接：https://htmlcolorcodes.com/color-picker/

7. ColorHexa

ColorHexa是一個強大的在線色彩工具，提供了對顏色的詳細解析，包括顏色的多種表示方式、調色板和相關信息。

鏈接：https://www.colorhexa.com/926471

8. Coolors

Coolors是一個在線配色工具，提供了創建、調整和探索顏色配色方案的功能。用戶可以使用該工具生成隨機顏色方案，并獲取對應的Hex和RGB值。

鏈接：https://coolors.co/

9. CSS Gradient Generator

CSS Gradient Generator是一個在線漸變生成器，用戶可以選擇顏色和漸變類型，然后獲取對應的CSS代碼。

鏈接：https://cssgradient.io/

十、使用灰度鑒別色彩合理性

如果我們在設計的時候，不知道使用的顏色是否過于泛濫，那么可以通過“灰度”的方法來進行測試，灰度的是一種常見的設計技巧，通過黑白灰的模式，來去看整體設計的色彩狀態、色彩平衡感，以及飽和度情況。

我們在日常的設計中，在大部分的場景下都需要使用到，比如攝影、KV頭圖的設計、插畫設計、品牌色應用、圖標設計等等。

測試灰度的方法也比較簡單，我們可以通過軟件的去色功能或者把飽和度調到最低的方法來進行測試，去色之后，我們就可以通過色階來查看色彩黑白灰的情況。

案例一：攝影圖片

如下面2個圖，圖一：黑白灰的分布均有所保留，深色和灰色相對較多；圖二：沒有深色調，整體圖片灰色調更多一些。

案例二：海報圖

如下面2個圖，圖一：黑白灰色調均衡；圖二：缺乏深色調，整體色彩比較偏淺。

總結

今天分享的的內容屬于色彩設計中中的一些基礎內容，更多的色彩設計還需要結合實際的產品、內容、場景來進行發散和重新定義，這樣設計出來的內容才會更加具有支撐點，也會更加具有落地意義。

本文由 @DD的設計站 原創發布于人人都是產品經理。未經作者許可，禁止轉載。

題圖來自Unsplash，基于CC0協議。

該文觀點僅代表作者本人，人人都是產品經理平臺僅提供信息存儲空間服務。