カラーチャート

四角形で彩度と明度を選び、レインボーバーで色相を変えるか、HEXを入力します。下のカラーコードはリアルタイムに更新されます。

カラーパレット

四角形で彩度・明度をドラッグし、バーで色相を選ぶか HEX を貼り付けます。

HEX

カラーフォーマット

ボックスをクリックすると、そのコードをクリップボードにコピーします。

このツールについて

UI/UXデザイナー、Webフロントエンド開発者、デジタルクリエイターのために、対話型のカラーパレットとリアルタイム色空間変換を統合したプロフェッショナル向けカラーツールです。2D彩度・明度キャンバスと360度色相（Hue）スライダーにより直感的に色を選択でき、Web標準のHEX（8桁アルファ透過対応）、CSS rgb()/rgba()、hsl()/hsla()、印刷用CMYK、デジタル色度空間HSV/HSBの数値をリアルタイムに相互計算・表示します。主要なWebセーフカラーやTailwind CSS・Material Designパレットのプリセット一覧、WCAG 2.1アクセシビリティコントラスト比の検証も搭載し、すべての処理はお使いのブラウザ上で安全かつ軽快に動作します。

お使いの端末内だけで安全に処理します

すべての作業は、いまお使いのブラウザの中だけで行われます。ファイルが外部サーバーに送られることはないので、安心してお使いください。

使い方

2Dカラーピッカーキャンバス上でドラッグして明度と彩度を微調整するか、360度色相スライダーでベースとなる色合いを選択します。

特定の色をピンポイントで確認したい場合は、下部のHEX、RGB、HSL、CMYK入力欄に数値を直接入力して瞬時に検索・変換します。

下部に一覧表示されたWebセーフカラー、パステル、ネオン、UIテーマなどのプリセットパレットから調和のとれた配色を探します。

目的のカラー形式（HEX、RGB、HSL、CMYK）の横にあるコピーボタンをクリックして、CSSスタイルシートやデザインツールに貼り付けます。

主な活用シナリオ

UIデザインシステムおよびCSS変数の定義

ブランドカラーをHEXやRGBA値として正確に計算し、Tailwind CSSの設定やCSSカスタムプロパティ（変数）としてスタイルシートに組み込みます。

画面表示用RGBから商業印刷用CMYKへの色補正

モニタ画面で作成したRGBデザインを印刷入稿用のCMYK標準インキ比率へと変換し、印刷時の予期せぬ色くすみやトーンのズレを防止します。

WCAG 2.1アクセシビリティコントラスト比検証

文字色と背景色の輝度コントラスト比（AA基準: 4.5:1以上、AAA基準: 7:1以上）を確認し、視覚障害者や高齢者にも読みやすい配色を設計します。

調和のとれたグラデーション・アクセントカラー抽出

メインカラーのHSL色相角度を段階的に回転させ、補色（コンプリメンタリー）や類似色（アナロガス）のカラーパレットを論理的に構成します。

ダークモード／ライトモードのテーマ調和

明度（Lightness）パラメータを対称的に操作し、ブランドの印象を損なうことなく目に優しいダークテーマ向けカラーパレットを作成します。

よくある質問 (FAQ)

モニタは光の三原色の加法混色（RGB）で発光し色域が非常に広いのに対し、印刷物は紙に浸透するインキの減法混色（CMYK）を利用するため物理的な色域が狭くなります。当ツールは標準測色変換式を用いて、印刷環境において視覚的に最も近似するCMYK配合値を算出します。

HEXやRGBは光の強さを3つの数値で表すため、色を少し明るくしたり彩度を落とすだけでも計算が複雑になります。一方HSLは「色相（Hue）」「彩度（Saturation）」「明度（Lightness）」が分離されているため、明度や彩度を数%増減させるだけでボタンのホバー・アクティブ状態を直感的に作成できます。

8桁のHEXコードにおいて、先頭6文字はRGB各チャンネルを表し、末尾2文字は透明度（Alphaチャンネル）を16進数（00 = 完全透明、80 = 約50%不透明、FF = 100%完全不透明）で表しています。現代のWebブラウザはCSSで8桁HEXを標準サポートしています。

通常の本文テキストでは背景に対して最低4.5:1以上（レベルAA）のコントラスト比が必要です。大きな文字（18pt/24px以上、または14pt太字）では3:1以上が求められます。より厳格なレベルAAAでは本文7:1以上が必要です。

過去の256色（8ビット）モニタ時代にOSの違いによる色化けを防ぐために規定された216色のパレットです。現在の24/32ビットモニタでは必須ではありませんが、レトロゲームのデザインや簡潔で統一感のあるミニマルパレットを作成する基準として親しまれています。

はい。選択したカラーやコピー履歴はお使いのブラウザのローカルストレージ（LocalStorage）に一時保存されるため、ページのリロードや再訪問時でも直前の履歴をそのまま確認・利用できます。