カラーコード変換(HEX・RGB・HSL)

HEX(#fff・#0d9488)や rgb() の色を入れると、同じ色を HEX・RGB・HSL の3つの表記ですぐに表示し、大きな色見本で確認できます。同じタブでその色のコントラスト比も測れます。

色の変換

HEX
—
RGB
—
HSL
—

コントラスト比(WCAG)

この組み合わせでは文字がこう見えます

—

カラーパレット

このツールについて

使い方

  1. 1 色の値の欄に #HEX(3桁・6桁)か rgb(…) を入れます。
  2. 2 下に HEX・RGB・HSL が並び、色見本にその色が塗られます。
  3. 3 必要な表記をコピーして CSS に入れます。

知っておきたいこと

  • ページ点検は貼り付けた HTML のみ — リンクをたどるには URL チェッカーを
  • YAML は広く使われる文法のみ読みます
  • JWT は中身を展開するだけで署名は検証しません

よくある質問

HSL を入れて HEX にできますか?

入力は #HEX と rgb() です。HSL は結果として表示します。

透明度(アルファ)も変換されますか?

rgba() を入れると色だけを読み、透明度は外します。

3桁の HEX も使えますか?

使えます。#0d9 は #00dd99 として読みます。

Esc