>_toolkitbox
JAENESPTFR

~/tools / Color Converter

Color Converter

HEX・RGB・HSLのカラーコードを相互変換します。カラーピッカーからも選択できます。

デザインカンプでHEXの色指定を渡されたがCSSではHSLで明度を調整したい、というように、実装中にカラーコードの表記形式を行き来したいときに使います。

# こんな時に使う

  • デザインカンプで渡されたHEXコードを、CSSでHSLとして明度・彩度を調整するために変換したいとき
  • 他のツールが出力したRGB値を、CSSにそのまま貼れるHEXコードに変換したいとき
  • カラーピッカーで色を選びながら、複数の表記形式を同時に確認したいとき

# 使い方

  1. HEXコード（例: #2563eb）を入力するか、カラーピッカーで色を選びます。
  2. 同じ色のRGB・HSL表記がその場で自動表示されます。
HEX
#2563eb
RGB
rgb(37, 99, 235)
HSL
hsl(221, 83%, 53%)

# FAQ

3桁の短縮HEX（例: #fff）にも対応していますか？
はい。#fffのような3桁の短縮形式も自動的に6桁（#ffffff）として解釈します。

# Related

Hash GeneratorJSON Formatter

# 姉妹サイトで学ぶ