カラーコード変換
HEX・RGB・HSL を相互に変換します。文字色と背景色のコントラスト比がアクセシビリティ基準を満たしているかも確認できます。
ブラウザ内だけで処理
HEX
#3366cc
RGB
rgb(51, 102, 204)
HSL
hsl(220, 60%, 50%)
コントラスト比のチェック
この組み合わせで表示した本文のサンプルです。
コントラスト比 5.37 : 1 — 本文サイズは AA 基準を満たします、大きい文字は AA 基準を満たします
使い方
色の値を入力すると、ほかの表記が自動で計算されます。HEX は先頭の # を省いても構いませんし、3 桁の短縮形も認識します。
値の横に色見本を表示するので、#3366cc がどんな色かを頭の中で想像する必要はありません。デザインカンプの値をコードに移すときに重宝します。
コントラスト比のチェックでは、文字色と背景色を入れて両者の比率を計算します。WCAG では本文サイズで 4.5:1、大きい文字で 3:1 が目安です。これを下回ると、視力の弱い人には画面の文字が読み取りにくくなります。
入力した値がサーバーに送られることはありません。すべてブラウザーの中で計算しています。
あわせてよく使われるツール
QR コード作成
URL やテキストを QR コードにします。サイズと色を決めて画像として保存できます。
画像トリミング
写真の上で選択範囲をドラッグして必要な部分だけを切り出します。1:1・4:3・16:9 や任意の比率で固定し、JPG・PNG・WebP で保存。ブラウザーの中だけで処理します。
特殊文字フォント変換
英数字のテキストを太字、イタリック、筆記体、フラクトゥール、白抜き、丸囲み、逆さ文字などの Unicode スタイルに変換します。Instagram のプロフィール、ユーザー名、ツイート、チャットにそのまま貼り付けられます。
単位換算ツール
長さ・重さ・温度・面積・体積・データ容量の単位を相互に換算します。坪と平方メートルの換算にも対応しています。