想把 PPT 做得更好看？這款配色小程序，你一定會需要

成為一個好的設計師，或者一個很會穿搭的人。在設計作品或是穿搭衣物時，決不能配錯顏色。

如果你天生對色彩不敏感，一不小心就會弄出「大紅配大綠」。那么，知曉程序今天推薦的小程序，你可得要收到好了。

「Color 顏值」，是一款專注幫你解決配色問題的小程序，它基于色輪配色原理，讓你輕輕松松就能搭配出大師級別的色彩。

關注「知曉程序」公眾號，在后臺回復「0109」，一張圖教你玩轉小程序。

配色廣場

這個小程序共提供了四大實用功能：配色廣場、顏色轉換、配色工具、Web 顏色。

我們先去「配色廣場」看看。

自己不懂配色，就借鑒經典的配色方案吧。

在「配色廣場」中，就提供了許多「Adobe Color 配色方案」，一頁 5 組，一組 5 種顏色。頁面底部有個「Surprise me」的按鍵，點擊它，就切換另外 5 組。

如果你有一個確定的主色調，就可以在這里挑選可與之搭配的顏色。

看見喜歡的方案，點進去，就能獲得這個色彩方案的「配色詳情」，詳細展示了每一種顏色的 RGB 和 HSB 色值。

實在喜歡，還可以點擊底部的「收藏」，并給它起一個「名稱」便于日后查閱。

不過，「我的收藏」的位置比較隱蔽，找不到它的朋友們這里要認真看咯。

回到配色廣場的主頁面，注意到頁面上方的「下拉小箭頭」，點擊它會彈出選擇菜單，選中「我的收藏」并確定，你收藏下來的配色方案都在這里。

顏色轉換

每種顏色都有對應的色值，據說設計師確定顏色的方法，是先估計色值，再根據色彩的濃度、亮度等等調出最滿意的顏色。

「顏色轉換」就是用于調整色值的，我們來看看，具體怎么用？

首先，你要確定一種顏色模式，頁面上方的「模式選擇」有 RGB、CMYK、LAB、HSB 四種可選。選好模式，每一個屬性有相應的滑塊，滑動它就可以調整色值了。

頁面中間的「預覽」塊可以實時顯示你調出來的顏色，同時還顯示其「十六進制顏色碼」，以及這個顏色在四種不同模式下對應的色值。

配色工具

在「配色廣場」中，小程序推薦的是 Adobe Color 配色方案。

而接下來要介紹的「配色工具」，則提供了基于 6 種顏色關系的配色算法，分別是類比色／相似色、互補色、分裂補色、單色、漸變、二次色配比。

如果你對這幾種配色算法沒有概念，也沒關系，在「關于 Color 顏值」中可以找到詳細的介紹，順便還能漲漲知識呢。

每一種配色算法都需要一個「主色」或「基準色」，這個由你自己來調它的 RGB 值以及飽和度、亮度，然后小程序會根據你選擇的配色算法推薦一組 4 種顏色。

如果實在不知如何確定「主色」或「基準色」，那就點擊底部的「隨機」，你可以一直「隨機」，直到滿意。

好不容易找到一組滿意的，千萬別忘了「收藏」，收藏方法跟上面所述一樣，這個收藏夾還可以作為你的顏色管理利器哦。

如果你不需要考慮配色原理，還有一個選項「 I am Feeling Lucky 」，它會隨機挑選一種算法，并根據其原理為你推薦一組 5 種顏色的配色方案。

這個功能方便了外行人搭配出和諧的顏色，也給內行人帶來了色彩靈感。

Web 顏色

現在是互聯網時代，不管是美術設計，還是 UI 設計，你都需要對「Web 顏色」有一定的了解。

這個小程序從「CSS 顏色值」、「Web 安全色」以及「Gray 灰度值」三個方面，列舉了 Web 標準規范中 HTML 和 CSS 定義的標準色和安全色。

如果你還在為顏色搭配而頭疼，如果你需要一個顏色管理工具，如果你喜歡和諧美麗的色彩，不妨打開「Color 顏值」。

誰不喜歡和諧美麗的色彩呢？還不快來！

「Color 顏值」小程序使用鏈接 https://minapp.com/miniapp/3775/

關注「知曉程序」公眾號，在后臺回復「藏寶圖」，獲取最全最好用的小程序名單。

家好，很高興又見面了，我是"高級前端進階"，由我帶著大家一起關注前端前沿、深入前端底層技術，大家一起進步，也歡迎大家關注、點贊、收藏、轉發!

