Skip to main content
L
Loopaloo
Buy Us a Coffee
All ToolsImage ProcessingAudio ProcessingVideo ProcessingDocument & TextPDF ToolsCSV & Data AnalysisConverters & EncodersWeb ToolsMath & ScienceGames
Guides & BlogAboutContact
Buy Us a Coffee
L
Loopaloo

Free online tools for developers, designers, and content creators. All processing happens entirely in your browser - your files never leave your device. No uploads, no accounts, complete privacy.

support@loopaloo.com

Tool Categories

  • Image Tools
  • Audio Tools
  • Video Tools
  • Document & Text
  • PDF Tools
  • CSV & Data
  • Converters
  • Web Tools
  • Math & Science
  • Games

Company

  • About Us
  • Contact
  • Blog
  • FAQ

Legal

  • Privacy Policy
  • Terms of Service
  • Disclaimer

Support

Buy Us a Coffee

© 2026 Loopaloo. All rights reserved. Built with privacy in mind.

Privacy|Terms|Disclaimer
  1. Home
  2. Converters & Encoders
  3. Color Converter
Add to favorites

Color Converter

Convert between HEX, RGB, HSL, and CMYK color formats

HEX, RGB, HSL, and HSB describe the same color through different coordinate systems in the sRGB color space. HEX is compact (six hex digits encoding 24-bit RGB, plus two more for alpha in the newer 8-digit form). RGB is the same values in decimal (0-255 per channel). HSL and HSB rearrange the axes: both use hue (0-360 degrees on the color wheel) and saturation (0-100%), but they disagree on the third axis. HSL's lightness runs black -> pure color -> white, so 0% is black, 50% is the pure color, and 100% is white. HSB's brightness runs black -> pure color, so 0% is black and 100% is the pure color, there is no path to white in HSB without reducing saturation. Same hue, different scales, and the conversion between them is a fixed formula (not a lookup). Which format you choose depends on what you are doing. HEX is the web default because it is concise and copy-pasteable; browsers, design tools, and code all accept it without conversion. HSL is the format of choice when you need to generate tints and shades programmatically, because "the same color 10% lighter" maps directly to an HSL lightness tweak. HSB is common in photo and color-selection UIs because "pure pigment at 100% brightness" maps to the familiar artist's intuition. RGB is the format to use when you are interpolating colors in animations or gradients, because RGB math matches what GPUs do natively.

Runs in your browser and files never uploadedMore converters & encodersJump to full guide

Related reading

  • Understanding Color Spaces: sRGB, Display P3, and When It Matters12 min read
  • Color Theory for Developers: RGB, HSL, and Harmony16 min read

Initializing in your browser…

You might also like

Unix Timestamp Converter

Convert between Unix/Epoch timestamps and human-readable dates. Supports seconds and milliseconds with timezone information

Image Color Palette Extractor

Extract dominant, vibrant, or muted colors from images. Generate color schemes with HEX, RGB, HSL values and export palettes for design projects.

Audio Format Converter

Convert audio files between WAV, MP3, OGG, AAC, M4A, FLAC formats online. Adjust bitrate and quality settings. Free browser-based conversion with no file uploads to servers.

Color Converter: a worked example

A brand asset gives you only #FF5733 but your CSS uses HSL for theming and a print spec needs CMYK.

Input

#FF5733
Color Converter produces

Every model

RGB:  rgb(255, 87, 51)
HSL:  hsl(11, 100%, 60%)
CMYK: 0%, 66%, 80%, 0%

The same colour is expressed in each model you might need: RGB for screens, HSL for building tints by nudging only lightness, and CMYK for print. Converting to CMYK is lossy (screen gamut is wider than ink), which is exactly why seeing the numeric drift here matters before sending artwork to a printer.

What is Color Converter?

