16進数のカラーコード(HEX)と、RGB・HSL・HWB などのカラーモデルを相互変換できる、「カラーコード相互変換ツール」をリリースしました。

LINE着せかえ「回るお寿司」販売中!

使い方

カラーピッカーから色を選択するか、各カラーモデルの入力欄に値を入力すると、他のカラーモデルの値がリアルタイムで相互変換されます。

CSS での使用が可能なカラーモデル(HEX・RGB・HSL・HWB)については、CSS の指定値をそのままペーストすることができます

ペースト可能な値の例

以下は、各カラーモデルの入力欄においてペーストが可能な値の例です。# 無しや、( ) 内の数値だけの場合も有効です。ペーストされた文字列は、各成分に分解されて入力欄に反映されます。

HEX 入力欄

  • #F09
  • #F09A
  • #FF0099
  • #FF0099AA

RGB 入力欄

  • rgb(128 0 255)
  • rgb(50% 0% 100%)
  • rgb(128 0 255 / 0.5)
  • rgb(128 0 255 / 50%)
  • rgba(128, 0, 255, 0.5)

HSL 入力欄

  • hsl(180 100% 50%)
  • hsl(180deg 100% 50%)
  • hsl(0.5turn 100% 50% / 0.5)
  • hsl(180 100% 50% / 50%)
  • hsla(180, 100%, 50%, 50%)

HWB 入力欄

  • hwb(80 0% 0%)
  • hwb(80deg 0% 0%)
  • hwb(0.25turn 0% 0% / 0.5)
  • hwb(80 0% 0% / 50%)

ツールはこちら