Class: Color

新しいColorクラスを生成します。カラーを指定するメソッドを持った配列です。

構文:

var myColor = new Color(color[, type]);

引数:

  1. color - (いろいろ) 色を表現する文字列か配列。
  2. type - (文字列, オプション) 作りたい色のタイプを表す文字列。

Color:

カラー値には3つの典型的な形式があります:文字列、RGB、HSBです。文字列の表記に関しては、Element:setStyleを見てください。

例:

文字列による表記:
'#fff'
RGBとHSBの表記:
[255, 255, 255]
//または:
[255, 255, 255, 1] //(不透明度)

戻り値:

  • (配列) 新しいColorインスタンス。

例:

var black = new Color('#000');

var purple = new Color([255,0,255]);

注意点:

  • HSBカラー値を使うには、第2引数を指定する必要があります。

Colorメソッド: mix

Colorを使って2色以上を混ぜ合わせます。

構文:

var myMix = myColor.mix(color[, color2[, color3[, ...][, alpha]);

引数:

  1. color - (いろいろ) Colorを使って混ぜたい色を1色以上。16進数かRGB表記にすること。
  2. alpha - (, オプション) 最後の引数がリテラル数ならば、混ぜる色の総量として扱われます。

戻り値:

  • (配列) 新しいColorインスタンス。

例:

// 黒に白10%、紫10%を混ぜます。
var darkpurple = new Color('#000').mix('#fff', [255, 0, 255], 10);

$('myDiv').setStyle('background-color', darkpurple);

Colorメソッド: invert

色を反転させます。

構文:

var myInvert = myColor.invert();

戻り値:

  • (配列) 新しいColorインスタンス。

例:

var white = new Color('#fff');

var black = white.invert();

Colorメソッド: setHue

Colorの色相を修正して、新しいインスタンスを返します。

構文:

var hue = myColor.setHue(value);

引数:

  1. value - () セットする色相。

戻り値:

  • (配列) 新しいColorインスタンス。

例:

var myColor = new Color('#f00');

var myElement = $('myElement');

(function(){
    myElement.setStyle('color', myColor.setHue(myColor.hsb[0]++)));

}).periodical(250);

Colorメソッド: setSaturation

Colorの彩度を変更して、新しいインスタンスを返します。

構文:

var saturate = myColor.setSaturation(percent);

引数:

  1. percent - () セットする彩度のパーセンテージ。

戻り値:

  • (配列) 新しいColorインスタンス。

例:

var myColor = new Color('#f00');
$('myElement').addEvent('mouseenter', function(){

    this.setStyle('background-color', myColor.setSaturation(myColor.hsb[1]++));

});

Colorメソッド: setBrightness

Colorの明度を変更して、新しいインスタンスを返します。

構文:

var brighten = myColor.setBrightness(percent);

引数:

  1. percent - () セットする明度のパーセンテージ。

戻り値:

  • (配列) 当たらしColorインスタンス。

例:

var myColor = new Color('#000');
$('myElement').addEvent('mouseenter', function(){

    this.setStyle('background-color', myColor.setBrightness(myColor.hsb[2]++));

});

Function: $RGB

新しいRGBカラーを生成するショートハンド関数。

構文:

var myColor = $RGB(r, g, b);

引数:

  1. r - () 0から255の赤の値。
  2. g - () 0から255の緑の値。
  3. b - () 0から255の青の値。

戻り値:

  • (配列) 新しいColorインスタンス。

例:

var myColor = $RGB($random(0,255), $random(0,255), $random(0,255));

Function: $HSB

新しいHSBカラーを生成するショートハンド関数。

構文:

var myColor = $HSB(h, s, b);

引数:

  1. h - () 0から359の色相。
  2. s - () 0から100の彩度。
  3. b - () 0から100の明度。

戻り値:

  • (配列) 新しいColorインスタンス。

例:

var myColor = $HSB(50, 50, 100);

Native: Array

Arrayのプロパティを含みます。

参考情報:

Arrayメソッド: rgbToHsb

RGB配列をHSB配列に変換します。

構文:

var myHSB = myRGBArray.rgbToHsb();

戻り値:

  • (配列) HSB値を持つ配列。

例:

var myHSB = [255, 0, 0].rgbToHsb(); //戻り値 [0, 100, 100].

Arrayメソッド: hsbToRgb

HSB配列をRGB配列に変換します。

構文:

var myHSB = myRGBArray.hsbToRgb();

戻り値:

  • (配列) RGB値を持つ配列。

例:

var myRGB = [0, 100, 100].hsbToRgb(); //myRGB = [255, 0, 0]

このドキュメントはMooToolsのドキュメントを元に高橋文樹が翻訳(ちょっと改変)しました。
本家と同じく、Attribution-NonCommercial-ShareAlike 3.0ライセンスで公表されています。

トップに戻る