Colors.js 除了能在 RGB、Hexadecimal、HSV 及 HSL 中將各種顏色值做轉換之外；它還提供了隨機產生顏色值及針對指定的顏色值來產生互補的顏色值，這樣就不用特別煩惱當某區塊有背景顏色後，文字要怎樣配色的問題囉！
套件名稱：Colors.js
套件版本：1.0
作者網站：http://matthewbj.github.com/Colors/
發佈日期：2012-02-14
檔案大小：15.2 KB
檔案下載：colors.js
參數選項說明：
檢視原始碼 JavaScript
1 | 無 |
方法說明：
檢視原始碼 JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | // 把 RGB 顏色陣列([R,G,B])或單一的顏色值(R, G 或 B)轉換成十六進位制(Hexadecimal)的顏色值; 若回傳的是六位數的十六進位制(Hexadecimal)的值時, 前面會補上 # Colors.rgb2hex(rgbv); // 把十六進位制(Hexadecimal)的顏色值轉成 RGB 物件; 該物件的屬性有 R, G, B, RGB 字串(例如 '255 255 255') 及 [ R, G, B ] Colors.hex2rgb(h); // 把十六進位制(Hexadecimal)的顏色值轉成 HSV 物件; 該物件的屬性有 H, S, V, HSV 字串(例如 '0 0 100') 及 [ H, S, V ] Colors.hex2hsv(h); // 把 HSV 物件([H, S, V])或 HSV 顏色值(H, S, V)轉換成 RGB 物件; 該物件的屬性有 R, G, B, RGB 字串(例如 '255 255 255') 及 [ R, G, B ] Colors.hsv2rgb(HSV, S, V); // 把 RGB 物件([R, G, B])或 RGB 顏色值(R, G, B)轉換成 HSL 物件; 該物件的屬性有 H, S, L, HSL 字串(例如 '0, 100, 50') 及 [ H, S, L ] Colors.rgb2hsl(RGB, G, B); // 把 HSV 物件([H, S, V])或 HSV 顏色值(H, S, V)轉換成 HSL 物件; 該物件的屬性有 H, S, L, HSL 字串(例如 '0, 100, 50') 及 [ H, S, L ] Colors.hsv2hsl(HSV, S, V); // 取得指定十六進位制(Hexadecimal)的顏色值的互補十六進位制(Hexadecimal)的顏色值 Colors.complement(c); // 取得指定RGB 顏色陣列([R,G,B])或單一的顏色值(R, G, B)的互補十六進位制(Hexadecimal)的顏色物件; 該物件的屬性有 R, G, B, RGB 字串(例如 '255 255 255') 及 [ R, G, B ] Colors.complement(c, g, b); // 把 176 個標準的 HTML 顏色名稱轉換成十六進位制(Hexadecimal)的顏色值 Colors.name2hex(n); // 把 176 個標準的 HTML 顏色名稱轉換成 RGB 物件; 該物件的屬性有 R, G, B, RGB 字串(例如 '255 255 255') 及 [ R, G, B ] Colors.name2rgb(n); // 把 176 個標準的 HTML 顏色名稱轉換成 HSV 物件; 該物件的屬性有 H, S, V, HSV 字串(例如 '0 0 100') 及 [ H, S, V ] Colors.name2hsv( [object R,G,B] or [Int R, G or B] ); // 取得一個指定 mode 的顏色值; 允許的 mode 值有 'hex' 及 'rgb' Colors.rand(mode); |
使用範例：
檢視原始碼 JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="colors.js"></script> <style type="text/css"> .cboxes{ padding: 95px 0; width: 225px; text-align: center; border: 1px solid #666; background-color: #f0f0f0; margin: 15px; float: left; } .a_button { clear: left; margin-left: 15px; } </style> <script type="text/javascript"> $(function(){ // 改變 #color 及 #compr 用的函式 function colors(val){ // 取得互補顏色值 var fontColor = Colors.complement(val, 'hex'); $('#color').css({ backgroundColor: val, color: fontColor }).text(fontColor); $('#compr').css({ backgroundColor: fontColor, color: val }).text(val); } $('#cchange').click(function(event){ event.preventDefault(); // 先取得輸入的顏色值 var val = $('#newcolor').val(); // 判斷是否為符合規則的十六進位制的顏色值 // 若是則執行 color() 函式 /(#([A-Fa-f0-9]){3}(([A-Fa-f0-9]){3})?)/i.test(val) ? colors(val) : alert('顏色必須為一個有效的十六進位制的顏色值。\n\n# 符號是一定要有的。'); }); colors('#77ff33'); }); </script> <body> <div class="cboxes" id="color"></div> <div class="cboxes" id="compr"></div> <p class="a_button"> <span>十六進位制的顏色值:</span> <input type="text" name="newcolor" id="newcolor"> <a href="#" id="cchange">互補</a> </p> </body> |