Color Converter

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

Converters Runs in your browser

Color Values

HEX
#3b82f6click to copy
RGB
rgb(59, 130, 246)click to copy
HSL
hsl(217, 91%, 60%)click to copy
CMYK
cmyk(76%, 47%, 0%, 4%)click to copy
CSS Var
--color-primary: #3b82f6;click to copy

Shades & Tints

#e7f0fe
#b6d1fc
#85b2f9
#5593f7
#2474f5
#0a5adb
#0846aa
#06327a
#021431

Lightest to darkest. Click any swatch to copy its HEX value.

Color Harmonies

Complementary

#3b82f6
#f6af3c

Analogous

#3ce0f6
#3b82f6
#523cf6

Triadic

#3b82f6
#f63c83
#83f63c

Split-Complementary

#3b82f6
#f6523c
#e0f63c

Contrast Checker

Sample Text Preview

Contrast Ratio:21:1
AA Normal PASS
AA Large PASS
AAA Normal PASS
AAA Large PASS

How to Use

1Enter a color using HEX, RGB, or HSL input mode via the segmented toggle
2Click the sample button to load a demo blue (#3b82f6)
3All formats (HEX, RGB, HSL, CMYK, CSS variable) update automatically and can be copied
4Explore color harmonies (complementary, analogous, triadic, split-complementary) below
5Use the contrast checker to verify foreground/background color accessibility
6Browse the shades and tints strip for lighter and darker variations

Frequently Asked Questions

What is HEX color?

HEX color is a 6-digit hexadecimal representation of RGB color. Each pair of digits represents red, green, and blue intensity from 00 to FF (0-255).

What is the difference between RGB and HSL?

RGB defines color by mixing red, green, and blue light. HSL defines color by hue (0-360), saturation (0-100%), and lightness (0-100%). HSL is often more intuitive for humans.

What is CMYK?

CMYK stands for Cyan, Magenta, Yellow, and Key (black). It's a subtractive color model used in printing, unlike RGB which is additive (for screens).

What is a color harmony?

Color harmonies are combinations of colors based on their positions on the color wheel. Complementary colors are opposite, analogous are adjacent, triadic are evenly spaced at 120 degrees, and split-complementary uses two colors adjacent to the complement.

What is WCAG contrast ratio?

WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios for text readability. AA requires 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 for normal text and 4.5:1 for large text.

Related Tools