高級前端進階

前言

Web 上使用的大多數顏色都是 sRGB 。比如熟悉的 #rrggbb 、rgb(r, g, b) 語法指定的CSS顏色，其各個顏色分量以 [0, 255] 范圍內的值表示。例如，rgb(255, 0, 0) 是 sRGB 顏色空間中最飽和的純紅色。但是 sRGB 中的顏色范圍，即色域（Color Gamut或Color Space），并不包含人類視覺系統可以感知的所有顏色，同時有些顯示器可以產生更廣泛的顏色范圍。

sRGB（Standard Red Green Blue）是由Microsoft影像巨擘共同開發的一種彩色語言協議，微軟聯合愛普生、HP惠普等提供一種標準方法來定義色彩，讓顯示、打印和掃描等各種計算機外部設備與應用軟件對于色彩有一個共同的語言。

Display P3，飽和度明顯高于 sRGB 的色彩

如今，市場上有許多計算機、移動設備可以顯示Display P3 色域的所有顏色，并且 Web 平臺在過去幾年中一直在發展，以允許開發者充分利用這些顯示器。

下圖是在色度圖上用三角形劃出色彩空間所包含的色彩，明顯能看出二者在包含色彩范圍上的差別，即Display P3比sRGB范圍更大。

WebKit 自 2016 年一直支持寬色圖像和視頻，去年成為第一個實現 CSS Color Module Level 4 中定義的新顏色語法的瀏覽器引擎，可以在給定的顏色空間中指定顏色。

目前為止，也就HTML Canvas尚未支持廣色域顏色。 2D Canvas API 在寬色域顯示器普及之前就已引入，但是目前它只處理繪制和操作 sRGB 像素值。最近一項使用其他顏色空間創建Canvas上下文的提案被添加到 HTML 標準中，目前 WebKit 已經提供支持，而本文就從這里展開。

1.Display P3特征檢測&瀏覽器支持

可以使用一些技術來檢測寬色域顯示和畫布支持是否可用。

1.1 顯示器支持

要檢查顯示器是否支持 Display P3 顏色需要使用色域媒體查詢。

function displaySupportsP3Color() {
    return matchMedia("(color-gamut: p3)").matches;
}

目前matchMedia方法已經受到大多數瀏覽器的原生支持。從下圖可知，Chrome從9版本就已提供這個方法。

1.2 瀏覽器畫布顏色空間支持

要檢查瀏覽器是否支持寬色域畫布，可以創建一個Canvas并檢查生成的顏色空間。

function canvasSupportsDisplayP3() {
    let canvas = document.createElement("canvas");
    try {
        // 如果支持 colorSpace 選項，但不滿足 Display P3 支持的系統要求（最低 macOS 或 iOS 版本）
        // Safari 會拋出 TypeError。
        let context = canvas.getContext("2d", { colorSpace: "display-p3" });
        return context.getContextAttributes().colorSpace == "display-p3";
    } catch {
    }
    return false;
}

如上所示，可以通過獲取
context.getContextAttributes().colorSpace == "display-p3"的值來判斷瀏覽器是否支持display-p3。

1.3 CSS Color Module Level 4 語法支持

檢查瀏覽器是否支持在畫布上指定寬色域顏色，可以直接設置顏色并查看瀏覽器是否支持。

function canvasSupportsWideGamutCSSColors() {
    let context = document.createElement("canvas").getContext("2d");
    let initialFillStyle = context.fillStyle;
    context.fillStyle = "color(display-p3 0 1 0)";
    // 判斷瀏覽器是否會忽略
    return context.fillStyle != initialFillStyle;
}

2.在寬色域畫布上繪制渲染上下文

Canvas的getContext 方法接受一個選項來設置畫布后備存儲的顏色空間。

<canvas id="canvas" width="400" height="300"></canvas>
<script>
let canvas = document.getElementById("canvas");
let context = canvas.getContext("2d", { colorSpace: "display-p3" });
// 上下文中繪制
</script>

默認顏色空間是 sRGB（避免對現有內容進行顏色空間轉換的性能開銷），也可以使用display-p3。注意：可以使用任何受支持的 CSS 顏色語法指定填充和描邊樣式。

let position = 0;
for (let green of [1, 0]) {
    for (let blue of [1, 0]) {
        for (let red of [1, 0]) {
            context.fillStyle = `color(display-p3 ${red} ${green} ${blue})`;
           // 填充樣式
            context.fillRect(position, position, 40, 40);
           // 填充樣式
            position += 20;
        }
    }
}

