String1
変換後の色タイプを指定 HSB・HEX・Per・CMYK・Gray ／ 大文字・小文字で指定可能
String2
Styleの取得で得られる色を示す文字列を渡す (例) $getStyle('id').borderColor
●必須引数 ●オプション引数(省略可能)
記述例
$clrStyleRGBTo('HEX', '#FFFFFF')
$clrStyleRGBTo('Per', 'rgb(255, 128, 0)')
$clrStyleRGBTo('cmyk', 'rgba(255, 128, 0, 0.5)')
戻り値
○HSBに変換する場合
・連想配列を返す：['H'] 0–359 ・ ['S'] 0–100 ・ ['B'] 0–100
○HEXに変換する場合
・16進数を文字列で返す。000000–FFFFFF
○パーセントに変換する場合
・連想配列を返す：['R'] 0–100 ・ ['G'] 0–100 ・ ['B'] 0–100
○CMYKに変換する場合
・連想配列を返す：['C'] 0–100 ・ ['M'] 0–100 ・ ['Y'] 0–100 ・ ['K'] 0–100
○グレースケールに変換する場合
・数値を返す。0–100
注意点
第2引数はrgba()タイプにも対応しているが、戻り値は透明度を無視した値となる。
CMYKと他の色システムには完全な互換性はなく、ディスプレイのキャリブレーションによるカラースペースが影響するため、ここで算出される数値はあくまでも参考値となる。
動作サンプル
各ボタンの背景色を、指定したタイプに変換して出力する。
Sass :
#btn1 { background: #8eb8bd; }
#btn2 { background: #bdb88e; }
#btn3 { background: #bd8e9e; }
#btn4 { background: #a6bd8e; }
#btn5 { background: #666666; }
#btn6 { background: rgba(#666666,0.5); }
Javascript :
var colorStr=$dicToString($clrStyleRGBTo('HSB',$getStyle('btn1').backgroundColor),' : ');
var colorStr=$clrStyleRGBTo('HEX',$getStyle('btn2').backgroundColor);
var colorStr=$dicToString($clrStyleRGBTo('Per',$getStyle('btn3').backgroundColor),' : ');
var colorStr=$dicToString($clrStyleRGBTo('CMYK',$getStyle('btn4').backgroundColor),' : ');
var colorNum=$clrStyleRGBTo('Gray',$getStyle('btn5').backgroundColor);
var colorNum=$clrStyleRGBTo('Gray',$getStyle('btn6').backgroundColor); //透明度は無視した数値となる
※上記のサンプルコードは主にPC表示用を想定している。スマホ用のコーディングでは別途調整が必要となる可能性がある。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。