HEX, RGB, HSL, and HSB describe the same color through different coordinate systems in the sRGB color space. HEX is compact (six hex digits encoding 24-bit RGB, plus two more for alpha in the newer 8-digit form). RGB is the same values in decimal (0-255 per channel). HSL and HSB rearrange the axes: both use hue (0-360 degrees on the color wheel) and saturation (0-100%), but they disagree on the third axis. HSL's lightness runs black -> pure color -> white, so 0% is black, 50% is the pure color, and 100% is white. HSB's brightness runs black -> pure color, so 0% is black and 100% is the pure color, there is no path to white in HSB without reducing saturation. Same hue, different scales, and the conversion between them is a fixed formula (not a lookup). Which format you choose depends on what you are doing. HEX is the web default because it is concise and copy-pasteable; browsers, design tools, and code all accept it without conversion. HSL is the format of choice when you need to generate tints and shades programmatically, because "the same color 10% lighter" maps directly to an HSL lightness tweak. HSB is common in photo and color-selection UIs because "pure pigment at 100% brightness" maps to the familiar artist's intuition. RGB is the format to use when you are interpolating colors in animations or gradients, because RGB math matches what GPUs do natively.

How to use

  1. 1Enter a color value in any supported format (e.g., #FF5733 or rgb(255, 87, 51)).
  2. 2See the equivalent values in all other formats.
  3. 3Use the color picker for visual selection.
  4. 4Copy any output value to your clipboard.

Key features

  • Supports HEX, RGB, HSL, and HSB color models
  • Visual color picker
  • Live preview swatch
  • Clipboard copy for each format
  • Accepts shorthand HEX (e.g., #F00)

How it works

All four formats encode sRGB, which has a specific gamut defined in 1996. Gamma encoding (a nonlinear transfer function) means that numerical mid-values like RGB(128, 128, 128) are perceptually much darker than the true visual midpoint between black and white. This is why interpolating from red to green in RGB passes through a muddy (128, 128, 0) midpoint rather than a bright yellow: the muddy color is numerically midway but perceptually much darker than either endpoint. The same issue affects HSL and HSB, because they all map back to sRGB values for display.

CSS Color Module Level 4 introduces perceptually uniform color spaces that sidestep this problem. LAB and LCH are device-independent color spaces based on human vision research; OKLAB and OKLCH are refinements that fix some hue-shifting artifacts in the original LAB specification. In OKLCH, lightness corresponds to perceived lightness directly, and interpolating between two colors along the lightness axis produces a smooth perceived brightness gradient rather than the dark dip you get in sRGB. CSS syntax for explicit OKLCH is `oklch(60% 0.2 20)` for 60% lightness, 0.2 chroma, 20-degree hue. Browser support is solid in recent Chrome, Firefox, and Safari versions.

Display P3 is a wider-gamut RGB space (about 25% more colors than sRGB, particularly in saturated reds and greens) that modern Apple and many high-end monitors support. CSS syntax is `color(display-p3 r g b)` with each channel 0 to 1. Specifying colors in Display P3 gives you access to those extra colors on capable displays while browsers automatically remap to the nearest sRGB color on older screens. For most web work, sRGB hex is still the safe default and the format every tool understands; for design systems that want to support wide-gamut displays, P3 and OKLCH are the forward-looking choices. This converter focuses on the sRGB-family formats because they are what CSS has supported for decades and what most tools still emit.

Frequently asked questions

What is the difference between HSL and HSB?

HSL defines lightness from black (0%) through the pure color (50%) to white (100%). HSB defines brightness from black (0%) to the fully saturated color (100%). Same hue, different scales.

Can I enter colors with transparency?

The converter focuses on opaque color values. For alpha channels, append the alpha value manually after converting (e.g., rgba(255, 87, 51, 0.5)).

Does HEX #000 work the same as #000000?

Yes. Three-digit HEX is shorthand, each digit is doubled, so #000 expands to #000000.

Private by design

Conversions run on your device in JavaScript. The values you enter are never sent over the network.