任何使用畫布顏色空間之外的顏色繪圖都將被限制，以使其處于色域中。例如，在 sRGB 畫布上用顏色 (display-p3 1 0 0) 填充矩形最終將使用完全飽和的 sRGB 紅色。同樣，在 Display P3 畫布上繪制顏色 (rec2020 0.9 0 0.9)，在 Rec.2020 色彩空間中幾乎全是洋紅色，即使用相近顏色 (display-p3 1.0 0 0.923) 來填充，因為這是 Display P3 色域中最相似的。

const COLORS = ["#0f0", "color(display-p3 0 1 0)"];
for (let y = 20; y < 180; y += 20) {
    // 色域外采用相似顏色填充
    context.fillStyle = COLORS[(y / 20) % 2];
    context.fillRect(20, y, 160, 20);
}

廣色域顏色可用于所有Canvas繪圖基元，比如：

作為矩形、路徑和文本的填充和描邊
漸變節點
陰影顏色

3.sRGB 和 Display P3 中的像素操作

getImageData 和 putImageData 可用于獲取和設置寬色域畫布上的像素值。默認情況下，getImageData 將返回具有畫布顏色空間中像素值的 ImageData 對象，但可以指定與畫布不匹配的顯式顏色空間，執行轉換。

let context = canvas.getContext("2d", { colorSpace: "display-p3" });
context.fillStyle = "color(display-p3 0.5 0 0)";
context.fillRect(0, 0, 100, 100);

let imageData;

// 獲取畫布顏色空間（顯示 P3）中的 ImageData
imageData = context.getImageData(0, 0, 1, 1);
console.log(imageData.colorSpace);  
// "display-p3"
console.log([...imageData.data]);   
// [128, 0, 0, 255]

// 顯式獲取 Display P3 中的 ImageData
imageData = context.getImageData(0, 0, 1, 1, { colorSpace: "display-p3" });
console.log(imageData.colorSpace);  
// "display-p3"
console.log([...imageData.data]);   
// [128, 0, 0, 255]

// 獲取圖像數據轉換為sRGB
imageData = context.getImageData(0, 0, 1, 1, { colorSpace: "srgb" });
console.log(imageData.colorSpace);  
// "srgb"
console.log([...imageData.data]);   
// [141, 0, 0, 255]

ImageData 構造函數同樣采用帶有 colorSpace 鍵的可選項對象。

let context = canvas.getContext("2d", { colorSpace: "display-p3" });
// 創建一個 ImageData 并用完整的 Display P3 黃色填充
let imageData = new ImageData(10, 10, { colorSpace: "display-p3" });
for (let i = 0; i < 10 * 10 * 4; ++i)
    imageData.data[i] = [255, 255, 0, 255][i % 4];
context.putImageData(imageData, 0, 0);

當使用不同顏色空間的顏色繪制形狀時，ImageData 和目標畫布顏色空間之間的任何不匹配都會導致 putImageData 執行轉換并可能限制生成的像素。

4.序列化畫布內容

Canvas DOM 元素上的 toDataURL 和 toBlob 方法生成帶有畫布內容的光柵圖像。

const canvas = document.getElementById('canvas');
const dataURL = canvas.toDataURL();
// toDataURL
canvas.toBlob((blob) => { /* … */ }, 'image/jpeg', 0.95); 
// JPEG at 95% quality

在 WebKit 中，當在 Display P3 畫布上調用時，這些方法會在生成的 PNG 或 JPEG 中嵌入適當的顏色配置文件，從而確保保留所有顏色范圍。

5.繪制寬色域圖像

與 putImageData 一樣，drawImage 方法將在繪制顏色空間與畫布顏色空間不同的圖像時執行所需的任何顏色空間轉換。

putImageData(imageData, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight)
// putImageData方法
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
// drawImage方法

img 引用的光柵圖像使用的任何顏色配置文件，以及視頻（無論是視頻文件還是 WebRTC 流）引用的視頻中的任何顏色空間信息，都將在繪制到畫布時得到恰當處理。這可確保在繪制到色彩空間與顯示器（顯示 P3 或 sRGB）相匹配的畫布時，源圖像/視頻和畫布像素看起來相同。

6.總結

本文只是告訴大家什么是Display P3？為什么要使用Display P3？因為筆者不是這方面的專家，很多內容也就淺嘗輒止。但是文末的參考資料提供了大量優秀文檔以供學習，如果有興趣可以自行閱讀。

