Color Picker
Pick any color and instantly get HEX, RGB, and HSL values. Generate palettes and check contrast ratios.
Color Palette — Shades & Tints
Contrast Checker (vs White & Black)
Free Online Color Picker & Converter
Pick any color using the visual color picker or enter values in HEX, RGB, or HSL format. The tool instantly converts between all three formats, generates shade and tint palettes, shows complementary and analogous colors, checks WCAG contrast ratios, and provides ready-to-use CSS code.
Color Formats Explained
HEX is the most common web color format (#RRGGBB). RGB specifies red, green, and blue channel values from 0-255. HSL uses hue (0-360°), saturation (0-100%), and lightness (0-100%) — often more intuitive for designers because adjusting lightness creates natural shades and tints.
WCAG Contrast Guidelines
The Web Content Accessibility Guidelines require a minimum contrast ratio of 4.5:1 for normal text (AA level) and 7:1 for enhanced contrast (AAA level). Large text (18px+ or 14px+ bold) needs 3:1 for AA and 4.5:1 for AAA. This tool checks your color against both white and black backgrounds to help you choose accessible color combinations.
Frequently Asked Questions
Each pair of hex digits represents a color channel: #RRGGBB. Convert each pair from hexadecimal to decimal. For example, #6C72FF → R:108, G:114, B:255. This tool does it automatically — just paste any HEX code.
Complementary colors sit opposite each other on the color wheel (180° apart in hue). They create high contrast and visual tension when used together. Analogous colors are adjacent on the color wheel (30° apart) and create harmonious, unified palettes.