📢 Advertisement — Leaderboard (728×90)

Free Color Picker & Converter Online

Pick any color and instantly convert between HEX, RGB, HSL, HSV, and CMYK. Generate tints, shades, and color harmonies. Check WCAG contrast ratios for accessibility. 100% free, no sign-up needed.

🎨 Color Picker & Converter

#
#4F46E5

🎛️ RGB Sliders

R 79
G 70
B 229

🕓 Recent Colors

Colors you pick will appear here...

📋 Color Values (click to copy)

HEX #4F46E5
RGB rgb(79, 70, 229)
HSL hsl(243, 75%, 59%)
HSV hsv(243, 69%, 90%)
CMYK cmyk(66%, 69%, 0%, 10%)
CSS --color: #4F46E5;
Luminance
0.07
On Light
✅ Readable
On Dark
✅ Readable

🌈 Tints & Shades

Click any swatch to select that color

☀️ Tints (Mixed with White)

🌑 Shades (Mixed with Black)

🎨 Tones (Mixed with Gray)

🎵 Color Harmonies

Color harmonies are combinations of colors that work well together based on their positions on the color wheel. Click any color to select it.

📢 Advertisement — Rectangle (336×280)

♿ WCAG Contrast Checker

Check if your foreground and background color combination meets WCAG 2.1 accessibility guidelines for readable text.

Large Text Sample (18pt+)
Small text sample — The quick brown fox jumps over the lazy dog.
8.59
Contrast Ratio

🖌️ Named CSS Colors

Click any named color to load it into the picker:

📖 How to Use the Color Picker

1

Pick a Color

Click the large color preview box to open the browser's native color picker, type a HEX code directly, or drag the RGB sliders to dial in your exact color.

2

Copy Any Format

Click any color value row to instantly copy it — HEX, RGB, HSL, HSV, CMYK, or a ready-to-paste CSS variable. Use Copy All Values to copy everything at once.

3

Explore Tints, Shades & Harmonies

Scroll down to see automatically generated tints (lighter), shades (darker), tones, and color harmonies. Click any swatch to use it as your new color.

4

Check Accessibility Contrast

Use the WCAG Contrast Checker to test if your text color is readable on your chosen background. Ensure you meet the AA or AAA standard for accessibility.

📢 Advertisement — Leaderboard (728×90)

❓ Frequently Asked Questions

What is a HEX color code? +
A HEX color code is a six-character alphanumeric code preceded by a # symbol that represents a color in the RGB model. Each pair of characters (00–FF in hexadecimal) represents the red, green, and blue values. For example, #FF0000 is pure red, #00FF00 is pure green, and #0000FF is pure blue.
What is the difference between RGB and HSL? +
RGB (Red, Green, Blue) defines colors by mixing intensities of red, green, and blue light from 0 to 255. It is how screens display colors.

HSL (Hue, Saturation, Lightness) uses a more intuitive model. Hue is the color angle on the color wheel (0–360°), saturation is color intensity (0–100%), and lightness is how light or dark (0–100%). HSL is often preferred by designers because it is easier to reason about.
What is WCAG contrast ratio and why does it matter? +
The WCAG (Web Content Accessibility Guidelines) contrast ratio measures the difference in brightness between foreground text and background. A ratio of 4.5:1 is required for normal text (AA standard) and 7:1 for AAA. This ensures text is readable by users with visual impairments or color blindness. Poor contrast is one of the most common accessibility failures on the web.
What is the difference between a tint and a shade? +
A tint is a color mixed with white, making it progressively lighter. A shade is a color mixed with black, making it progressively darker. A tone is a color mixed with gray. These variations are essential for creating structured design systems and consistent color palettes.
What is CMYK color? +
CMYK stands for Cyan, Magenta, Yellow, and Key (Black). It is a subtractive color model used in color printing. While RGB is used for digital screens (adding light), CMYK is used in physical printing (subtracting light by adding ink). If you are designing materials for print, use CMYK values rather than RGB.
What are color harmonies? +
Color harmonies are combinations of colors that look visually pleasing together based on their positions on the color wheel. Common harmonies include Complementary (opposite colors), Analogous (adjacent colors), Triadic (three equally spaced colors), and Split-Complementary. They are the foundation of professional color palette design.