參考資料

https://webkit.org/blog/12058/wide-gamut-2d-graphics-using-html-canvas/

https://caniuse.com/?search=matchMedia

https://baike.baidu.com/item/sRGB/1350619?fr=aladdin

https://developer.aliyun.com/article/787589

reamweaver的CSS面板分類

type(類型)

background(背景)

block(區塊)

box(方框) 或盒子意思

border(邊框)

list(列表)

positioning(定位)

extensions(擴展)

共八個部分

1. type(類型)

type面板主要是對文字的字體，大小，顏色，效果等基本樣式進行設置。

注意：屬性名帶*號的是指樣式效果不能在編輯文檔時顯示，要用瀏覽器打開才能看到效果。

(1)font-family：設置字體系列。什么叫字體系列呢?是指對文字設定幾個字體，當遇到第一個字體不能顯示的文字時會自動用系列中的第二個

字體或后面的字體顯示。

注意:一般英文字體我們用"Verdana, Arial, Helvetica, sans-serif"這個系列比較好看。如果不用這些字體系列，你就需要自己編輯字體系列，

也可以直接手動在下拉框里寫字體名，字體之間用逗號隔開。中文網頁默認字體是宋體, 一般就空著不要選取任何字體。

默認值： not specified(取決于瀏覽器,系統默認的字體, 如: 微軟雅黑)

注意：

1.如果有漢字, 那么我們要加引號

2.如果有多個英文字母組成的單詞, 我們也要加引號; "microsoft yahei" 中間用空格隔開

3.font-family:"黑體","宋體","華文隸書"; 首先找黑體, 沒有黑體找宋體...

為了避免在CSS中使用 font 或 font-family 設置中文字體時亂碼, 可以使用 Unicode 編碼來表示字體。

/* 示例:使用Unicode字體編碼設置字體為"微軟雅黑" */
font-family: "\5FAE\8F6F\96C5\9ED1";

(2)font-size：定義文字的大小。你可以通過選取數字和度量單位來選擇具體的字體大小，或者你也可以選擇一個相對的字體大小。

最好使用pixels作為單位，這樣不會在瀏覽器中文本變形。一般字體用比較標準的12px或14px, 默認值為16px。

注意：CSS中長度的單位分絕對長度單位和相對長度單位:

絕對長度單位有：

pt：磅(point)

mm、cn、in、pc：(毫米、厘米、英寸、活字)根據顯示的實際尺寸來確定長度。

此類單位不隨顯示器的分辨率改變而改變。

相對長度單位有：

px：(像素)根據顯示器的分辨率來確定長度。

em：當前文本的尺寸。例如：{font-size:2em}是指文字大小為原來的2倍。

比如自身font-size: 30px; 那么此時1em=30px;

ex：當前字母"x"的高度，一般為字體尺寸的一半。

%：是以當前文本的百分比定義尺寸。例如：{ font-size:300%}是指文字大小為原來的3倍。

small、large：表示比當前小一個級別或大一個級別的尺寸。

默認值：medium(標準大小)

(3)font-style：定義字體樣式為normal、italic、oblique。默認設置為normal。

注意： italic 斜體 oblique 歪斜體 italic和oblique實際效果是一樣的。

默認值:normal

(4)line-height：設置文本所在行的行高。默認為normal。可以是行內元素、行內塊元素, 通常與height設置的高度值相同, 可以做到垂直居中的作用。

你也可以自己鍵入一個精確的數值并選取一個計量單位。

比較直觀的寫法用百分比, 例如140%是指行高等于文字大小的1.4倍。

最常用的方法: line-height:1.5em; /*行間距,相對數值,1.5倍行距,*/ 可有效的避免文字發生重疊

默認值： normal

(5)text-decoration：在文本中添加underline(下劃線)、overline(上劃線)、line-through(中劃線)、blink(閃爍效果)。

這些效果可以同時存在，將效果前的復選框選定即可。

注意：鏈接的默認設置是underline，我們可以通過選none去除下劃線。blink(閃爍效果)只在mozilla瀏覽器里可以看到, IE、opera不支持

默認值： none

(6)font-weight：給字體指定粗體字的磅值。

normal 默認值。定義標準的字符。

bold 定義粗體字符。

bolder 定義更粗的字符。

lighter 定義更細的字符。

100

200

300

400

500

600

700

800

900

