Irodori彩り

色変換

HEX · RGB · HSL · OKLCH · Lab · CMYK

概要 色変換

HEX · RGB · HSL · OKLCH · Lab · CMYK

使い方

HEX・RGB・HSL・HSV・CMYK のいずれかで色を貼り付けると、他のすべての形式でコピーできます。入力に合わせて変換結果がリアルタイムで更新されます。

色変換

どの色形式も同じものを別の言語で表しています。HEX はスタイルシート、RGB は画面とコード、HSL はパレット構築、CMYK は印刷向けです。必要な変換を選び、正確な値・ライブプレビュー・計算式を確認してください。

すべての変換

4 つの色形式

HEX とは?

HEX コードは赤・緑・青のチャンネルを 6 桁の 16 進数で保存し、先頭に # を付けます。2 桁ずつが 1 チャンネルで、00 から FF まで。RGB と同じ 1670 万色を短く表します。CSS、デザインツール、ブランドガイドの標準です。

#RRGGBB
CSS、デザイン受け渡し、ブランドガイド

RGB とは?

RGB は色を 3 つの光チャンネルで表し、それぞれ 0 から 255 です。画面の仕組みに対応し、すべて 255 で白、すべて 0 で黒になります。色を計算する場面に適し、rgba() で透明度を追加できます。

rgb(R, G, B)
コード、Canvas、rgba() の透明度

HSL とは?

HSL は色を色相(0–360°)、彩度(0–100%)、明度(0–100%)に分けます。人が色を説明する方法に近いため、トーンやシェード、一貫したパレットを手作業でもコードでも作りやすい形式です。

hsl(H, S%, L%)
パレット、トーンとシェード、テーマ

CMYK とは?

CMYK は印刷の 4 インクモデルで、シアン・マゼンタ・イエロー・キー(黒)をそれぞれ割合で表します。インクは光を減らすため、画面の鮮やかな色は印刷でくすんで見えることがあります。

cmyk(C%, M%, Y%, K%)
印刷、パッケージ、入稿データ