グラデーション生成
CSSグラデーションを視覚的に作成。
#F
カラー変換
HEX・RGB・HSL・OKLCH変換＋ピッカー・履歴。
hex#3b82f6
rgbrgb(59, 130, 246)
hslhsl(217.2, 91.2%, 59.8%)
oklchoklch(62.31% 0.188 259.81)
3.68:1
白背景 · 大文字のみ AA
5.71:1
黒背景 · AA
OKLCH は知覚的に均等な色空間で、CSS Color 4 で使えます。コントラスト比は WCAG 2.1 の計算式で、本文は 4.5:1 以上（AA）が目安です。
カラー変換について
カラーコード変換は、WebやUIデザインで使う色の表記（#RRGGBB、rgb()、hsl()、oklch()など）を同じ色のまま別形式に書き換える作業です。デザインシステムやCSS変数の整備に欠かせません。
toco.toolsでは値を入力すると各形式への換算とスウォッチプレビューをブラウザ内で表示します。
モニタや色域によって見え方は異なります。印刷やアクセシビリティ基準（コントラスト比）は別途確認してください。
使い方
- 色コードを入力
- 各形式の結果を確認
- 必要な表記をコピー
よくある質問（FAQ）
カラーコード変換ツールとは何ですか？
同じ色をHEXやRGBなど別のCSS表記に換算するツールです。
入力した色は外部に送信されますか？
いいえ。変換とプレビューはブラウザ内だけで行われます。
OKLCHとは何ですか？
知覚的に均一な色空間で、CSS Color Level 4で使える現代的な色指定方式です。