Color Picker
The Color Picker lets you select colors from a visual color wheel or by entering hex, RGB, or HSL values. It provides real-time preview and shows the selected color in multiple formats. This tool is essential for designers and developers who need to choose colors for websites, apps, graphics, or any visual project. You can also extract colors and build palettes.
Formula
Color selection methods: - Color wheel: visual HSL picker - Hex input: #RRGGBB - RGB input: rgb(r, g, b) - HSL input: hsl(h, s%, l%) - Eyedropper: pick from screen (if supported) Output: all formats + CSS variables
Example
Selected color: #3498db HEX: #3498db RGB: rgb(52, 152, 219) HSL: hsl(204, 70%, 53%) CSS: --primary: #3498db; Tailwind: blue-500
How to Use
- Use the color wheel to pick a color visually
- Or enter a hex, RGB, or HSL value
- The picker shows the color in all formats
- Copy the format you need
- Use in your design or code
Frequently Asked Questions
How do I pick a color from my screen?
Some browsers support the EyeDropper API, which lets you pick any color from your screen. Click the eyedropper button and click anywhere on your screen. This feature is available in Chrome and Edge but not all browsers.
What color formats are supported?
The picker supports HEX (#RRGGBB), RGB (rgb(r,g,b)), HSL (hsl(h,s%,l%)), and HSV (hsv(h,s%,v%)). You can enter a color in any format and see it in all other formats. The picker also supports alpha (transparency) with RGBA and HSLA.
How do I choose complementary colors?
After selecting a base color, use the Color Palette Generator or Color Converter to find complementary, analogous, or triadic colors. The complementary color is directly opposite on the color wheel (180 degrees apart in hue).
Can I save selected colors?
The picker keeps a history of recently selected colors. You can copy any color format to your clipboard. For persistent storage, save the hex codes in a document or use the Color Palette Generator to create and save a palette.
How do I ensure colors are accessible?
Check the contrast ratio between your selected color and text/background colors. WCAG AA requires 4.5:1 for normal text and 3:1 for large text. Use a contrast checker tool to verify accessibility.