カラーコードを変換する
HEX・RGB・HSL・CMYKと、読みやすさを決めるコントラスト比。
例を読み込むと入力と設定が一時的に変わります。元の内容に戻せます。
0文字
出力
上に貼り付けるか入力すると、ここに結果が表示されます。
ファイルは端末の外に出ません
このツールはすべてブラウザ内で動作します。貼り付けた内容は端末内で処理され、サーバーには送信されないため、トークンや鍵、未公開の文章でも安心して使えます。
使用例
計算・変換例 — カラーコード変換
入力行を順番に入力し、以下の設定を使います。結果を出力行と比較してください。
| 項目 | 値 |
|---|---|
| 入力 1 | #336699 |
| 出力 1 | HEX #336699 |
| 出力 2 | RGB rgb(51, 102, 153) |
| 出力 3 | HSL hsl(210, 50%, 40%) |
| 出力 4 | CMYK 67%, 33%, 0%, 40% |
| 出力 5 | 白地とのコントラスト 6.00:1 · 黒地 3.50:1 |
#336699 は RGB (51, 102, 153)、HSL (210°, 50%, 40%) になります。すべて同じ色です。
使い方
- 色を貼り付けます。#3b5bdb、#fff、rgb(59 91 219)、rgba(59, 91, 219, 0.5)、hsl(228, 69%, 55%) のいずれでも読み取ります。
- 1行に1色ずつ書けば、パレットをまとめて変換できます。
- 各表記と、その下のコントラスト比を確認します。
- 必要な表記をコピーします。
よくある質問
- どの書き方に対応していますか？
- 16進数（3桁・4桁・6桁・8桁）、rgb()とrgba()、hsl()とhsla()です。値の区切りはカンマでも空白でもよく、スラッシュのあとの不透明度も読み取ります。rebeccapurpleのような色名には対応していません（148個の対応表であって、変換ではないためです）。
- 2つのコントラスト比は何のためですか？
- その色に対して、白い文字・黒い文字がどれだけ読みやすいかを示すWCAGの指標です。目安は本文で4.5:1以上、大きめ・太めの文字で3:1以上、最大値は21:1（白地に黒）です。どちらも4.5に届かない色は、背景にすると文字が読みにくくなります。
- CMYKの値は印刷に使えますか？
- 正確な値ではありません。実際のCMYKは印刷機・インク・紙によって変わり、それを記述するのがカラープロファイルです。ここに出るのは単純な計算による値で、目安としては使えますが、印刷所に渡す data には向きません。必ず先方のプロファイルに従ってください。
- 往復させたら色が少しずれました。
- HSLは角度と百分率を整数で表すため、変換して戻すと各チャンネルが1〜2ずれることがあります。厳密さが要るところでは16進数のまま扱ってください。
- サーバーに送られますか？
- いいえ。計算だけなので、このページの中で完結します。