🎨 HEX • RGB • HSL • Contrast • Palette
🎨
↔
🧮

Color Picker & Converter

Pick, convert and explore colors in HEX, RGB, HSL & more — with live preview and palette

🎨 Color Picker 🔁 HEX ⇄ RGB ⇄ HSL 🖌️ Tints & Shades ⚖️ Contrast Checker 📋 CSS Snippets 🕒 History
💡 Palette Tips
  • Primary: Use the base color for main actions & highlights.
  • Tints: Lighter versions are perfect for backgrounds & hover states.
  • Shades: Darker versions are ideal for borders & text.
  • Contrast: Aim for ≥ 4.5:1 for body text to meet WCAG AA.
🎨 Color Picker & Converter HEX • RGB • HSL
🎯 Pick Color
Aa
#2E9E55
rgb(46, 158, 85)
hsl(141, 54%, 40%)
Luminance: 0.34
Sample on Color: The quick brown fox jumps over the lazy dog.
On White: The quick brown fox jumps over the lazy dog.
On Black: The quick brown fox jumps over the lazy dog.
🔁 Convert Between Formats
HEX e.g. #2e9e55
RGB 0 – 255
HSL 0–360 / 0–100%
Alpha 0 – 1
🎨 Tints & Shades
Click a swatch to set it as the current color.
Lighter
Darker
⚖️ Contrast Checker
Aa
Text on White
— —
Aa
Text on Black
— —
Aa
Color as Background
— —
💻 CSS Snippets
/* HEX */ color: #2e9e55; /* RGB */ color: rgb(46, 158, 85); /* HSL */ color: hsl(141, 54%, 40%); /* Background */ background-color: #2e9e55;
🕒 Color History
No colors yet — start picking!
ℹ️ Useful Info
  • HEX:#RRGGBB, example: #2e9e55
  • RGB:0–255 per channel: rgb(46, 158, 85)
  • HSL:Hue 0–360, Saturation/Lightness 0–100%
  • Contrast:WCAG AA: 4.5:1 (text), AAA: 7:1
📚 Common Colors
💡 Usage Ideas
  • Branding:Define your brand palette with 1 primary + 2 accent colors.
  • UI States:Use tints for hover and shades for pressed/active states.
  • Dark Mode:Check contrast on both light and dark backgrounds.
Monetag / Ezoic Ad Slot