Color Converter
Examples
HEX
#2563ebRGB
rgb(37, 99, 235)HSL
hsl(221.2, 83.2%, 53.3%)HEX, RGB, and HSL are derived from one canonical RGB color so values do not drift as you edit.
HEX to RGB, RGB to HEX, and HSL in one converter
Search queries such as HEX to RGB and RGB to HEX are the same job: one color, several notations. This converter keeps a single RGB source so HEX, rgb(), and hsl() cannot disagree after you edit a channel.
Use HEX in CSS custom properties, RGB when you talk to canvas or ImageData, and HSL when you want to rotate hue for a palette. Toolshelf does not send the color to a conversion API.
Frequently asked questions
- Does this replace separate HEX to RGB tools?
- Yes. HEX to RGB, RGB to HEX, HEX to HSL, HSL to HEX, and RGB to HSL all use this one converter. There are no extra doorway pages for each direction.
- How are values rounded?
- RGB channels are stored as integers from 0 to 255. HSL hue, saturation, and lightness are rounded to one decimal for display. HEX is lowercase. Conversions always start from the same RGB color so repeated edits do not accumulate drift.
- Are 8-digit HEX colors supported?
- Yes. 8-digit HEX includes alpha. The preview uses the opaque RGB for the native color control, and CSS output uses rgba/hsla when alpha is not 1.
- When should I use HEX vs RGB vs HSL?
- HEX is the usual CSS token. RGB matches canvas and design tool channels. HSL is easier when you want to rotate hue or lighten a color without guessing HEX digits.
- Is conversion done on a server?
- No. Parsing and math run in JavaScript on your device. Optional ?hex= query values are read only in the page.
Related guides
Short articles that explain the problem this tool solves.
- How to Convert HEX to RGB — HEX and RGB describe the same sRGB color. Learn how #ff0000 becomes rgb(255, 0, 0), how short HEX expands, and how to convert in the browser.
Related tools
Continue with related browser-based tools on Toolshelf.
- Color Picker — Free online color picker with HEX, RGB, and HSL.
- WCAG Contrast Checker — WCAG contrast checker for text and UI colors.
- Color Palette Generator — Color palette generator from a base HEX.
- CSS Gradient Generator — CSS gradient generator for linear, radial, and conic backgrounds.
- QR Code Generator — Create QR codes for URLs, text, Wi-Fi, contacts, email, phone numbers and more.
- Image to Base64 Converter — Image to Base64 converter.
- Color Shades & Tints Generator — Color shades and tints generator.
- Random Color Generator — Random color generator for HEX, RGB, and HSL.
Examples
HEX to RGB
#2563eb converts to rgb(37, 99, 235).
Use cases
- For Designers — Pick colors, check contrast, and build palettes and gradients.
What would you like to do next?
Continue working with the next step in this workflow. Recently used tools in this set are listed first.
- Color Picker — Free online color picker with HEX, RGB, and HSL.
- WCAG Contrast Checker — WCAG contrast checker for text and UI colors.
- Color Palette Generator — Color palette generator from a base HEX.
- CSS Gradient Generator — CSS gradient generator for linear, radial, and conic backgrounds.
Related guides
Short articles that explain the problem this tool solves.
- How to Convert HEX to RGB — HEX and RGB describe the same sRGB color. Learn how #ff0000 becomes rgb(255, 0, 0), how short HEX expands, and how to convert in the browser.
You may also need
Continue with related browser-based tools on Toolshelf.
- Color Picker — Free online color picker with HEX, RGB, and HSL.
- WCAG Contrast Checker — WCAG contrast checker for text and UI colors.
- Color Palette Generator — Color palette generator from a base HEX.
- CSS Gradient Generator — CSS gradient generator for linear, radial, and conic backgrounds.
- QR Code Generator — Create QR codes for URLs, text, Wi-Fi, contacts, email, phone numbers and more.
- Image to Base64 Converter — Image to Base64 converter.
- Color Shades & Tints Generator — Color shades and tints generator.
- Random Color Generator — Random color generator for HEX, RGB, and HSL.