colorFormat顏色轉換插件

介紹

colorFormat.js是將顏色值轉換爲你需要格式的JavaScript庫,現在僅支持瀏覽器支持的HEX/RGB/RGBA/HSL/HSLA等5種格式,任意格式之間互相轉換。

GitHub地址:https://github.com/fxss5201/colorFormat
演示地址:http://www.fxss5201.cn/project/plugin/colorFormat/

可能顏色互轉的時候有些微差距,這是由於JavaScript在小數計算時不夠精確或者對數據進行了四捨五入導致的結果,不過轉換的結果與在瀏覽器開發者工具中轉換的結果保持一致(除了個別小數位)。

參數

參數 類型 默認值 描述
color String "#f00" 待轉換的顏色值,支持HEX/RGB/RGBA/HSL/HSLA 5 種格式,並且支持red/orange/yellow/green/cyan/blue/violet/black/white
format String "rgb" 你希望將待轉換的顏色值轉換爲哪種格式的顏色,支持HEX/RGB/RGBA/HSL/HSLA 5種格式

注意

  1. 請自行保證輸入的待轉換色值的正確性,本插件暫未對待轉換色值的正確性進行判斷,後期考慮添加。
  2. 如果是帶有透明度的待轉換色值強制轉換爲RGB/HSL時,轉換結果除complete其他都正確,complete會嚴格按照format轉換格式,所以會將透明度去除,看着感覺顏色不一致。
  3. color參數暫時僅支持red/orange/yellow/green/cyan/blue/violet/black/white 這幾種默認顏色值,如果需要添加更多的參數,請自行在colorFormat.js源代碼的defineColor上添加您需要自定義的顏色,需要和已有的格式保持一致。

返回值

// 返回值一般包括 5 個值,
// format 爲 hex/rgb/rgba
// {
//    r: 紅色(如果format爲rgb/rgba,r爲0~255之間的10進制數,如果format爲hex,r爲00~ff之間的16進制數), 
//    g: 綠色(同上), 
//    b: 藍色(同上), 
//    o: 透明度(同上),
//    complete: 將上述 4 個值拼接成可直接使用的值,在format爲hex時,complete如果可以簡寫,是會直接轉爲簡寫的
// }
// 或者 format 爲 hsl/hsla
// {
//     h: 色調,
//     s: 飽和度,
//     l: 亮度,
//     o: 透明度,
//     complete: 將上述 4 個值拼接成可直接使用的值
// }

使用

首先引入colorFormat.js或者colorFormat.min.js:

<script src="colorFormat.min.js"></script>

會在全局變量上面定義一個colorFormat的方法,你可以直接執行:

colorFormat(); // {r: 255, g: 0, b: 0, o: 1, complete: "rgb(255,0,0)"}
colorFormat({}); // {r: 255, g: 0, b: 0, o: 1, complete: "rgb(255,0,0)"}
// 因爲有默認值,所以上述兩行執行結果一致

colorFormat({color: "red", format: "rgb"}); // {r: 255, g: 0, b: 0, o: 1, complete: "rgb(255,0,0)"}

colorFormat({color: "#ffffff", format: "hex"}); // {r: "ff", g: "ff", b: "ff", o: "ff", complete: "#fff"}

colorFormat({color: "#0080ff", format: "hex"}); // {r: "00", g: "80", b: "ff", o: "ff", complete: "#0080ff"}

colorFormat({color: "#0080ff80", format: "rgba"}); // {r: 0, g: 128, b: 255, o: 0.5, complete: "rgba(0,128,255,0.5)"}

colorFormat({color: "#0080ff80", format: "hsl"}); // {h: 210, s: "100%", l: "50%", o: 0.5, complete: "hsl(210,100%,50%)"}

colorFormat({color: "#0080ff80", format: "hsla"}); // {h: 210, s: "100%", l: "50%", o: 0.5, complete: "hsla(210,100%,50%,0.5)"}

colorFormat({color: "rgba(0,128,255,0.5)", format: "hex"}); // {r: "00", g: "80", b: "ff", o: "80", complete: "#0080ff80"}

colorFormat({color: "rgba(0,128,255,0.5)", format: "hsl"}); // {h: 210, s: "100%", l: "50%", o: 0.5, complete: "hsl(210,100%,50%)"}

colorFormat({color: "rgba(0,128,255,0.5)", format: "hsl"}); // {h: 210, s: "100%", l: "50%", o: 0.5, complete: "hsla(210,100%,50%,0.5)"}

colorFormat({color: "hsla(210,100%,50%,0.5)", format: "hex"}); // {r: "00", g: "7f", b: "ff", o: "80", complete: "#007fff80"}


colorFormat({color: "hsla(210,100%,50%,0.5)", format: "rgba"}); // {r: 0, g: 127, b: 255, o: 0.5, complete: "rgba(0,127,255,0.5)"}

上述僅是列舉了部分例子,更多的例子需要自己去探索。

simpleFun 文件夾內是各個轉換方法的單獨實現,除了上述 5 種格式,還支持rgbhsb轉換,不過由於這兩種方式之間的轉換暫不支持透明度(我暫時還沒理清楚),所以暫未添加到colorFormat中。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章