Quick Start: Generate a Basic Palette
Open the Color Palette tool on HeronTool. Enter a primary color (e.g., brand blue #2196F3), click generate, and the tool outputs a harmonious 5-color scheme (complementary, analogous, triadic, etc.). Copy the HEX/RGB values directly, or hit "Random" for more inspiration.
Advanced Tips: Monochrome & Material Palette
For shades of the same hue, use Monochrome: set a base color, adjust brightness/saturation sliders to get 10-step gradients—ideal for buttons, backgrounds, or data viz.
For Material Design style, Material Palette offers standard shades (500/700/900) and auto-suggests primary, secondary, and accent colors. After picking a primary, it shows light/dark variants and accessibility contrast hints.
Practical Application & Export
Once satisfied, copy all color values from any tool (CSS/Sass/JSON formats) or export as PNG/SVG. Follow the 60-30-10 rule (primary, secondary, neutral) for visual balance.
FAQ
Q: How to make palettes more harmonious? Use the "harmony rules" in Color Palette, or generate monochrome from a single base color.
Q: Difference between Material Palette and normal palette? Material follows Material Design specs, offering semantic shades and contrast checks, great for Android/Web components.
Q: Can I customize shade count? Monochrome supports 5-20 levels; Color Palette fixed at 5; Material fixed at 3 shade groups.