デザイナーと開発者向けのプロフェッショナルカラー変換
カラーピッカーを開くためにクリック
デザインワークフローでのカラー管理に必要なすべて
HEX、RGB、HSL、CMYKなど様々なカラーフォーマット間をシームレスに変換
入力と同時にリアルタイムでカラー変換とプレビューを表示
WCAG準拠テスト用の内蔵コントラスト比計算機
ウェブとデジタルデザインプロジェクトに最適なRGBとHEX値
あらゆるデバイスでシームレスに動作するレスポンシブデザインツール
プロフェッショナルな印刷デザインワークフロー向けの正確なCMYK変換
CSS、Swift、Androidなどのコードフォーマットを直接コピー
カラーパレットを保存してデザインツール用に様々な形式でエクスポート
デザインニーズに合ったカラーフォーマットを選択
#FF5733ウェブデザインとCSSに最適な16進数表記
ウェブデザイン、CSS、HTML、デジタルグラフィックス
rgb(255, 87, 51)スクリーンベースのデザインのための赤・緑・青の値
デジタルディスプレイ、ウェブ開発、写真編集
hsl(14, 100%, 60%)直感的な色調整のための色相・彩度・明度
デザインシステム、色彩理論、アニメーション
cmyk(0%, 66%, 80%, 0%)プロフェッショナルな印刷のためのシアン・マゼンタ・イエロー・ブラック
印刷デザイン、ブランディング、マーケティング素材
デザインにおける効果的な色使いのためのプロのヒント
RGB は赤、緑、青の値に対して十進数 (0-255) を使用します。一方、HEX は十六進表記 (00-FF) を使用します。両者は同じ色を異なる形式で表します。HEX はよりコンパクトで、ウェブデザインで一般的に使用されます。
ビジネスカード、パンフレット、ポスターなどの印刷物には CMYK を使用してください。CMYK は紙上でインク色が混ざる方法 (減法混色) を表します。一方、RGB は画面用 (加法混色) です。形式間で色が異なって見える場合があります。
組み込みのアクセシビリティチェッカーを使用してコントラスト比を確認してください。通常のテキストには少なくとも 4.5:1、大型テキストには 3:1 を目指してください。また、色覚異常シミュレーターでデザインをテストし、情報が色だけで伝わらないようにしてください。
はい！ 弊社の変換ツールは、Photoshop、Illustrator、Sketch、Figma、CSS、Swift、Android 開発を含む人気のデザインツール向けにフォーマットされた色コードを提供します。必要な形式をコピーするだけです。
HSL (色相、彩度、明度) は人間の知覚に合った方法で色を表します。色のバリエーションを作成したり、明るさ/彩度を調整したり、プログラム的に調和の取れた配色を構築したりするのに優れています。
弊社の変換は数学的に正確で、業界標準に従っています。ただし、実際の色表示は画面のキャリブレーション、色プロファイル、視聴条件によりデバイス間で異なります。
その他のデザイン・カラーツールを探す