Recent Colors
°
Presets
Shadow Layers
Foreground
Background
Large Text Sample
Normal text sample - The quick brown fox jumps over the lazy dog.
21.0
: 1 Contrast Ratio
AA Normal Text
PASS
AA Large Text
PASS
AAA Normal Text
PASS
AAA Large Text
PASS
Drop image here or click to upload
Supports PNG, JPG, GIF, WebP
Color Picker
RGB Sliders
Advertisement
How to Use
1
Choose a Tool
Select from Color Picker, Gradient, Box Shadow, Contrast Checker, or Image Extractor using the tab bar.
2
Customize
Use the interactive controls to adjust colors, gradients, shadows, or upload images for color extraction.
3
Copy & Use
Copy generated CSS code or color values with one click and paste them directly into your project.
FAQ
What color formats are supported?
Our Color Picker supports HEX, RGB, and HSL formats. All values sync bidirectionally, so changing one format automatically updates the others.
What is WCAG contrast ratio?
WCAG (Web Content Accessibility Guidelines) defines contrast ratios to ensure text is readable. AA level requires 4.5:1 for normal text, AAA requires 7:1 for normal text. Large text thresholds are lower.
How does the image color extractor work?
It uses Canvas API to read pixel data from your uploaded image, then applies color quantization to find the dominant colors. Processing happens entirely in your browser, no images are uploaded to any server.
Can I add multiple shadows?
Yes! The Box Shadow Generator supports multiple shadow layers. Click "Add Layer" to add more shadows. Each layer has independent controls for offset, blur, spread, color, and inset.
Is my data saved anywhere?
All processing happens locally in your browser. Your recent colors are saved to localStorage for convenience. No data is sent to any server, and uploaded images are never stored externally.