色を hex・RGB・HSL・名前付き形式の間で変換する

色の値を hex(#ff5733)、rgb()、hsl()、CSS の名前付きカラーの間で変換し、さまざまな文脈で使えるようにします。

1

色には多くの表現形式があります。hex(#ff5733)、rgb(255,87,51)、hsl(11,100%,60%)、名前(red)などです。ツールや文脈によって好まれる形式が異なります。変換は表現を変えるだけで、色そのものは正確に保たれます。
2

カラーコンバーター →
任意の形式で色を貼り付けます。ツールは hex、rgb、rgba、hsl、hsla、および最も近い CSS 色名を出力します。
3

画像カラーピッカー →
色を視覚的に選んで、すべての形式での値を取得できます。特定の入力色がなくて探索したい場合に便利です。

よくある質問

HSL 変換の結果が見た目で変わるのはなぜですか?: HSL はデバイス依存(ディスプレイの色空間による)です。変換は sRGB 上では数学的に厳密ですが、広色域ディスプレイでは知覚的な差異が生じます。色が重要な作業では、色空間を明示的に指定してください。
すべての色をすべての形式で表せますか?: sRGB の範囲内では可能です。hex、rgb、hsl は等価です。sRGB の外の色(P3、Rec.2020)は 8 ビット hex では表せません。アルファ(透明度)には rgba/hsla または 8 桁 hex(#rrggbbaa)が必要です。6 桁 hex にアルファはありません。

このタスクを解決するワークフロー

Hex カラーから RGB とコントラストチェック

Hex カラーを RGB に変換し、その後 WCAG コントラスト比をチェックする。

パイプライン

関連ツール

カラーコンバーター

Convert colors between HEX, RGB, HSL, HSV, and CMYK color spaces. Auto-detects input format。無料、プライベート、100%クライアントサイド。

画像カラーピッカー

Extract dominant colors from image。無料、プライベート、100%クライアントサイド。

カラーミキサー

Blend two colors by ratio using normal, multiply, screen, overlay, darken, or lighten blend modes。無料、プライベート、100%クライアントサイド。