Open the Tool:
- Load the HTML file in a web browser to access the palette generator.
Select Color Harmony (Optional):
- Choose a color harmony scheme from the dropdown menu (e.g., Monochromatic, Analogous, Complementary, Triadic).
Generate Random Palette (Optional):
- Click the “Random Palette” button to automatically fill the color inputs with randomly generated colors.
Customize Colors:
- Use the color pickers to select your desired colors for:
- Primary Color
- Secondary Color
- Success Color
- Danger Color
- Warning Color
- Info Color
- Color previews will update as you select colors.
Preview Color Changes:
- View how the selected colors look on preview buttons and in the preview area, which reflects background and text colors.
Generate CSS:
- The CSS code reflecting your color choices will be displayed under “Generated CSS”.
- This code can be copied to style buttons and other elements in your web project.
Copy CSS Code:
- Click the “Copy CSS” button to copy the generated CSS to your clipboard.
- The button will indicate when the code has been successfully copied.
Apply Custom Styles:
- The tool dynamically applies your custom styles to preview elements, giving you an instant visual representation.
Use Color Harmony:
- When a color harmony is selected, the tool automatically adjusts the color inputs based on the selected harmony scheme.
Refresh Preview:
- The preview area and buttons will automatically update with any changes to the color inputs.