🎨 カラーコード変換
スウォッチをクリックしてカラーピッカーを開く
Aa白背景でのコントラスト比: 11.64
Aa黒背景でのコントラスト比: 1.80
プリセット
rgb(26, 58, 92)
hsl(211, 56%, 23%)
rgba(26, 58, 92, 1)
HEX・RGB・HSLの3つの表記法でカラーコードを相互変換できるツールです。リアルタイムプレビューと、白背景・黒背景でのコントラスト比チェック機能も備えています。Webデザインやアプリの配色検討、アクセシビリティ確認に役立ちます。
使い方
- スウォッチをクリックしてカラーピッカーを開くか、HEX/RGB/HSLのいずれかの欄に値を入力します。
- 他の表記法の欄にリアルタイムで変換結果が表示されます。
- 白背景・黒背景でのコントラスト比を確認し、必要に応じて色を調整します。
- 「コピー」ボタンで好きな表記法の値をコピーします。
よくある質問
コントラスト比のチェックは何のためにありますか?
WebアクセシビリティのWCAG基準を満たすか確認するためのものです。文字色と背景色の組み合わせが読みやすいかどうかの目安になります。
色の履歴やプリセットは保存されますか?
直近に選んだ色の履歴と、よく使う色のプリセットをその場で確認・再利用できます。
HEXコードからRGB値を調べられますか?
はい。HEX欄にコードを入力するとRGB・HSLの欄に自動的に変換されます。
デザインツールとの色の受け渡しに使えますか?
はい。HEX・RGB・HSLいずれの表記もコピーできるため、Figmaやコードエディタなど別のツールへそのまま貼り付けられます。
アクセシビリティ的に読みやすい配色か確認できますか?
はい。白背景・黒背景それぞれとのコントラスト比が表示されるため、WCAG AA/AAA基準を満たすかどうかの目安になります。