Color Picker
Pick colors and get all format values with contrast checker and presets
Color Picker
Contrast Checker
Color Preview
Color Values
Saved Colors
Color Presets
Usage Examples
Web Design Colors
Pick colors for your website design and get CSS-ready values in all formats.
Accessibility Check
Check color contrast ratio for WCAG AA and AAA compliance.
Brand Palette
Build a brand color palette with saved colors and preset collections.
Features
Multiple Color Formats
Get color values in HEX, RGB, HSL, HSV, CMYK, RGBA, and HSLA formats instantly
WCAG Contrast Checker
Check color contrast ratios for WCAG AA and AAA accessibility compliance
Save Colors Palette
Save your favorite colors to a local palette stored in your browser
Material & Tailwind Presets
Quick access to Material Design and Tailwind CSS color palettes
How to Use?
Pick a Color
Use the color picker, enter a HEX code, or adjust the Hue/Saturation/Lightness sliders.
Get All Formats
All color values (HEX, RGB, HSL, HSV, CMYK) update in real-time as you pick colors.
Copy or Save
Copy any format to clipboard with one click or save colors to your palette.
Frequently Asked Questions
What is a Color Picker Tool?
You see a color you love on a website and need the hex code. Or you're picking brand colors and want to make sure they work across print and screen. This tool lets you grab any color and instantly get it in HEX, RGB, HSL, HSV, CMYK, RGBA, and HSLA. It also checks if your color combos pass WCAG accessibility standards, which saves you from shipping inaccessible designs.
Color Formats Explained
HEX codes like #3B82F6 are what you see most in CSS. RGB mixes red, green, and blue channels (0-255) and is intuitive for screen work. HSL lets you tweak lightness or saturation without messing up the base hue, which designers love. HSV is the same idea but uses brightness instead of lightness (common in Photoshop). CMYK is for print. This tool converts between all of them in real-time.
Color Accessibility Guidelines
WCAG 2.1 says normal text needs at least 4.5:1 contrast ratio against its background (AA level). Large text gets away with 3:1. AAA level bumps those to 7:1 and 4.5:1. Around 8% of men have some form of color blindness, so never use color alone to convey meaning. The built-in contrast checker here tells you instantly if your combo passes or fails.
Material Design & Tailwind CSS Presets
Browse curated color palettes from Material Design and Tailwind CSS without leaving the tool. Click any preset color to load it instantly, get all format values, and save it to your local palette. Handy when you're building within an existing design system and need the exact values fast.