Image Color Picker
Pick colors from any uploaded image pixel. Get HEX, RGB, and HSL values with magnifier preview.
Local processingColor Converter and Contrast Checker
About this tool
Enter a color as HEX, RGB, HSL, or HSV and view its equivalent values in the other formats. You can also choose text and background colors and check whether their contrast meets WCAG AA or AAA requirements for normal and large text.
Features
- Convert between HEX, RGB, HSL, and HSV
- Immediate color preview
- Calculate WCAG contrast ratios
- Display AA and AAA results
- Copy any color value
How to use
- Enter a color: Enter a HEX, RGB, HSL, or HSV value, or use the color picker.
- Copy a value: Copy the format needed for CSS or a design guide.
- Check contrast: Choose text and background colors and check their readability.
Examples
- Check whether a brand palette meets WCAG AA
- Convert HEX values from Figma into hsl() values for CSS variables
- Check text colors used in a dark theme
- Document the color levels used in a design system
Limitations
- The contrast preview has limited support for transparent colors
- Color-picker accuracy depends on the calibration of the display
- The entered color values are processed directly in your browser and are not sent to a server.
FAQ
- Does transparency affect contrast?
- Yes. The actual contrast of semi-transparent text depends on the background underneath it. The simplified preview mainly calculates contrast using opaque colors.
- What is the difference between HSL and HSV?
- HSL measures lightness while HSV measures value. Both are shown so you can match the convention used in your design or development tools.
- What contrast ratio is required for WCAG AA?
- Normal text generally needs a ratio of at least 4.5:1. Large text needs at least 3:1.