HTML Color Picker
Instant Hex, RGB, HSL & OKLCH codes with Accessibility checks.
HTML Color Codes
Accessibility Contrast Checker
White Text
0.00
Black Text
0.00
Color Harmonies
Tints & Shades
Tints (Mixed with White)
Shades (Mixed with Black)
How to use this HTML Color Picker
This premium HTML Color Picker is designed for developers and designers who need accurate color codes instantly. Unlike basic pickers, this tool provides advanced data like OKLCH (for modern CSS) and WCAG Accessibility scores in real-time.
- Pick a Color: Drag the cursor on the visual spectrum at the top to find your hue.
- Input Hex: Already have a code? Type it into the input field (e.g., 3B82F6) to see its variations.
- Copy Instantly: Click on any color box, code, or harmony swatch to copy the value to your clipboard.
- Check Contrast: Look at the “Accessibility” section to ensure your background color works with white or black text (aim for a “PASS” badge).
Why choose this tool?
Universal Conversion
Get Hex, RGB, RGB%, HSL, HSV, CMYK, LAB, and the new CSS OKLCH format in one click.
WCAG Contrast Checker
Don’t guess accessibility. See immediate AA and AAA pass/fail rates for normal and large text.
Smart Harmony Engine
Automatically generates Complementary, Split-Complementary, Triadic, and Tetradic palettes.
Understanding Color Formats
What is a Hex Code?
A Hex code is a hexadecimal format used in HTML and CSS to identify colors. It begins with a hashtag (#) followed by six digits (e.g., #FF5733). It combines Red, Green, and Blue values.
Why use OKLCH in CSS?
OKLCH is a modern color space available in newer CSS standards. Unlike HSL, it offers perceptual uniformity, meaning changes in lightness or chroma look consistent to the human eye across all hues.
What is the difference between Tints and Shades?
A Tint is created by mixing a color with white (making it lighter), while a Shade is created by mixing a color with black (making it darker). This tool generates both automatically.
Copied to clipboard!
#Tools