🎨 Color Tools Hub

All Color Tools, One Place

Color picker, HEX↔RGB converter, gradient generator, contrast checker, palette builder — all free and instant.

🎨 Color Picker

🔄 HEX ↔ RGB

🌈 Gradient

👁️ Contrast

🖼️ Palette

📚 Named Colors

Color Picker

Pick any color and get HEX, RGB, HSL, CMYK, and CSS values instantly.

HEX

#7c6cff

RGB

rgb(124, 108, 255)

HSL

hsl(245, 100%, 71%)

CMYK

cmyk(51%, 58%, 0%, 0%)

CSS Variable

--color-primary: #7c6cff;

Tailwind (approx)

violet-500

Swift UIColor

UIColor(red:0.49,green:0.42,blue:1.0,alpha:1)

Shades

Tints & Tones

Complementary

HEX ↔ RGB Converter

Convert between HEX, RGB, HSL, and CMYK color formats instantly.

HEX Input

rgb(124, 108, 255)

hsl(245, 100%, 71%)

cmyk(51%, 58%, 0%, 0%)

⇄

RGB Input

R (0–255)

G (0–255)

B (0–255)

#7c6cff

hsl(245, 100%, 71%)

Gradient Generator

Create beautiful CSS gradients with live preview and instant code copy.

background: linear-gradient(135deg, #7c6cff, #38bdf8);

Type

Linear

Radial

Conic

Angle

135°

Color Stops

Position: 0%

Position: 100%

Contrast Checker

Check WCAG 2.1 color contrast ratios for accessibility compliance.

Foreground

Background

Sample Heading Text

The quick brown fox jumps over the lazy dog.

Small text — 12px example

4.83

Contrast Ratio

WCAG 2.1 Requirements

Normal text AA—

Normal text AAA—

Large text AA—

Large text AAA—

UI Components AA—

Color Palette Generator

Generate harmonious color palettes based on color theory rules.

Base Color:

Named CSS Colors

All 148 standard CSS named colors. Click any to copy.