デザイナーと開発者が色フォーマットを切り替えるたびに直面する課題です。
デザインツールはHEXを出力し、CSSはHSLを求め、印刷はCMYKを要求します。カラーコード変換ツールなしでは手動で推測するか複数のサイトを行き来するはめになり、貴重な作業時間を無駄にします。
RGBをHSLに手動変換するには三角関数が必要です。計算式のたった一文字のミスで色相が180°ずれてしまいます。Color Mathはすべての計算を瞬時に正確に行います。
多くのカラーピッカーはWCAG 2.1のコントラスト要件を無視しています。Color Mathはコントラスト比を即座に表示するため、最初の色選びからアクセシビリティを組み込めます。
カラープレビュー
#3B82F6
rgb(59, 130, 246)
Current
補色
類似色
三角配色
スウォッチをクリックして読み込む
White text on color
Black text on color
保存した色がここに表示されます
1つのカラーコード変換ツールで、あらゆる色体系に対応。Color Mathは複数のツールを不要にします。
HEX・RGB・HSL・CMYKのどのフィールドを編集してもColor Mathが即座に他のすべてのフォーマットを再計算します。送信ボタンは不要です。
R・G・B・H・S・L・C・M・Y・Kのスライダーをドラッグすると、すべてのフォーマットがリアルタイムで更新されます。キーボードを使わずに微妙な色調整ができます。
Color Mathは現在の色から補色・類似色・三角配色を自動生成します。スウォッチをクリックすると即座に作業色として読み込まれます。
白と黒に対するコントラスト比を一目で確認できます。Color MathはAA・AAA・不合格のラベルを表示し、デフォルトでアクセシブルなデザインを実現します。
保存した色はセッションをまたいでブラウザに保持されます。Color Mathは最大10色の履歴を保存し、いつでも見直しや比較ができます。
Color Mathのすべての計算はブラウザ内で完結します。データの送信はなく、アカウントも不要 — あなたの色はあなただけのものです。
デザインとコードの橋渡しから印刷・アクセシビリティまで — Color Mathは色のワークフロー全体に対応します。
FigmaからHEXを取得しましたか？Color Mathに貼り付けると、CSSカスタムプロパティ用のHSLを即座に取得できます。デザインファイルを再度開くことなく、ホバーやフォーカスの状態に合わせて明度を調整できます。
Color Mathはスクリーンのグラフィックで使用するRGBを理論的なCMYK値に変換し、印刷所に入稿する前に色域外の赤やオレンジを発見できます。コストをかけずに予期せぬ問題を防げます。
Color MathはWCAG 2.1のコントラスト比を白と黒に対してリアルタイムで計算します。テキストの色がAAまたはAAA要件を満たしているかどうかを即座に確認できます — 別のツールは不要です。
3つのステップで色を変換・探索・保存しましょう。
HEXコード（#f00などの短縮形は自動的に展開されます）を入力するか、スライダーをドラッグして開始します。Color MathはHEX・RGB・HSL・CMYKの同時入力に対応しています。
RGB・HSL・CMYKタブを切り替えてスライダーで調整します。パレットパネルまでスクロールすると、Color Mathが生成した補色・類似色・三角配色が表示されます。
コピーボタンをクリックして必要なフォーマットを取得します。「色を保存」を押すと現在の色が履歴パネルに追加されます。Color Mathはセッションをまたいで最大10色を保持します。
Color Mathと色変換に関するよくある質問への回答です。
Color Mathは無料のブラウザベースのカラーコード変換ツールで、HEX・RGB・HSL・CMYKをリアルタイムで相互変換します。カラーパレット（補色・類似色・三角配色）の生成とWCAG 2.1コントラスト比の計算もできます — すべてサーバーリクエストなしで動作します。
Color Mathは標準的な数学的変換式（RGB → CMYK）を使用しており、理論的な概算値として優れています。ただし、実際の印刷出力はプリンター・インク・用紙・ICCカラープロファイルによって異なります。Color Mathは参考値として使用し、プロフェッショナルな印刷カラー管理の代替としては使わないでください。
WCAG 2.1（ウェブコンテンツアクセシビリティガイドライン）は読みやすいテキストのための最小コントラスト比を定義しています。AAは通常テキストで4.5:1、大きなテキストで3:1を要求します。AAAは通常テキストで7:1を要求します。Color Mathは純白と純黒に対するこれらの比率を計算します。
HSL（色相・彩度・明度）はCSSの色の定義方法やデザイナーがティントやシェードを考える方法により直感的に対応しています。HSLの明度50%は色相の最も純粋なバージョンを提供するため、1つの値を調整するだけで明るい・暗いバリエーションを簡単に生成できます。
Color Mathは保存した色をブラウザのlocalStorageにのみ保存します — サーバーには送信されません。履歴はお使いのデバイスとブラウザプロファイルにローカルに保存されます。ブラウザデータを消去すると削除されます。
Color MathはHSL色理論を使ってパレットの色を計算します。補色は色相環の180°反対側です。類似色は±30°です。三角配色は+120°と+240°です。彩度と明度は元の色と同じに保たれるため、パレットは視覚的に一貫性があります。
はい。Color Mathは完全にレスポンシブです。スライダー・入力欄・パレットグリッドはすべて小さな画面に対応します。すべての計算はローカルで行われるためモバイル回線での遅延はありません。
登録不要。初回読み込み後はオフラインでも動作します。
