カラー値変換ツールをリリースしました

みなさんこんにちは、私は砂漠の果ての狼です。

先日、色値変換ツールをリリースしました。もちろんこれは「参考」にしたもので、以下の機能を実現しています。

1. HEX、RGB、RGBA、ARGB、HSLの相互変換
2. 非常に実用的なCSSカラーテーブルを表示。開発時に参照・使用できます：HTMLおよびCSSカラー仕様で定義されている147色の色名（17の標準色＋130のその他の色）。

本記事では、このツールを開発する際に、関連するJSコードとC#コードの翻訳対比をいくつか簡単に挙げ、今後の同様の開発の参考にしていただきます。

JSファイル：こちら

1. 色値HEX変換

HEX #9A3B34 からR（Red）、G（Green）、B（Blue）の色値を抽出します。

JSコード

function parseHEX(val) {
    let color = new Color();
    try {
        let rgx = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
        let hex = val.replace(rgx, function (m, r, g, b) {
            return r + r + g + g + b + b;
        });
        let rgb = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
        color.r = parseInt(rgb[1], 16);
        color.g = parseInt(rgb[2], 16);
        color.b = parseInt(rgb[3], 16);
    } catch (e) {
        console.log(e)
    }
    return color;
}

C#コード

public static Color? ParseHEX(string hexColor)
{
    hexColor = hexColor.TrimStart('#');

    Regex regex = new(@"^([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$");
    var match = regex.Match(hexColor);

    if (match?.Success == true)
    {
        int red = Convert.ToInt32(match.Groups[1].Value, 16);
        int green = Convert.ToInt32(match.Groups[2].Value, 16);
        int blue = Convert.ToInt32(match.Groups[3].Value, 16);

        return new Color(red, green, blue);
    }
    else
    {
        return null;
    }
}

2. 色値RGBA変換

変換ロジックは基本的に上記と同じです。

JSコード

function parseRGBA(val) {
    let color = new Color();
    try {
        let rgba = /^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/.exec(val);
        color.r = parseInt(rgba[1]);
        color.g = parseInt(rgba[2]);
        color.b = parseInt(rgba[3]);
        color.a = parseFloat(rgba[4] || 1);
    } catch (e) {
        console.log(e)
    }
    return color;
}

C#コード

public static Color? ParseRGBA(string color)
{
    Regex regex = new Regex(@"^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$");
    var match = regex.Match(color);

    if (match?.Success == true)
    {
        int r = int.Parse(match.Groups[1].Value);
        int g = int.Parse(match.Groups[2].Value);
        int b = int.Parse(match.Groups[3].Value);
        if (!double.TryParse(match.Groups[4].Value, out double a))
        {
            a = 1;
        }

        return new Color(r, g, b, a);
    }

    return null;
}

chatGPTを使えば、JSコードをC#コードに簡単に翻訳できます。Blazorのツールを作るのもすぐです。他のオンラインのプログラミング言語翻訳サイトはあまり良くなく、多くの場合は自分で手直しする必要があります。

• 本ツールのアドレス：Blazor Server版、Blazor Wasm版
• サイトのソースコードとIssue：ソースコード、Issue
• .NETバージョン：.NET 8.0.0-preview.5.23280.8
• 微信テクノロジーグループ：サイト運営者の微信（codewf）を追加し、必ず「入群」の2文字をメモしてください
• QQテクノロジーグループ：771992300