RGB・HEX・HSLをリアルタイムで相互変換できる無料ツールです。カラーピッカーで色を選ぶか、HEXコードを直接入力するか、スライダーをドラッグするだけで全ての値が即座に更新されます。コピーボタンでCSS用の値を一発コピー。

カラー入力

RGBスライダー

R
G
B 
<!-- HSL sliders -->
<div class="rhc-panel">
  <h3>HSLスライダー</h3>
  <div class="rhc-hsl-group">
    <div class="rhc-hsl-row">
      <span class="rhc-hsl-label">H</span>
      <input type="range" class="rhc-slider slider-h" id="rhcH" min="0" max="360" value="243">
      <span class="rhc-hsl-val" id="rhcHVal">243°</span>
    </div>
    <div class="rhc-hsl-row">
      <span class="rhc-hsl-label">S</span>
      <input type="range" class="rhc-slider slider-s" id="rhcS" min="0" max="100" value="100">
      <span class="rhc-hsl-val" id="rhcSVal">100%</span>
    </div>
    <div class="rhc-hsl-row">
      <span class="rhc-hsl-label">L</span>
      <input type="range" class="rhc-slider slider-l" id="rhcL" min="0" max="100" value="70">
      <span class="rhc-hsl-val" id="rhcLVal">70%</span>
    </div>
  </div>
</div>
HEX #6C63FF
RGB rgb(108, 99, 255)
HSL hsl(243, 100%, 70%)

カラー履歴（最新10件）

まだ履歴がありません。色を選ぶと自動保存されます。

事業の請求書・経費管理もかんたんに

freee会計なら、請求書作成・経費精算・確定申告までクラウドで一元管理。無料トライアル実施中。 freeeを無料で試す →

関連ツール

カラーパレット → カラーパレット生成 コントラスト確認 → コントラストチェッカー 色覚シミュレーション → 色覚シミュレーター

確定申告・会計をもっとラクに？ freee会計 なら、フリーランスの経費管理もクラウドで簡単。まずは無料で試してみましょう。