conversion
RGB Color Codes
Convert HEX, RGB, and HSL with a live swatch—copy CSS values for web and design work.
Guide:RGB, HEX & HSL Explained: Read Color Codes, Convert Fast, Use in CSS
RGB color codes
Edit HEX or R/G/B (0–255). Values stay in sync. Copy CSS for your stylesheet.
Accepts #RRGGBB, RGB, or rgb(r, g, b).
Copy
- HEX
- #3B82F6
- RGB
- rgb(59, 130, 246)
- HSL
- hsl(217, 91.2%, 59.8%)
Includes title, description, and page URL.
What this tool does
This tool helps you move between HEX, RGB, and HSL—the formats designers and developers use every day. Adjust channels or paste a color string, preview it instantly, and copy ready-to-paste CSS. New to color notation? Open the guide linked above for a full walkthrough with examples.
How to use
- Type a HEX value (with or without #) or rgb(r, g, b), or set Red, Green, and Blue from 0 to 255.
- Watch the swatch and the HEX, RGB, and HSL readouts update together.
- Tap Copy to grab HEX, rgb(), or hsl() for your stylesheet or design file.
Example
RGB (59, 130, 246) is the same as #3B82F6 and hsl(217, 91%, 60%)—a vivid blue often used for links and accents.
FAQ
Where can I read a beginner-friendly explanation?
See our blog article “RGB, HEX, and HSL Color Codes Explained (With Examples)”—it matches this converter and includes CSS examples.
Does this work with 3-digit HEX?
Yes. Values like #f00 expand to full #FF0000.
Can I paste rgba()?
You can paste rgb(r, g, b). Alpha from rgba is ignored; only the RGB channels are used.
Are HSL values exact?
HSL is derived from your RGB values and rounded for display. Use the copied string directly in CSS.
Related tools
Convert common units for length, weight, and currency basics.
Solve common percentage calculations quickly.
Count words, characters, reading time, speaking time, keyword density, and writing quality in real time.
Popular tools
Calculate BMI with instant category, healthy weight range, personalized gain/loss estimate, and calorie guidance.
Free mortgage payment calculator for PITI: principal & interest, property tax, homeowners insurance, PMI, HOA, and other costs—with monthly vs lifetime totals, total interest, and payoff date.
Calculate net salary after tax with country presets, detailed deductions, monthly/yearly views, hourly rate, and savings estimate.
Calculate exact age instantly with years/months/days, next birthday countdown, zodiac, life progress, and fun age stats.
Count words, characters, reading time, speaking time, keyword density, and writing quality in real time.