モキュとシラツムのカラーピッカー / 開発

基本的な使い方

カラーピッカーを表示するには、HTMLファイルに以下のコードを追加します。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>カラーピッカー</title>
</head>
<body>
    <div id="colorPicker"></div>

    <script src="https://mokyushira.shiratsumu.jp/colorpicker.js"></script>
    <script>
        const picker = new CircularColorPicker('#colorPicker');
    </script>
</body>
</html>

オプション設定

カラーピッカーの初期値や動作をカスタマイズできます。

JavaScript

const picker = new CircularColorPicker('#colorPicker', {
    size: 300,                        // サイズ (px)
    initialHue: 180,                  // 初期色相 (0-360)
    initialSaturation: 80,            // 初期彩度 (0-100)
    initialLightness: 50,             // 初期明度 (0-100)
    rotationSpeed: 60,                // 回転速度 (度/秒)
    saturationOscillationSpeed: 80,   // 彩度振動速度 (%/秒)
    lightnessOscillationSpeed: 80,    // 明度振動速度 (%/秒)
    onChange: (color) => {
        console.log(color.hex);       // #rrggbb
        console.log(color.rgb);       // { r, g, b }
        console.log(color.hsl);       // { h, s, l }
    }
});

メソッド

カラーピッカーの色を取得・設定するメソッドです。

JavaScript

// 色を取得
const color = picker.getColor();
console.log(color.hex);  // "#ff5733"
console.log(color.rgb);  // { r: 255, g: 87, b: 51 }
console.log(color.hsl);  // { h: 10, s: 100, l: 60 }

// 色を設定
picker.setColor({ h: 120, s: 100, l: 50 });

応用例

カラーピッカーで選んだ色を他の要素に適用する例です。

JavaScript

const picker = new CircularColorPicker('#colorPicker', {
    onChange: (color) => {
        // 背景色を変更
        document.body.style.backgroundColor = color.hex;
        
        // テキストに色を表示
        document.getElementById('colorCode').textContent = color.hex;
        
        // ボーダーの色を変更
        document.querySelector('.box').style.borderColor = color.hex;
    }
});