カラー入力
色コードを入力
例: #336699CC、rgb(51 102 153 / 80%)、hsl(210 50% 40%)、hwb(210 20% 40%)、cmyk(67%, 33%, 0%, 40%)、rebeccapurple
準備完了。
ウェブデザインツール
カラー変換
HEX、RGB、RGBA、HSL、HSLA、HSV、HWB、CMYK、一般的な色名を厳密に検証し、アルファのプレビュー、コピー、背景を考慮したWCAGコントラストを表示します。
HEX · RGB · HSL · HWB
#336699rgb(51, 102, 153)
変換結果
色コード形式
HEX#336699
RGBrgb(51, 102, 153)
RGBArgba(51, 102, 153, 1)
HSLhsl(210, 50%, 40%)
HSLAhsla(210, 50%, 40%, 1)
HSVhsv(210, 66.7%, 60%)
HWBhwb(210 20% 40% / 1)
CMYKcmyk(66.7%, 33.3%, 0%, 40%)
CSS変数--color: rgba(51, 102, 153, 1);
アクセシビリティ
コントラスト確認
白背景6.00:1
黒背景3.50:1
カスタム背景上6.00:1
相対輝度0.1251
推奨文字色より強いコントラストには白い文字を使用してください。
透明色はWCAG比率を計算する前に各背景へ合成されます。
色コード一覧
| 色 | 名前 | HEX | RGB | HSL |
|---|---|---|---|---|
| 黒 | #000000 | 0, 0, 0 | 0, 0%, 0% | |
| 白 | #FFFFFF | 255, 255, 255 | 0, 0%, 100% | |
| 赤 | #FF0000 | 255, 0, 0 | 0, 100%, 50% | |
| ライム | #00FF00 | 0, 255, 0 | 120, 100%, 50% | |
| 青 | #0000FF | 0, 0, 255 | 240, 100%, 50% | |
| 黄 | #FFFF00 | 255, 255, 0 | 60, 100%, 50% | |
| シアン | #00FFFF | 0, 255, 255 | 180, 100%, 50% | |
| マゼンタ | #FF00FF | 255, 0, 255 | 300, 100%, 50% | |
| グレー | #808080 | 128, 128, 128 | 0, 0%, 50% |
色変換の注意点
HEXHEXは3、4、6、8桁に対応し、8桁HEXの最後の2桁がアルファ値です。
RGBRGBは従来のカンマ、現代的な空白、パーセント、スラッシュ後のアルファに対応し、各値の範囲を厳密に検証します。
HSL / HSV / HWBHSL、HSV、HWBは色相角を共有しますが、彩度、明度、輝度、白色度、黒色度の表現が異なります。
CMYKCMYKはRGBから算出する印刷用の概算です。正確な印刷にはICCカラープロファイルが必要です。
WCAGWCAG比率は相対輝度を使います。通常文字はAAで4.5:1、AAAで7:1、大きな文字はAAで3:1が必要です。
よく使う色変換
よくある質問
どの色形式に対応していますか？
HEX、RGB、RGBA、HSL、HSLA、HSVまたはHSB、HWB、CMYK、transparent、一般的なCSS色名に対応しています。
現代的なCSS色構文を使えますか？
はい。RGBとHSLは空白区切りとスラッシュによるアルファに対応し、パーセントRGBやdeg、rad、grad、turnの角度単位も使えます。
透明度はコントラスト計算でどう扱われますか？
前景色を白、黒、または指定した背景へ合成してからWCAGコントラスト比を計算します。
CMYK変換は印刷に正確ですか？
いいえ。RGBから求める実用的な概算であり、正確な印刷結果はICCプロファイル、インク、用紙、印刷工程に依存します。