カラーコードコンバーター
HEX、RGB、HSL、HSV、CMYKカラーフォーマット間で変換
rgb(52, 152, 219)
hsl(204, 70%, 53%)
hsv(204, 76%, 86%)
cmyk(76%, 31%, 0%, 14%)
カラーパレット
#3498DB
#3344DB
#33DBCA
コントラストチェッカー
コントラスト比
3.15:1
How to Use This Tool
カラーの選択
カラーピッカーを使用し、HEXコードを入力し、またはRGB/HSL/HSV/CMYK値を直接調整してください。
すべてのフォーマットの表示
選択したカラーが自動的にHEX、RGB、HSL、HSV、CMYKフォーマットに変換されるのを確認できます。
カラー値のコピー
各フォーマットの隣にあるコピーボタンをクリックして、カラーコードをクリップボードにコピーしてください。
カラーパレットの生成
類似色、補色、三色配色、単色配色のパレットタイプから選択してください。
コントラストのチェック
コントラストチェッカーで色の組み合わせがWCAG AA/AAAに準拠しているかテストしてください。
Pro Tips
- •RGB値は0-255の範囲で、HSL/HSVのパーセンテージは0-100の範囲です
- •CMYKは印刷デザイン用で、RGB/HEXはデジタルディスプレイ用です
- •WCAG AAは通常テキストに4.5:1のコントラスト比を必要とします
- •WCAG AAAはアクセシビリティ強化のために7:1のコントラスト比を必要とします
- •生成されたパレット内のいずれかの色をクリックしてアクティブカラーに設定できます
- •「ランダムカラー」ボタンで新しい色の組み合わせを探索できます
カラーコンバーターとは？
カラーコンバーターは、異なるカラーモデルとフォーマット間でカラー値を変換するデザイナーや開発者にとって不可欠なツールです。Web開発用のHEXコード、デジタルディスプレイ用のRGB値、直感的な色選択用のHSL、印刷デザイン用のCMYKのどれで作業していても、私たちのコンバーターはすべての主要な色空間間でシームレスに変換します。異なるフォーマットでの色の仕組みを理解することは、デジタルと印刷メディア全体での一貫性を保ち、アクセシビリティコンプライアンスを確保し、プロジェクトのための調和のとれた色彩スキームを作成するために重要です。
Key Features
HEX、RGB、HSL、HSV、CMYKカラーフォーマット間で即座に変換
リアルタイムプレビュー付きビジュアルカラーピッカー
カラーパレット生成（類似色、補色、三色配色、単色配色）
アクセシビリティ準拠のためのWCAGコントラスト比チェッカー
CSSカラー名とその変換をサポート
ワンクリックで任意のフォーマットのカラー値をコピー
インスピレーション用ランダムカラージェネレーター
各カラーチャンネルの微調整用精密スライダー
調整時の全カラーフォーマットでのライブアップデート
デザインワークフロー用カラーパレットエクスポート
Common Use Cases
Web開発: PhotoshopやFigmaのデザインカラー（多くの場合HEXまたはRGB）をCSS対応フォーマットに変換し、異なるCSSプロパティ間での一貫したカラーを確保し、プロジェクト間でブランドカラーを維持します。
UI/UXデザイン: WCAG準拠のためのテキストと背景カラー間のコントラスト比をチェックし、アクセシブルなカラーパレットを生成し、視覚障害者を含むすべてのユーザーがデザインを読みやすくします。
ブランドデザイン: デジタル（RGB/HEX）と印刷（CMYK）フォーマット間でブランドカラーを変換し、異なるメディア間でカラーの一貫性を維持し、異なるユースケース用のブランドカラーバリエーションを作成します。
デジタルアート: 色相、彩度、明度の直感的な調整のためにHSLを使用して色を微調整するか、カラー値と鮮やかさのより芸術的なコントロールのためにHSVを使用します。
印刷デザイン: スクリーンカラー（RGB）を印刷対応CMYKカラー値に変換し、印刷メディアでカラーがどのように表示されるかを理解し、加法色モデルと減法色モデルの違いに調整します。
テーマ開発: ウェブサイトやアプリケーション用の完全なカラースキームを生成し、ダーク/ライトモードバリエーションを作成し、デザインシステムとスタイルガイド用のカラートークンをエクスポートします。