ブランドカラートークン — HEX/HSL/OKLCHスケール

ブラウザで基準色1つからブランドカラートークン一式を作成。手順: 基準色を選ぶ（HEXまたはカラーピッカー）→ HEX/RGB/HSL/OKLCHを確認 → 50–950スケールを生成し各段階に白黒テキストのコントラストペアを表示 → CSS変数またはJSONをコピー。開くとサンプル青 #2563eb を読み込み — アップロードなし。

基準色

色彩空間（基準色）

UIプレビュー

カラースケール（50–950）

使い方

ブランドの基準色を入力または選択。HEX/RGB/HSL/OKLCHを表示し、11段階（50–950）のスケールとUIプレビューを生成。各スウォッチに推奨白/黒文字とコントラスト比を表示。ランプが決まったらCSS変数またはJSONをコピー — すべてローカル処理。

知っておきたいルール

スケール、色彩空間、コントラストの目安、プライバシーについて。

500段階が基準色。それより明るい段階は白へ、暗い段階は黒へ線形混合（sRGB線形ブレンド）。
基準色ブロックにHEX/RGB/HSL/OKLCHを同時表示。OKLCHは sRGB → 線形 → OKLab 変換で、現行CSS色構文と比較しやすくしています。
各スウォッチで黒字か白字か — その背景でコントラストが高い方を推奨。比率はWCAG相対輝度に基づき、AA表示は目安であり完全監査ではありません。
プライバシー: 生成・プレビュー・コピーはこのタブ内で完結。ブランド色はアップロードされません。

例

サンプル（#2563EB）を読み込む。色彩空間ブロックに基準色のHEX/RGB/HSL/OKLCHが表示され、スケールグリッドに50–950各段階の推奨白/黒文字とコントラスト比が並ぶ。CSSをコピーで :root { --color-50: …; … --color-950: …; } がスタイルシートにそのまま使える。

こんなときに

デザインシステム: ブランドHEX1色から50–950ランプとCSS変数を揃え、コンポーネントに配布。
ダークモード設計: 明るい段階（50–300）でサーフェス、深い段階（700–950）でブランド上の文字色を検討。
開発引き渡し: スクショからHEXを打ち直す代わりにJSONトークンやCSSカスタムプロパティをコピー。

Frequently asked questions

色はブラウザ外に出ますか？

いいえ。色計算とエクスポートはこのタブ内で完結し、色はサーバーに送られません。

50–950スケールはどう作られますか？

500段階が入力した基準色です。50–400は白方向へ、600–950は黒方向へ線形混合。sRGB上で色相を保ちやすいランプです。

コントラスト列の意味は？

各スウォッチでその背景に黒字・白字のWCAGコントラストを比較し、高い方を推奨文字色として表示。比率と、通常テキストがAA（4.5:1）または大きい文字AA（3:1）を満たしそうかも示します。

CSS/JSONのコピーには何が含まれますか？

CSSをコピーは :root カスタムプロパティ（--color-50〜--color-950）を出力。JSONをコピーは同じスケールに基準色の各色彩空間を構造化データで返し、デザイントークンやビルドに使えます。

コントラストチェッカーはいつ使う？

各段階の白黒テキストのクイック提案です。任意の前景/背景ペアや正確なWCAGレベルを確認する場合は、WCAGコントラストチェッカーを開き、任意のスウォッチHEXを貼り付けてください。

お問い合わせ・フィードバック

分かりにくい点、不具合、不足があれば下にメッセージを書いてください。ツールに関する内容はすべて確認します。