あらゆる形式のカラーコードを相互変換
デザイナー、開発者、マーケターは、異なる言語を話すツール間で常に色情報をやり取りしています。CSSはHEXやHSLを、ブランドガイドはRGBやCMYKを、デザインアプリはHSBを表示します。このカラーコンバーターは、これらのいずれかの形式で色を入力すると、他のすべての形式で同時に表示し、ワンクリックで各形式をコピーできます。また、アクセシビリティのためのテキストコントラストをチェックし、ティントとシェードのスケールを生成します。
主な機能
- あらゆる入力形式に対応: HEX（3、4、6、8桁）、RGB/RGBA、HSL/HSLA、HSV/HSB、CMYK、3つの数字の羅列、CSSカラーネーム。
- すべての形式を一度に出力: HEX、RGB、HSL、HSV、CMYKを、それぞれコピーボタン付きで表示します。
- 透明度に対応 — アルファ値はHEX8、RGBA、HSLAで保持されます。
- ネイティブカラーピッカーで視覚的に色を選択できます。
- WCAGコントラストチェッカーで、白背景と黒背景に対する通常テキストとラージテキストのAA基準の結果を確認できます。
- ティント＆シェードを輝度10%から90%まで生成。見本をクリックして読み込めます。
カラーフォーマットの解説
- HEX —
#RRGGBBの16進数表記。Webデザインで最も一般的な形式です。オプションで4番目のペアで透明度を設定できます。 - RGB — 赤、緑、青を0から255で指定。スクリーンが実際に色を生成する方法です。
- HSL — 色相（カラーホイール上の位置）、彩度（色の強さ）、輝度。手動での調整が簡単で、輝度だけを変更すれば同じ色の明るい/暗いバージョンを作成できます。
- HSV / HSB — 色相、彩度、明度（明るさ）。デザインツールのカラーピッカーでよく使われます。
- CMYK — シアン、マゼンタ、イエロー、キー（黒）のインクの割合。印刷で使用されます。
使用例
スカイブルーの#0EA5E9は、rgb(14, 165, 233)、hsl(199, 89%, 48%)、hsv(199, 94%, 91%)、そしておよそcmyk(94%, 29%, 0%, 9%)です。白背景に対するコントラスト比は約2.8:1で、大きな見出しやアイコンには問題ありませんが、4.5:1が必要な本文テキストには低すぎます。黒背景では約7.6:1に達し、余裕で基準をクリアします。
色を扱う際のヒント
- HSLでパレットを作成する。 色相と彩度を固定し、輝度を変えることで、一貫性のあるボタンの状態、背景、ボーダーを作成できます。
- コントラストは早めにチェックする。 多くのブランドカラーは、白背景のテキストには明るすぎます。テキストにはスケールから暗い色調を選び、元の色はアクセントとして使用しましょう。
- 意味を伝えるのに色だけに頼らない。 色覚特性を持つ人々のためにも、アイコンやラベルを追加しましょう。
- 印刷では色が変わることを想定する。 明るいRGBカラー、特に鮮やかな青や緑は、CMYKではくすんで見えることがよくあります。
画像も扱いますか？画像コンバーターは、JPG、PNG、WebP形式を相互に変換します。小さな画像やアイコンをCSS用にエンコードするには、Base64エンコーダーをご利用ください。