Color Picker Guide
Complete guide to color formats, accessibility, and design best practices.
← Developer Tools
Color Picker & Converter — HEX, RGB, HSL, OKLCH
HEX · RGB · HSL · OKLCH · Shades · Palette · Contrast · Image Picker
Pick any color and instantly get all CSS formats: HEX, RGB, RGBA, HSL, HSLA, OKLCH, HWB, plus alpha transparency. Generate 10 shades, 10 tints, 5-color complementary palette, and color harmonies (complementary, triadic, analogous, split, tetradic). Check WCAG AA/AAA contrast ratio. Generate 7-step gradients between two colors. Pick colors from any uploaded image. See the nearest Tailwind CSS class. 12 recent colors stored automatically.
#
HEX
#6366F1HEX+A
#6366F1RGB
rgb(99, 102, 241)RGBA
rgba(99, 102, 241, 1.00)HSL
hsl(239, 84%, 67%)HSLA
hsla(239, 84%, 67%, 1.00)OKLCH
oklch(0.670 0.336 239.0)HWB
hwb(239 39% 5%)Named
CustomTailwind
text-indigo-500 / bg-indigo-500Alpha 100%
10 shades (dark → light, fixed hue)
#d0d1fb
#a1a3f7
#7274f3
#4346ef
#1418eb
#1013bc
#0c0e8d
#080a5e
#04052f
#020217
♿ WCAG Contrast Checker
Aa — Sample Text on Background
FG (your color)
#6366f1BG color
4.47:1 AA Large
AA Normal ❌
AA Large ✅
AAA ❌
💡 Try #0f12ae — ratio 12.22:1 (AA ✅)
🕐 Recent Colors (1)
Frequently Asked Questions
How do I convert HEX to RGB?
Enter the HEX code in the input field. The RGB value appears instantly: #6366f1 → rgb(99, 102, 241). Each pair of HEX digits (63, 66, f1) converts to a decimal number (99, 102, 241).
What is OKLCH color format?
OKLCH is a perceptually uniform color space where equal numerical differences produce equal perceived color differences. Format: oklch(L C H) — Lightness (0-1), Chroma (colorfulness), Hue (0-360). Supported in modern browsers via CSS.
What is WCAG contrast ratio?
WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios for accessible text. AA requires 4.5:1 for normal text, 3:1 for large text. AAA requires 7:1 for normal, 4.5:1 for large.
How does the image color picker work?
Click "📷 From Image" and upload any image. Click anywhere on the displayed image to pick that pixel's color. All processing happens in your browser — no image data is sent to any server.
What are color harmonies?
Color harmonies are aesthetically pleasing color combinations based on color wheel positions. Complementary (opposite colors), Triadic (three equally spaced), Analogous (adjacent colors), Split (two near-complements), Tetradic (four colors, rectangle).