Color Picker, Palette & HEX RGB Converter — Free Online

Q: What's the difference between HEX, RGB, HSL, and CMYK?

HEX/RGB describe colors for screens (additive light). HSL adds intuitive hue/saturation/lightness control. CMYK is for print (subtractive ink).

How to Use This Color Tool

Click the swatch or "Open Picker" — your OS color picker opens
Pick any color visually or type a HEX code
All formats appear instantly — HEX, RGB, HSL, CMYK
Click 📋 to copy any value to clipboard
Click palette swatches to use those as your active color

Color Format Cheat Sheet

HEX — #FF5733 — 6 hex digits, used in HTML/CSS most commonly
RGB — rgb(255, 87, 51) — Red Green Blue, 0-255 each, additive (light)
HSL — hsl(11, 100%, 60%) — Hue 0-360°, Saturation 0-100%, Lightness 0-100%. Most intuitive for design.
CMYK — cmyk(0%, 66%, 80%, 0%) — Cyan Magenta Yellow Black, used in print
RGBA — RGB with Alpha (transparency 0-1)
HSV / HSB — alternative to HSL (Photoshop uses this)

HEX to RGB Manual Conversion

HEX uses base 16 (0-9 then A-F). Each pair = 0-255 in decimal.

#FF5733 → R = FF = 255 → G = 57 = 87 → B = 33 = 51 → rgb(255, 87, 51)

Quick reference: 00 = 0, 40 = 64, 80 = 128, C0 = 192, FF = 255

When to Use Each Color Format

HEX — Web design (CSS, HTML), email signatures, logos
RGB / RGBA — When you need transparency, image editing, JavaScript
HSL — When adjusting brightness or saturation programmatically (much easier than RGB)
CMYK — Print materials only (brochures, business cards, packaging). NEVER use for web.

Color Theory: Palette Types

Monochromatic — variations of one color (tints + shades). Calm, sophisticated.
Analogous — colors next to each other on the wheel. Natural, harmonious.
Complementary — opposite colors (high contrast). Bold, vibrant.
Triadic — 3 colors equidistant on wheel. Balanced, vibrant.
Tetradic / Square — 4 colors. Rich but harder to balance.

Accessibility & Contrast

For text on backgrounds, WCAG recommends:

AAA — contrast ratio 7:1+ (highest)
AA — 4.5:1 for normal text, 3:1 for large text (legal minimum in many countries)
Failed — below 3:1 — hard to read, exclusionary

Test contrast at WebAIM Contrast Checker.

Frequently Asked Questions

How do I convert HEX to RGB?

Split the 6-digit hex into 3 pairs: R, G, B. Convert each pair from hex to decimal. Example: #FF5733 → R=FF=255, G=57=87, B=33=51 → rgb(255, 87, 51). This tool does it automatically when you type a hex code.

What's the difference between HEX, RGB, HSL, and CMYK?

HEX/RGB describe colors for screens (additive light — combining gives white). HSL adds intuitive hue/saturation/lightness control. CMYK is for print (subtractive ink — combining gives black). For web design, use HEX. For print, use CMYK.

Can I use this on mobile?

Yes. The native color picker opens on iOS and Android too. Tap the swatch to launch it.

How do I make my own brand palette?

Pick your primary brand color. Then use the "Complementary & Analogous" palette to get harmonious supporting colors. Aim for: 1 primary, 1 secondary, 1 accent, 2 neutrals (dark + light).

What is alpha / transparency?

Alpha controls how see-through a color is. rgba(255, 0, 0, 0.5) = 50% transparent red. HEX 8-digit version: #FF000080 (last 2 digits = alpha).

Color Picker, Palette & Converter

🎨 Color Palettes (Click to copy)

🎯 Popular Colors