🖼️
画像変換
画像変換
カラーコード変換
CMYKはデバイス非依存の近似値です。実際の印刷色は用紙・インク・プロファイルによって変わるため、校正刷りとの照合確認が必要です。
コントラスト比チェック（WCAG）
通常テキスト — この大きさで読まれます
大きいテキスト（24px以上）
5.98:1
AA 通常 4.5:1 · 合格AA 大 3:1 · 合格AAA 通常 7:1 · 不足AAA 大 4.5:1 · 合格
パレット生成
補色
類似色
三色配色
明度段階
カラーツール機能
Color Converter — HEX・RGB・HSL・CMYKを同時に表示します。入力はHEX・rgb()・hsl()はもちろん、green・tomatoといったCSSの色名も自動認識し、カラーピッカーで目で選ぶこともできます。 Contrast Checker — 文字色と背景色のコントラスト比をWCAG 2.1の式で計算し、AA・AAA基準の合否をすぐに表示します。実際の文字の見え方もプレビューで確認できます。 Palette Generator — 基準色から補色・類似色・三色配色と9段階の明度パレットを生成します。色を押すとHEXがコピーされます。 すべての計算はブラウザ内で行われます。
使い方
① 色の欄にHEX・RGB・HSLまたは色名を入力するか、カラーピッカーで選びます。 ② HEX・RGB・HSL・CMYKの4表記がすぐに表示され、押すとコピーされます。 ③ コントラスト比を見るには文字色と背景色をそれぞれ入力します。比率とAA・AAAの合否が計算されます。 ④ 下のパレットから合う色を選んでコピーします。
こんなときに
• デザインカンプのHEXをCSSやデザインツール向けの表記に変換 • アクセシビリティ点検で文字色が基準を満たすか確認 • ブランドカラーに合う補助色を探す • ボタン・バッジ用の明度段階を作る • 印刷依頼前にCMYK近似値を確認
よくある質問
- Q. どの形式で入力できますか？
- A. HEX（#16A34A、#1A4）、rgb(22,163,74)、hsl(142,76%,36%)のほか、green・tomatoといったCSSの色名も認識します。ブラウザの色解釈をそのまま使うため、CSSで有効な表記ならたいてい動作します。
- Q. コントラスト比はいくつ必要ですか？
- A. WCAG 2.1基準で通常テキストはAAが4.5:1、AAAが7:1です。大きいテキスト（24px以上、または太字18.66px以上）はAAが3:1、AAAが4.5:1に緩和されます。このツールは4つの基準をまとめて表示します。
- Q. CMYK値をそのまま印刷所に渡してよいですか？
- A. お勧めしません。ここで表示されるCMYKはデバイス特性を考慮しない単純な変換式の結果です。実際の印刷色は用紙・インク・カラープロファイルによって変わるため、色が重要な案件では印刷所のプロファイルで変換し、校正刷りをご確認ください。
- Q. 透明度（アルファ）も扱えますか？
- A. 現在は不透明な色のみ扱います。rgbaや8桁HEXを入れるとアルファを除いたRGB値として認識されます。半透明な要素の実際のコントラストは、背後の背景色と混ざった結果で計算する必要があります。
- Q. 明度段階はどのように作られますか？
- A. 基準色の色相（H）と彩度（S）を保ったまま、明度（L）だけを10%から90%まで9段階で変えます。デザインシステムのカラースケールを決める出発点として便利です。