回上一頁 回網頁實驗室大門

小怪鬼的配色實驗室

  本實驗室預估可在 IE 5 及 Mozilla 1.2 以上運作,確定可在 IE 6 及 Mozilla 1.7 中正常運作。


  本實驗是會依據你的設定將配色結果顯示在配色顯示區中,可用來作為網頁設計的配色測試及選色。

 

配色顯示區
 
前景 自動選色: 色彩間距: 計數模式:
顏色值: 色彩快選:
背景 自動選色: 色彩間距: 計數模式:
顏色值: 色彩快選:
配色值顯示欄:
CSS 輸出欄:

  在此採用十六進位值來選色,即 0~9 加 A~F,也就是網頁常用的格式 "#RRGGBB",其中 "RR" 是紅色的十六進位值,"00" 代表最暗,"FF" 代表最亮,"GG" 為綠色值,"BB" 為藍色值,簡單的說,"#000000" 是最暗,即黑色,"#FFFFFF" 是最亮,即白色。

  上方表格中,前景即為文字顏色設定區,背景即是背景色彩設定區,當自動選色欄勾選時,則會從顏色值欄位之設定作為配色第一格之色彩值,然後依據右方設定,自動順序排列配色,文字配色為橫向遞增七個色彩間距,背景配色為縱向向下遞增七個色彩間距,換句話說,每一橫列之背景為同一顏色,每一縱欄之文字也為同一種顏色,如此交叉配色,最多可產生 8 × 8 組,共 64 組配色結果,若前景自動選色欄全部未勾選,則只會有一欄配色結果,共 8 組,背景自動選色欄全部未溝選,則只有一列配色結果,亦有 8 組,若前景及背景之自動選色均未勾選,則只會顯示顏色值欄位內,唯一一個配色結果。

  前景及背景右方之設定項目中,色彩間距即為每一配色間之差值,依據計數模式,將顏色值遞增、或遞減配色,若顏色超出上限 "FF",則停止增加,若低於下限 "00",則只計數到 "00",色彩快選可用來快速來設定左方六欄顏色值

  當設定完成後,點選配色按鈕,即可將配色結果輸出到配色顯示區,而重設按鈕會將表單內容全部重設,但不會重設配色顯示區

  配色顯示區所輸出的配色結果中,文字顏色即為你所設定的顏色,同時文字顯示內容也是文字的顏色值,當你點選配色結果的文字時,該格的配色值會輸出到下方配色值顯示欄以及 CSS 輸出欄,其中 CSS 輸出欄的內容,可直接貼入 CSS 樣式文件中,而配色值顯示欄右方之將此前景值設為初始按鈕,可將欄位中之值設為前景顏色值將此背景值設為初始按鈕,可將欄位中之值設為背景顏色值


回上一頁 回網頁實驗室大門