UseCalcPro
Home
MathFinanceHealthConstructionAutoPetsGardenCraftsFood & BrewingTools
Blog
  1. Home
  2. Tools

Color Converter Calculator — HEX, RGB & HSL with Preview

Convert between HEX, RGB, and HSL color formats with live preview, harmonies, and ready-to-use CSS code

Color

#3B82F6

RGB

59, 130, 246

HSL

217° 91% 60%

#3B82F6
rgb(59, 130, 246)
hsl(217, 91%, 60%)

Color Values

HEX#3B82F6
RGBrgb(59, 130, 246)
HSLhsl(217, 91%, 60%)

Color Harmonies

Complementary
#3B82F6
#F6AF3B
Analogous
Triadic

Tints & Shades

Lighter (Tints)
Darker (Shades)

CSS Snippets

color: #3B82F6;
background: rgb(59, 130, 246);
--color: hsl(217 91% 60%);

Pro Tips

HSL for design: HSL is the most intuitive model for designers. Adjust H for color, S for vibrancy, and L for brightness independently.
60-30-10 rule: Use your primary color for 60% of the design, a secondary color for 30%, and an accent for 10%.
Accessibility: WCAG requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text against its background.
Modern CSS: Use HSL in CSS custom properties for easy theming. Adjusting lightness alone creates consistent tints and shades.

What You'll Need

BOSCH GLM20 Blaze 65ft Laser Distance Measure

BOSCH GLM20 Blaze 65ft Laser Distance Measure

$30-$504.6
View on Amazon
Stanley FatMax 25ft Magnetic Tape Measure

Stanley FatMax 25ft Magnetic Tape Measure

$20-$304.6
View on Amazon
UUBAAR Ring Sizer Measuring Tool 27 PCS US Size 0-13

UUBAAR Ring Sizer Measuring Tool 27 PCS US Size 0-13

$6-$104.4
View on Amazon
iBayam Soft Measuring Tape 60" Double Scale 2-Pack

iBayam Soft Measuring Tape 60" Double Scale 2-Pack

$5-$84.7
View on Amazon
BOSCH GLM20 Blaze 65ft Laser Distance Measure

BOSCH GLM20 Blaze 65ft Laser Distance Measure

$30-$504.6
View on Amazon
Stanley FatMax 25ft Magnetic Tape Measure

Stanley FatMax 25ft Magnetic Tape Measure

$20-$304.6
View on Amazon
UUBAAR Ring Sizer Measuring Tool 27 PCS US Size 0-13

UUBAAR Ring Sizer Measuring Tool 27 PCS US Size 0-13

$6-$104.4
View on Amazon
iBayam Soft Measuring Tape 60" Double Scale 2-Pack

iBayam Soft Measuring Tape 60" Double Scale 2-Pack

$5-$84.7
View on Amazon

As an Amazon Associate, we earn from qualifying purchases.

Example Calculations

1Convert Tailwind Blue to All Formats

Inputs

Input ModeHEX
HEX Value#3B82F6

Result

RGBrgb(59, 130, 246)
HSLhsl(217, 91%, 60%)
Complementary#F6923B

Tailwind's blue-500 (#3B82F6) converts to RGB 59, 130, 246 and HSL 217°, 91%, 60%. Its complementary color is orange.

2Find Harmonies for Forest Green

Inputs

Input ModeRGB
R34
G139
B34

Result

HEX#228B22
HSLhsl(120, 61%, 34%)

Forest green (34, 139, 34) has a hue of 120°. Its complementary is magenta, analogous colors are yellow-green and teal.

Frequently Asked Questions

Q

How do I convert HEX to RGB?

Split the six-character hex code into three pairs and convert each pair from base-16 to base-10. For example, #3B82F6 becomes R=59, G=130, B=246. The first pair is the red channel, the second is green, and the third is blue.

  • #3B82F6: 3B = 59 (red), 82 = 130 (green), F6 = 246 (blue)
  • #FF0000 = rgb(255, 0, 0) — pure red
  • #00FF00 = rgb(0, 255, 0) — pure green
  • #FFFFFF = rgb(255, 255, 255) — white
  • #000000 = rgb(0, 0, 0) — black
