• Blog
  • Advertise
Color Mapper
  • Blog
  • Advertise

One palette, from screen to press.

Start with a coloror just convert one

Tools

  • All color tools
  • ·Palette generator
  • ·Color wheel
  • ·Gradient generator
  • ·Contrast checker
  • ·Print gamut checker
  • ·Compare colors
  • ·Tint & shade scale
  • ·Palette from image
  • ·Color blindness sim

Convert

  • RGB to CMYK
  • ·HEX to CMYK
  • ·CMYK to RGB
  • ·HEX to RGB
  • ·CMYK to HEX
  • ·RGB to HEX

Learn

  • Color models
  • ·Color theory basics
  • ·WCAG contrast guide
  • ·Blog
Color Mapper home

© 2026 Color Mapper. Built by Yuurrific.

  • Advertise
  • Terms of service
  • Privacy policy

    RGB to HSL Color Converter

    Derive HSL from RGB to theme dark mode, hover states, and accessible variants. Built for design-system workflows.

    Advertisement

    RGB to HSL Converter: Adjust Colors Easily

    You've got RGB values like (255, 87, 51), but you need to make it lighter or adjust the saturation. RGB doesn't make that easy.

    The RGB (Red, Green, Blue) and HSL (Hue, Saturation, Lightness) color models are widely used in digital design. RGB is the primary format for screens, while HSL provides a more intuitive way to adjust colors based on their hue, saturation, and lightness.

    Our RGB to HSL converter allows designers and developers to quickly and accurately switch between these formats, ensuring perfect color harmony in UI/UX, web design, and branding.

    What is RGB and HSL?

    RGB (Red, Green, Blue) is an additive color model used in digital displays. Colors are created by adjusting the intensity of red, green, and blue light.

    HSL (Hue, Saturation, Lightness) is a more human-friendly way of defining colors. It represents colors in terms of:

    • Hue (H): The color type (0° to 360°, where 0° is red, 120° is green, and 240° is blue).
    • Saturation (S): Intensity of the color (0% is grayscale, 100% is full color).
    • Lightness (L): The brightness of the color (0% is black, 100% is white).

    Why Convert RGB to HSL?

    HSL makes color adjustments easier because it aligns with how people perceive color. Some benefits include:

    • Better UI/UX Design: Easily adjust colors for web and mobile interfaces.
    • Simplified Styling: HSL is widely used in CSS to tweak colors efficiently.
    • Improved Accessibility: Adjusting saturation and lightness helps with contrast and readability.

    How to Convert RGB to HSL

    Our RGB to HSL converter simplifies the process. Just enter yourRGB values (0-255), and our tool will instantly return thecorresponding HSL values.

    Why use our tool?

    • Instant and accurate conversions – No complex calculations required.
    • Free and unlimited – Convert as many colors as you need.
    • Perfect for designers and developers – Easily adjust colors in CSS and digital art.

    RGB to HSL Conversion Formula

    If you want to manually convert RGB to HSL, use the following formula:

    R', G', B' = R/255, G/255, B/255
    Max = max(R', G', B')
    Min = min(R', G', B')
    L = (Max + Min) / 2
    If Max == Min → H = 0, S = 0
    Else:
    Δ = Max - Min
    S = Δ / (1 - |2L - 1|)
    H = Based on which color is Max:
    If R' is Max → H = (G' - B') / Δ (mod 6) * 60°
    If G' is Max → H = (B' - R') / Δ + 2 * 60°
    If B' is Max → H = (R' - G') / Δ + 4 * 60°

    Example: RGB (255, 87, 51) → HSL (10°, 100%, 60%)

    Convert More Colors – Try Our Free Tools

    Need additional color conversions? Explore our:

    • HSL to RGB Converter – Convert back to RGB easily.
    • RGB to Hex Converter – Perfect for web design.
    • RGB to CMYK Converter – Get print-ready colors.

    Whether you're working on web development, digital design, or branding, our RGB to HSL converter is the perfect tool to help you achieve consistent and accessible color designs. Try it now!

    Enter RGB Value

    Color Preview

    HSL: hsl(342, 55%, 51%)

    Explore more tools

    More color tools

    Palettes, gradients, accessibility checks, and format converters — all free.

    Generators & checkers

    • Color Palette GeneratorGenerate harmonious palettes from one color — complementary, triadic, analogous, and more. CMYK values and print gamut warnings included.
    • CSS Gradient GeneratorBuild linear, radial, and conic CSS gradients with live preview. Copy production-ready code instantly.
    • WCAG Contrast CheckerCheck color contrast ratios against WCAG 2.1 AA and AAA. Includes palette matrix mode and auto-fix suggestions.
    • Tint & Shade GeneratorTurn one brand color into a Tailwind-compatible 50–950 scale with WCAG contrast badges on every swatch.
    • Palette from ImageExtract dominant colors from any photo — runs entirely in your browser. Send colors to converters or palette tools.
    • Color Blindness SimulatorPreview palettes as seen with protanopia, deuteranopia, or tritanopia. Essential for accessible design.

    HEXconverters

    4 tools
    • HEX to CMYK
      → CMYKOpen
    • HEX to HSL
      → HSLOpen
    • HEX to HSV
      → HSVOpen
    • HEX to RGB
      → RGBOpen

    RGBconverters

    2 tools
    • RGB to CMYK
      → CMYKOpen
    • RGB to HEX
      → HEXOpen

    CMYKconverters

    3 tools
    • CMYK to HEX
      → HEXOpen
    • CMYK to HSL
      → HSLOpen
    • CMYK to RGB
      → RGBOpen

    HSLconverters

    3 tools
    • HSL to CMYK
      → CMYKOpen
    • HSL to HEX
      → HEXOpen
    • HSL to RGB
      → RGBOpen

    HSVconverters

    4 tools
    • HSV to CMYK
      → CMYKOpen
    • HSV to HEX
      → HEXOpen
    • HSV to HSL
      → HSLOpen
    • HSV to RGB
      → RGBOpen