Pick colors with precision, convert between HEX, RGB, HSL, CMYK instantly. Generate gradients, check accessibility, create palettes — all free in your browser.
● 6 Format Support● WCAG Checker● Gradient Generator● 100% Private● No Signup
Dark BG
Light BG
No named color
HEX
RGB / RGBA
R
G
B
A
HSL / HSLA
H
S
L
A
CMYK
C
M
Y
K
°
Foreground
Background
Contrast Ratio
4.50 : 1
Why This Tool
Everything You Need for Color Work
Built for designers, developers, and digital creators who demand precision and speed when working with colors.
🎯
Precision HSV Picker
Canvas-based saturation-value picker with smooth hue and alpha sliders. Pick any color with pixel-perfect accuracy using mouse or touch.
🔄
6-Format Conversion
Instantly convert between HEX, RGB, RGBA, HSL, HSLA, and CMYK. All formats update in real-time as you pick or type values.
🎨
Color Harmony
Generate complementary, analogous, triadic, tetradic, split-complementary, and monochromatic palettes from any base color instantly.
🌈
Gradient Generator
Create linear, radial, and conic gradients with up to 5 color stops. Live preview and one-click CSS code copying.
♿
WCAG Contrast Checker
Check accessibility compliance with real-time contrast ratio calculation. Pass/fail indicators for WCAG AA and AAA standards.
📋
Palette Manager
Save color palettes, organize your favorites, and export as JSON, CSS custom properties, or SCSS variables. All stored locally.
🎯
Eyedropper Tool
Pick colors from anywhere on your screen using the native EyeDropper API. Available in Chrome 95+ and Edge 95+ browsers.
🌓
Tints & Shades
Generate a full scale of tints (lighter) and shades (darker) from any base color. Perfect for building design system color scales.
🕐
Color History
Automatically tracks your recently used colors. Click any history swatch to instantly recall it. Persisted across sessions.
FAQ
Frequently Asked Questions
The tool supports six color formats with real-time bidirectional conversion: HEX (#RRGGBB and #RRGGBBAA), RGB (rgb(r, g, b)), RGBA (rgba(r, g, b, a)), HSL (hsl(h, s%, l%)), HSLA (hsla(h, s%, l%, a)), and CMYK (cmyk(c%, m%, y%, k%)). Changing any value instantly updates all other formats.
Color harmony generates palettes based on color theory. Complementary uses colors opposite on the color wheel (180° apart). Analogous uses adjacent colors (±30°). Triadic uses three equidistant colors (120° apart). Tetradic uses four colors (90° apart). Split-complementary uses the base plus two colors adjacent to its complement. Monochromatic generates variations of the same hue with different saturation and lightness levels.
WCAG (Web Content Accessibility Guidelines) contrast ratio measures the luminance difference between foreground and background colors. A ratio of 1:1 means no contrast (same colors), while 21:1 is maximum contrast (black vs white). AA standard requires 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 for normal text and 4.5:1 for large text. Meeting these standards ensures your designs are readable for people with visual impairments.
Yes! You can export palettes in multiple formats: JSON (for programmatic use), CSS custom properties (for web development), and SCSS variables (for preprocessing workflows). Palettes are also automatically saved to your browser's localStorage, so they persist between sessions without requiring an account or cloud storage.
Absolutely. All color data, palettes, and history are stored exclusively in your browser's localStorage. No data is ever sent to any server. Your color choices, palettes, and usage history remain completely private on your device. You can clear all stored data at any time from the respective sections.
CMYK (Cyan, Magenta, Yellow, Key/Black) is a subtractive color model used primarily in print production. While screens use RGB (additive), printers use CMYK inks. The K (black) component reduces ink usage and improves shadow detail. Our converter lets designers work with screen colors (RGB/HEX) while seeing the equivalent print values, bridging the gap between digital and print workflows.