inherit 規定應該從父元素繼承字體的粗細。

定義由粗到細的字符。400 等同于 normal, 而 700 等同于 bold。

默認值: normal

(7)font-variant：允許你選取字體的變種, 選small-caps(小型大寫字母)時, 此樣式區域內所有字母大寫。

normal表示正常的字體, 為默認值；

默認值: normal

(8)text-transform：將選區中每個單詞的第一個字母轉為大寫, 或者令單詞全部大寫或全部小寫。

參數：capitalize(單詞首字母大寫)、uppercase(轉換成大寫)、lowercase(轉換成小寫)、none(不轉換)。

默認值：none

(9)color：定義文字顏色。包括對表單輸入的文字顏色。

CSS中顏色的值有三種表示方法：

#RRGGBB格式，是由紅綠藍三種顏色的值組合，每種顏色的值為"00 – FF"的兩位十六進制正整數。

例如：#FF0000表示紅色，#FFFF00表示黃色。

rgb(R,G,B)格式, RGB為三色的值, 取0~255, 例如：rgb(255,0,0)表示紅色, rgb(255,255,0)表示黃色。

用顏色名稱。CSS可以使用已經定義好的顏色名稱。例如：red表示紅色, yellow表示黃色。

顏色值的縮寫:

p{color:#000000} 可以縮寫為：p{color:#000}

p{color:#336699} 可以縮寫為：p{color:#369}

默認值： not specified

color: transparent; 透明色

rgba() 解釋: rgba(紅0-255, 綠0-255, 藍0-255, 透明度0-1)

注意: 如果文字的顏色通過單獨的類選擇去設置沒有改變顏色, 則應該通過組合選擇器(.header .top .topR .blue)去設置, 改變它的優先級。

2. background(背景)

background面板主要是對元素的背景進行設置，包括背景顏色、背景圖象、背景圖象的控制。

一般是對body(頁面)、table(表格)、div(區域)的設置。

(1)background-color：設置元素的背景色。包括對input表單輸入框的背景顏色;

默認值: transparent(背景顏色為透明)

rgba() 解釋: rgba(紅0-255, 綠0-255, 藍0-255, 透明度0-1) 一般用于背景色

(2)background-image：設置元素的背景圖像。

默認值:none

CSS3支持多重背景圖,只要加上一個url指定圖片路徑,并用逗號(,)將兩組url分隔就可以了

background-image:url(a.jpg),url(b.jpg);

base64使用

background-image: url("data:image/png;base64,iVBORw0KGgo=...");

(3)background-repeat：確定背景圖像是否以及如何重復。

repeat 默認值。背景圖像將在垂直方向和水平方向重復。

repeat-x 背景圖像將在水平方向重復。

repeat-y 背景圖像將在垂直方向重復。

no-repeat 背景圖像將僅顯示一次。

inherit 規定應該從父元素繼承background-repeat屬性的設置。

注意：如果定義的元素的body，可以控制頁面背景是否重復。

默認值: repeat

(4)background-attachment：固定背景圖像或者跟隨內容滾動。

參數fixed表示固定背景(不隨屏幕滾動而滾動，決定背景圖像是否要固定在原來的位置), scroll表示跟隨內容滾動的背景。

注意：如果定義的元素的body, 可以使頁面背景固定。

默認值: scroll

(5)background-position(X)：指定背景圖像的水平位置。

可以指定為left(左邊), center(居中)，right(右邊)；

也可以指定數值，如20px是指背景距離左邊20象素。

background-position(Y)：指定背景圖像的垂直位置。

可以指定為top(頂部), center(居中), bottom(底部)；也可以指定數值。

background-position屬性值:

left top

center top

right top

left center

center center

right center

left bottom

center bottom

right bottom

如果您僅規定了一個關鍵詞，那么第二個值將是"center"。

注意:采用英文單詞的水平位置和垂直位置的屬性值可以調換

x% y% 第一個值是水平位置，第二個值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您僅規定了一個值，另一個值將是 50%。

xpos ypos 第一個值是水平位置，第二個值是垂直位置。左上角是 0 0。單位是像素 (0px 0px) 或任何其他的 CSS 單位。

如果您僅規定了一個值，另一個值將是50%。

您可以混合使用 % 和 position 值。

默認值：0% 0%

在線咨詢

上一篇：你肯定沒有試過這個方法，來破解易語言！
下一篇：JavaScript實現的手風琴圖片切換，鼠標懸停任意圖片html前端源碼

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商