#3B82F6
R59
G130
B246
rgb(59, 130, 246)
H217°
S91%
L60%
hsl(217, 91%, 60%)
Color Scale
DarkestLightest
Color Harmony
Complementary
Triadic
Popular Colors
Copy Formats
HEX#3B82F6
RGBrgb(59, 130, 246)
HSLhsl(217, 91%, 60%)
CSS Var--color: #3b82f6;
Tailwind (approx)bg-[#3b82f6]
What is a Color Converter?
A Color Converter translates color values between HEX (#FF6200), RGB (255, 98, 0), and HSL (23°, 100%, 50%) formats with a live preview. It is essential for web designers and developers who work across different design tools that use different color formats.
How to Use It
- 1Pick a color using the color picker, or type a HEX, RGB, or HSL value directly
- 2The other two formats update automatically with the equivalent values
- 3Use the copy buttons to copy any format to your clipboard
- 4The live preview shows exactly what the color looks like
Example
Brand color #1DA462 (a green): RGB(29, 164, 98) — use in CSS as rgb(29, 164, 98). HSL(151°, 70%, 38%) — use in CSS as hsl(151, 70%, 38%). Adjust lightness in HSL to create shades and tints without touching hue.
Why Use It
- Convert design tool colors (Figma uses HEX, some tools use RGB) for CSS code
- Create accessible color variations by adjusting HSL lightness
- Match brand colors precisely across different platforms and file formats
- Quickly find the HEX code for any color you can visually pick