Color Picker
Pick any color from a visual palette and get instant HEX, RGB, and HSL values ready to copy
How to Use This Tool
Click and drag on the color canvas to pick a saturation and lightness.
Use the hue slider below to change the base color.
View the color in all formats: HEX, RGB, HSL, and CMYK.
Explore color harmonies: complementary, analogous, triadic, and split-complementary.
About This Tool
Color Picker is a visual color selection tool built with HTML5 Canvas. The main canvas controls saturation and lightness, the hue slider sweeps the spectrum. All formats are displayed — HEX, RGB, HSL, and CMYK — with copy buttons. Color harmonies show related colors. A history of your last 20 picks is maintained.
Frequently Asked Questions
Horizontal axis: saturation (0-100%). Vertical axis: lightness (100% top, 0% bottom). The hue slider controls the base color.
Colors that look pleasing together based on color wheel position: complementary (opposite), analogous (adjacent), triadic (triangle), split-complementary.
Share This Tool
Related Tools
JSON Formatter
Format, validate, and beautify JSON data with syntax highlighting, error detection, and tree view
HTML Encoder/Decoder
Encode and decode HTML entities, special characters, and Unicode symbols for safe web content
URL Encoder/Decoder
Encode and decode URLs and query parameters for safe transmission in web applications and APIs
Base64 Encoder/Decoder
Encode and decode text or binary data in Base64 format for embedding images, APIs, and data transfer
JWT Decoder
Decode and inspect JSON Web Token headers, payloads, and signatures with expiration time validation
Regex Tester
Test, debug, and validate regular expressions with real-time matching, group highlighting, and flag support