Instantly convert colors between RGB, HEX, and HSL. Use the color picker, type a HEX code, or drag the sliders — all values update live. Click any output to copy the CSS-ready value.

Color Input

RGB Sliders

R
G
B 
<!-- HSL sliders -->
<div class="rhc-panel">
  <h3>HSL Sliders</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%)

Color History (last 10)

No history yet — pick a color to start.

Generate color palettes → Color Palette Generator Check contrast → Contrast Checker Simulate color blindness → Color Blindness Simulator