ColorHEXRGBHSL
Red#FF0000255, 0, 00°, 100%, 50%
Blue#0000FF0, 0, 255240°, 100%, 50%
Green#00FF000, 255, 0120°, 100%, 50%
Q

What is the HSL color model?

HSL stands for Hue, Saturation, and Lightness. Hue is the color angle on a 360-degree wheel (0=red, 120=green, 240=blue). Saturation controls vibrancy from 0% (gray) to 100% (full color). Lightness ranges from 0% (black) to 100% (white) with 50% being the pure color.

  • Hue: 0° = red, 60° = yellow, 120° = green, 180° = cyan, 240° = blue, 300° = magenta
  • Saturation 100% = vivid color; 0% = pure gray
  • Lightness 0% = black, 50% = pure hue, 100% = white
  • HSL is more intuitive than RGB for adjusting brightness and vibrancy
  • CSS supports hsl() natively: hsl(217, 91%, 60%) = #3B82F6
Q

What are complementary colors?

Complementary colors sit directly opposite each other on the color wheel, exactly 180 degrees apart. They create maximum contrast and visual tension. Blue (#3B82F6) and orange (#F6923B) are complementary. Use them for call-to-action buttons against a contrasting background.

  • Complementary = hue + 180° on the color wheel
  • Red and cyan, blue and orange, yellow and purple are complementary pairs
  • Creates high contrast — ideal for CTAs and emphasis
  • Analogous colors (+/−30°) create harmonious low-contrast palettes
  • Triadic colors (+120°, +240°) create balanced vibrant palettes
Q

Should I use HEX, RGB, or HSL in CSS?

HSL is best for CSS custom properties and theming because you can adjust lightness independently. HEX is compact and widely supported. RGB is useful when you need alpha transparency (rgba). Modern CSS supports all three formats equally.

  • HEX: most compact format, widely used in design tools (#3B82F6)
  • RGB: best when you need rgba() for transparency (rgba(59, 130, 246, 0.5))
  • HSL: best for CSS variables and theming — easy to create tints/shades
  • All three are fully supported in CSS and all modern browsers
  • Tailwind CSS v4 uses oklch() internally for more perceptually uniform colors
Q

How do I find accessible color combinations?

WCAG 2.1 requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (18px+ bold or 24px+). Dark text on light backgrounds generally provides better readability. Test your color pairs with a contrast checker before committing to a palette.

  • WCAG AA: 4.5:1 minimum for normal text, 3:1 for large text
  • WCAG AAA: 7:1 for normal text, 4.5:1 for large text
  • Black (#000) on white (#FFF) has a 21:1 ratio — maximum possible
  • Use lightness difference of at least 40% between text and background
  • Avoid pure red text on blue backgrounds — poor readability for color-blind users

Related Calculators

DPI & PPI Calculator

Calculate pixel density and print dimensions for screens and photos.

Aspect Ratio Calculator

Calculate and convert aspect ratios for screens, photos, and video.

Screen Size Calculator

Find screen dimensions, area, and diagonal measurements.

Unit Converter

Convert between units of length, weight, volume, temperature, and more.

Color Temperature Calculator

Color temperature calculator converts Kelvin to RGB for photography white balance and lighting design. Compare warm vs cool light sources on the Kelvin scale.

Ring Size Calculator

Find your ring size using finger circumference or diameter. Convert between US, EU, UK, and international ring sizing systems with our accurate calculator.

Related Resources

DPI & PPI Calculator

Aspect Ratio Calculator

Screen Size Calculator

Unit Converter

Explore Utility Calculators

Discover tools for design, measurement, conversion, and more.

View All Utility Calculators

Last Updated: Mar 16, 2026

This calculator is provided for informational and educational purposes only. Results are estimates and should not be considered professional financial, medical, legal, or other advice. Always consult a qualified professional before making important decisions. UseCalcPro is not responsible for any actions taken based on calculator results.

UseCalcPro
FinanceHealthMath

© 2026 UseCalcPro