mcpField
C
color-utilities-in-javascript

color-utilities-in-javascript

github.com/rodydavis開発6044 回インストール2 週間前に更新
リポジトリ

color-utilities-in-javascript について

色の値を扱う開発者向けの JavaScript リファレンスです。RGB、HSL、HEX 形式を相互に変換するコード例を掲載しています。

主な機能

  1. 01RGB から HSL への変換
  2. 02HEX から RGB への変換
  3. 03HSL から HEX への変換

活用シーン

  1. 01入力された HEX カラーを RGB に変換
  2. 02色の処理用に RGB 値を HSL に変換

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/rodydavis/skills --skill color-utilities-in-javascript

インストール後、Claude Code で/color-utilities-in-javascriptを入力して読み込まれたか確認します。

詳細

JavaScript のカラー ユーティリティ

GitHub Copilot によって生成されたカラー ユーティリティです。

RGB カラーを HSL に変換する
function rgbToHsl(r, g, b) {
    r /= 255;
    g /= 255;
    b /= 255;
    var max = Math.max(r, g, b);
    var min = Math.min(r, g, b);
    var h, s, l = (max + min) / 2;
    if (max == min) {
        h = s = 0;
    } else {
        var d = max - min;
        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
        switch (max) {
            case r:
                h = (g - b) / d + (g < b ? 6 : 0);
                break;
            case g:
                h = (b - r) / d + 2;
                break;
            case b:
                h = (r - g) / d + 4;
                break;
        }
        h /= 6;
    }
    return [h, s, l];
}
HEX を RGB に変換する
function hexToRgb(hex) {
    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    return result ? {
        r: parseInt(result[1], 16),
        g: parseInt(result[2], 16),
        b: parseInt(result[3], 16)
    } : null;
}
HSL を HEX に変換する
function hslToHex(h, s, l) {
    var r, g, b;
    if (s == 0) {
        r = g = b = l;
    } else {
        var hue2rgb = function hue2rgb(p, q, t) {
            if (t < 0) t += 1;
            if (t > 1) t -= 1;
            if (t < 1 / 6) return p + (q - p) * 6 * t;
            if (t < 1 / 2) return q;
            if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
            return p;
        };
        var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
        var p = 2 * l - q;
        r = hue2rgb(p, q, h + 1 / 3);
        g = hue2rgb(p, q, h);
        b = hue2rgb(p, q, h - 1 / 3);
    }
    return "#" + (1 << 24 | r << 16 | g << 8 | b).toString(16).slice(1);
}

コメント

Markdown 対応