WebTools
🇺🇸🇯🇵🇨🇳🇰🇷

カラーコード変換（HEX/RGB/HSL）

HEX・RGB・HSL形式のカラーコードを相互変換。カラーピッカーでプレビューも確認できます。

ツールを読み込み中...

関連ツール

CSSカラー名一覧グラデーション生成カラーミキサーCSS単位変換（px/rem/em）

カラーコード変換（HEX/RGB/HSL）の主な使い方・用途

  • ✓CSSのカラーコード（HEX）をRGBに変換してJavaScriptで使用
  • ✓デザインツール（Figma等）で指定されたHSLをCSSに変換
  • ✓ブランドカラーの各形式対応表の作成
  • ✓グラデーション設計時のカラーコード確認
  • ✓アクセシビリティチェック前のカラー確認

使い方（ステップ別）

  1. 1
    カラーピッカーで色を選ぶ— カラーピッカーをクリックするか、HEXコードを直接入力します。
  2. 2
    各形式を確認する— HEX・RGB・HSLの値が自動的に更新されます。
  3. 3
    値をコピーする— 各形式のコピーボタンで値をクリップボードに取得します。

このツールの特徴

  • ●HEX・RGB・HSLの3形式を同時表示
  • ●カラーピッカーで視覚的に色を選択
  • ●各値の個別コピー機能
  • ●リアルタイム変換

このツールについて

HEX・RGB・HSL形式のカラーコードを相互変換。カラーピッカーでプレビューも確認できます。