🛠️ToolsShed

Color Converter

HEX、RGB、HSL形式間で色を即座に変換。

rgb(99, 102, 241)
hsl(239, 84%, 67%)

カラーコンバーターは、Webとグラフィックデザインでよりよく使われる形式間で色の値を瞬時に変換します：HEX（#rrggbb）、RGB（赤、緑、青）、HSL（色相、彩度、明度）、HSB/HSV（色相、彩度、輝度）。各形式には利点があります — HEXはコンパクトでCSSで広く受け入れられており、HSLは陰影や色調の選択に直感的です。

サポートされている任意の形式で色の値を入力すると、ツールは自動的に他のすべての形式の同等の値を同時に計算して表示します。ライブカラープレビューで視覚的に結果を確認できます。

このツールは、FigmaとPhotoshopとコード間で色を移動させるデザイナー、およびスタイルシート全体の色の一貫性を確保する開発者に役立ちます。すべての変換はブラウザ内で行われます。

よくある質問

コード実装

import colorsys

# HEX → RGB
def hex_to_rgb(hex_color: str) -> tuple[int, int, int]:
    hex_color = hex_color.lstrip("#")
    r, g, b = (int(hex_color[i:i+2], 16) for i in (0, 2, 4))
    return r, g, b

# RGB → HEX
def rgb_to_hex(r: int, g: int, b: int) -> str:
    return f"#{r:02X}{g:02X}{b:02X}"

# RGB → HSL  (uses colorsys, which returns 0–1 floats)
def rgb_to_hsl(r: int, g: int, b: int) -> tuple[float, float, float]:
    h, l, s = colorsys.rgb_to_hls(r / 255, g / 255, b / 255)
    return round(h * 360, 1), round(s * 100, 1), round(l * 100, 1)

# Example
r, g, b = hex_to_rgb("#3B82F6")
print(f"RGB: {r}, {g}, {b}")           # RGB: 59, 130, 246
print(rgb_to_hex(r, g, b))             # #3B82F6
h, s, l = rgb_to_hsl(r, g, b)
print(f"hsl({h}, {s}%, {l}%)")         # hsl(217.0, 91.2%, 59.8%)

Comments & Feedback

Comments are powered by Giscus. Sign in with GitHub to leave a comment.