整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
成為一個(gè)好的設(shè)計(jì)師，或者一個(gè)很會(huì)穿搭的人。在設(shè)計(jì)作品或是穿搭衣物時(shí)，決不能配錯(cuò)顏色。
如果你天生對(duì)色彩不敏感，一不小心就會(huì)弄出「大紅配大綠」。那么，知曉程序今天推薦的小程序，你可得要收到好了。
「Color 顏值」，是一款專(zhuān)注幫你解決配色問(wèn)題的小程序，它基于色輪配色原理，讓你輕輕松松就能搭配出大師級(jí)別的色彩。
關(guān)注「知曉程序」公眾號(hào)，在后臺(tái)回復(fù)「0109」，一張圖教你玩轉(zhuǎn)小程序。
這個(gè)小程序共提供了四大實(shí)用功能：配色廣場(chǎng)、顏色轉(zhuǎn)換、配色工具、Web 顏色。
我們先去「配色廣場(chǎng)」看看。
自己不懂配色，就借鑒經(jīng)典的配色方案吧。
在「配色廣場(chǎng)」中，就提供了許多「Adobe Color 配色方案」，一頁(yè) 5 組，一組 5 種顏色。頁(yè)面底部有個(gè)「Surprise me」的按鍵，點(diǎn)擊它，就切換另外 5 組。
如果你有一個(gè)確定的主色調(diào)，就可以在這里挑選可與之搭配的顏色。
看見(jiàn)喜歡的方案，點(diǎn)進(jìn)去，就能獲得這個(gè)色彩方案的「配色詳情」，詳細(xì)展示了每一種顏色的 RGB 和 HSB 色值。
實(shí)在喜歡，還可以點(diǎn)擊底部的「收藏」，并給它起一個(gè)「名稱(chēng)」便于日后查閱。
不過(guò)，「我的收藏」的位置比較隱蔽，找不到它的朋友們這里要認(rèn)真看咯。
回到配色廣場(chǎng)的主頁(yè)面，注意到頁(yè)面上方的「下拉小箭頭」，點(diǎn)擊它會(huì)彈出選擇菜單，選中「我的收藏」并確定，你收藏下來(lái)的配色方案都在這里。
每種顏色都有對(duì)應(yīng)的色值，據(jù)說(shuō)設(shè)計(jì)師確定顏色的方法，是先估計(jì)色值，再根據(jù)色彩的濃度、亮度等等調(diào)出最滿意的顏色。
「顏色轉(zhuǎn)換」就是用于調(diào)整色值的，我們來(lái)看看，具體怎么用？
首先，你要確定一種顏色模式，頁(yè)面上方的「模式選擇」有 RGB、CMYK、LAB、HSB 四種可選。選好模式，每一個(gè)屬性有相應(yīng)的滑塊，滑動(dòng)它就可以調(diào)整色值了。
頁(yè)面中間的「預(yù)覽」塊可以實(shí)時(shí)顯示你調(diào)出來(lái)的顏色，同時(shí)還顯示其「十六進(jìn)制顏色碼」，以及這個(gè)顏色在四種不同模式下對(duì)應(yīng)的色值。
在「配色廣場(chǎng)」中，小程序推薦的是 Adobe Color 配色方案。
而接下來(lái)要介紹的「配色工具」，則提供了基于 6 種顏色關(guān)系的配色算法，分別是類(lèi)比色／相似色、互補(bǔ)色、分裂補(bǔ)色、單色、漸變、二次色配比。
如果你對(duì)這幾種配色算法沒(méi)有概念，也沒(méi)關(guān)系，在「關(guān)于 Color 顏值」中可以找到詳細(xì)的介紹，順便還能漲漲知識(shí)呢。
每一種配色算法都需要一個(gè)「主色」或「基準(zhǔn)色」，這個(gè)由你自己來(lái)調(diào)它的 RGB 值以及飽和度、亮度，然后小程序會(huì)根據(jù)你選擇的配色算法推薦一組 4 種顏色。
如果實(shí)在不知如何確定「主色」或「基準(zhǔn)色」，那就點(diǎn)擊底部的「隨機(jī)」，你可以一直「隨機(jī)」，直到滿意。
好不容易找到一組滿意的，千萬(wàn)別忘了「收藏」，收藏方法跟上面所述一樣，這個(gè)收藏夾還可以作為你的顏色管理利器哦。
如果你不需要考慮配色原理，還有一個(gè)選項(xiàng)「 I am Feeling Lucky 」，它會(huì)隨機(jī)挑選一種算法，并根據(jù)其原理為你推薦一組 5 種顏色的配色方案。
這個(gè)功能方便了外行人搭配出和諧的顏色，也給內(nèi)行人帶來(lái)了色彩靈感。
現(xiàn)在是互聯(lián)網(wǎng)時(shí)代，不管是美術(shù)設(shè)計(jì)，還是 UI 設(shè)計(jì)，你都需要對(duì)「Web 顏色」有一定的了解。
這個(gè)小程序從「CSS 顏色值」、「Web 安全色」以及「Gray 灰度值」三個(gè)方面，列舉了 Web 標(biāo)準(zhǔn)規(guī)范中 HTML 和 CSS 定義的標(biāo)準(zhǔn)色和安全色。
如果你還在為顏色搭配而頭疼，如果你需要一個(gè)顏色管理工具，如果你喜歡和諧美麗的色彩，不妨打開(kāi)「Color 顏值」。
誰(shuí)不喜歡和諧美麗的色彩呢？還不快來(lái)！
「Color 顏值」小程序使用鏈接 https://minapp.com/miniapp/3775/
關(guān)注「知曉程序」公眾號(hào)，在后臺(tái)回復(fù)「藏寶圖」，獲取最全最好用的小程序名單。
頭條創(chuàng)作挑戰(zhàn)賽#
顏色對(duì)于 css 來(lái)說(shuō)是非常重要的，網(wǎng)站之所以會(huì)呈現(xiàn)出五彩斑斕的樣式，就是這些顏色樣式起的作用。在 css 中，對(duì)于顏色樣式有很多種表達(dá)方式，今天我們就來(lái)盤(pán)點(diǎn)下 css 中顏色的格式。
在 css 中，默認(rèn)定義了很多名字顏色，比較常見(jiàn)的比如 yellow，blue，red，pink 等，實(shí)際上，css 中一共定義了 140 個(gè)顏色名字，這些名字你都可以直接拿來(lái)使用。雖然 140 種看起來(lái)很多，但是實(shí)際上它比 8bit 的顏色還要少，因此，平時(shí)我們很少使用它。
這是一種顏色格式，從名字我們就知道它是 red，green，blue 三種顏色的簡(jiǎn)寫(xiě)，我們都知道三原色原理，也就是通過(guò)三種基本顏色，我們就可以組合出其它的顏色出來(lái)，因此，rgb 就可以表示出我們可以看到的各種顏色。
在 css 中，red，green，blue 被稱(chēng)作三通道，每個(gè)通道的值是從 0-255，通過(guò)混合這些通道顏色，我們就可以創(chuàng)造出 1600 多萬(wàn)種顏色。需要注意的是 rgb(255,255,255,0.5) 允許我們有第四個(gè)參數(shù)，它的值從 0-1，用來(lái)表示透明度。
.translucent-box {
background: rgb(255 0 0 / 0.5);
}
通過(guò)十六進(jìn)制數(shù)字來(lái)表示顏色代碼，6 位數(shù)字被分成了三組，每?jī)晌灰唤M，一位是 16，兩位就是 16*16=256，所以它其實(shí)和 RGB 基本是相同的，只不過(guò)它是用 16 進(jìn)制進(jìn)行表示。
它的三組也是代表著 red，green，blue，和 RGB 一樣的是，它也可以指定透明度，也就是說(shuō)我們可以使用 8 位十六進(jìn)制來(lái)表示顏色。
.translucent-box {
background: #ffff0080;
}
和 RGB 不同的是，HSL 是通過(guò)指定色調(diào)，飽和度，亮度來(lái)表示顏色的。
在 HSL 中，我們的色調(diào)是在 0deg-360deg 之間，轉(zhuǎn)一圈的大致顏色范圍就是紅橙黃綠青藍(lán)紫，飽和度是在 0-100%之間，亮度是在 0%-100%之間。
HSL 是可以和 RGB 進(jìn)行轉(zhuǎn)換的，其中色調(diào)的轉(zhuǎn)換公式比較復(fù)雜。
.translucent-box {
background-color: hsl(0deg 100% 2%);
}
P3 是一個(gè)在繼承 sRGB 色彩空間范圍之外，又提供了更亮更充滿活力的色彩范圍，也就是說(shuō) P3 表示的色彩范圍要更大。
因此，使用 P3 的時(shí)候，需要使用特殊的屬性值 color 形式來(lái)表示，但是對(duì)于 color 這個(gè)屬性，目前只有 safari 支持。
.translucent-box {
background: color(display-p3 1 0 0);
}
因?yàn)?HSL 對(duì)于不同顏色在表示亮度的時(shí)候給人的感覺(jué)是不同的，因此，人們發(fā)明了 LCH 用來(lái)更接近人眼感知的色彩表示方式。
LCH 代表 “亮度色相”?！吧取被蚨嗷蛏偈恰帮柡投取钡耐x詞。它在概念上與 HSL 非常相似，但有兩個(gè)很大的區(qū)別：
與我們看到的其他顏色格式不同，LCH 不受 sRGB 的約束。它甚至沒(méi)有綁定到 P3！它通過(guò)對(duì)色度沒(méi)有上限來(lái)實(shí)現(xiàn)這一點(diǎn)。
在 HSL 中，飽和度范圍從 0%（無(wú)飽和）到 100%（完全飽和）。這是可能的，因?yàn)槲覀冎牢覀冋谡務(wù)?sRGB 色彩空間，一個(gè)有限的調(diào)色板。
但是 LCH 與特定的色彩空間無(wú)關(guān)，因此我們不知道飽和上限在哪里。它不是一成不變的：隨著顯示技術(shù)的不斷改進(jìn)，我們可以期待顯示器達(dá)到越來(lái)越寬的色域。LCH 將自動(dòng)能夠通過(guò)調(diào)高色度來(lái)引用這些擴(kuò)展的顏色。談?wù)撁嫦蛭磥?lái)！
.translucent-box {
background: lch(50% 120 20);
}
CSS 是一種令人驚訝的難以掌握的語(yǔ)言。無(wú)論花了多少年練習(xí)，總會(huì)覺(jué)得有很多我不知道的東西。
就目前而言，在 LCH 沒(méi)有被完全支持的情況下，HSL 也許更加適合表達(dá)。
所以說(shuō)很多時(shí)候，當(dāng)我們以為自己已經(jīng)很熟悉或者掌握一門(mén)語(yǔ)言的時(shí)候，其實(shí)可能我們才僅僅是剛?cè)腴T(mén)而已，任何知識(shí)當(dāng)我們深入研究的時(shí)候我們都會(huì)發(fā)現(xiàn)我們對(duì)它的了解其實(shí)并不是真的很透徹。
們平時(shí)進(jìn)入到每一個(gè)網(wǎng)頁(yè)中，最開(kāi)始看到的肯定還是整體上的色彩搭配。每一個(gè)品牌和公司的文化形象都不同，可能本身也有一些logo和顏色方面的元素添加，如果要進(jìn)行網(wǎng)站設(shè)計(jì)，這些方面也都是要考慮到其中的。很多頁(yè)面導(dǎo)航可能都是在使用對(duì)比色，比如說(shuō)黑白色和紅綠色等，跨度比較大的顏色搭配起來(lái)也著實(shí)明顯，確實(shí)達(dá)到了很好的效果。但是在進(jìn)行頁(yè)面色彩搭配的時(shí)候，必須要注意以下幾點(diǎn)。
要點(diǎn)一，根據(jù)品牌形象來(lái)選擇。網(wǎng)站設(shè)計(jì)必須要先考慮到整體上的品牌形象，其實(shí)網(wǎng)站已經(jīng)反射出了我們企業(yè)的一些文化元素，在進(jìn)行建設(shè)的過(guò)程中，我們必須要提前確定好顏色方面的搭配。這個(gè)時(shí)候我們網(wǎng)站中的基礎(chǔ)色調(diào)，基本上就影響到了后期的品牌呈現(xiàn)效果，所以一定要謹(jǐn)慎選擇。北京金方時(shí)代科技有限公司專(zhuān)業(yè)人員建議大家最好是根據(jù)品牌的logo或者是基礎(chǔ)顏色來(lái)進(jìn)行建站，但是一定不能影響到網(wǎng)友的閱讀，顏色搭配要適度。
要點(diǎn)二，重要信息要突出。網(wǎng)站設(shè)計(jì)的重點(diǎn)信息肯定是要突出，其實(shí)顏色也決定了我們的信息傳遞，尤其是一些比較重要的公司信息，或者是優(yōu)惠信息等，盡量是使用到華麗的色彩，又或者是進(jìn)行字體方面的變形，這樣可以更有吸引力，也凸顯了頁(yè)面的獨(dú)特魅力。建議大家最好是考慮一下自己受眾群體的喜好，比如說(shuō)一些針對(duì)年輕女性的品牌，頁(yè)面設(shè)計(jì)肯定是要更有活力，整體上的色彩也可以變得更加輕松一些。考慮到每一個(gè)網(wǎng)友的喜好，對(duì)我們頁(yè)面的色彩設(shè)計(jì)和選擇也是相當(dāng)有幫助的。
要點(diǎn)三，導(dǎo)航欄要直觀。我們的網(wǎng)站設(shè)計(jì)必須要保證一個(gè)比較直觀的導(dǎo)航欄，如此才能夠讓網(wǎng)友進(jìn)入到頁(yè)面后，更方便使用網(wǎng)頁(yè)的導(dǎo)航。畢竟我們的網(wǎng)站設(shè)計(jì)就是為了能夠吸引到不同類(lèi)型的消費(fèi)者，也為了擴(kuò)大品牌的影響力，所以導(dǎo)航的設(shè)計(jì)也直接影響到了網(wǎng)友在頁(yè)面停留的時(shí)間長(zhǎng)短。顏色上可以重點(diǎn)突出字體，也要防止一些迷惑網(wǎng)友的動(dòng)作產(chǎn)生，這樣的導(dǎo)航設(shè)計(jì)會(huì)讓人非常反感。建議大家最好是能夠在導(dǎo)航和不同級(jí)頁(yè)面的設(shè)計(jì)上有一定要求，提前寫(xiě)好自己的設(shè)計(jì)方案，然后網(wǎng)絡(luò)建設(shè)公司幫助處理，效果會(huì)更好。
原文鏈接出自：http://www.bjjfsd.com/index_show_catid_19_id_692.html
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
