https://owend-24.github.io/JS-Colour-Picker-Project/index.html
The Colour Palette Generator is a responsive frontend web application that allows users to generate and view random colour palettes.
Users can click on colour cards to copy HEX colour codes to their clipboard, generate new palettes using a button, refresh the palette, and use keyboard shortcuts for a faster workflow.
The goal of this project is to provide an easy-to-use tool for generating colour palettes.
The design focuses on simplicity, speed and usability, giving users a quick way to generate colours and copy HEX codes for design or development work.
The application generates a set of colour cards, each displaying a different random colour.
Users can interact with these cards to copy colour codes, generate new palettes and refresh the interface using buttons or keyboard shortcuts.
- Header: Contains the logo and main heading.
- Main Content: Displays the colour card grid and palette control buttons.
- Footer: Contains social links and copyright information.
The layout uses a responsive grid system to keep the colour cards flexible across different screen sizes.
The page structure is designed to keep the main colour generation tool clear, accessible and easy to use.
The design uses Tailwind CSS for clean utility-first styling.
The interface uses bright colour cards, clear spacing and interactive visual feedback to make the app simple and engaging to use.
- Primary Font: Tailwind CSS default font stack
- Font Sizes: Different font sizes are used for headings, body text, buttons and colour labels.
- Background Colour: Gray
#f7fafc - Primary Colour: Sky Blue
#38bdf8 - Accent Colours: Randomly generated shades across red, orange, yellow, green, blue and other colour ranges.
- Logo:
assets/js/images/logo.png - Favicon:
assets/js/images/favicon.png
- Generate random colour palettes
- Copy HEX colour codes directly to the clipboard
- Refresh the palette using a button or keyboard shortcut
- Responsive layout for desktop, tablet and mobile
- Visual notification when a colour is copied
- Event Listeners: Handles colour card clicks, button clicks and keyboard shortcuts.
- Palette Generation: Generates random HEX colours and updates the colour cards dynamically.
- Clipboard Copying: Uses the Clipboard API to copy colour codes.
- Notifications: Displays feedback when a colour has been copied.
The website is designed to be responsive using Tailwind CSS and flexible grid layouts.
The layout adapts across desktop, tablet and mobile screens to maintain readability and usability.
- Previous Palette History: Allow users to go back to previously generated palettes.
- Custom Colour Palette Creation: Allow users to create and save their own palettes.
- Colour Contrast Analysis: Provide feedback on colour contrast for accessibility.
- Export Palette: Allow users to export palettes as an image or text file.
- Save Favourite Palettes: Let users store palettes for later use.
- HTML
- CSS
- JavaScript
- Tailwind CSS: Used for utility-first styling and responsive layout.
- Clipboard API: Used to copy colour codes directly to the clipboard.
- Font Awesome: Used for footer icons.
- GitHub: Used for version control.
- GitHub Pages: Used for deployment.
The project is deployed using GitHub Pages.
The interface was checked using a WCAG contrast checker extension.
HTML and CSS were validated using the W3C HTML Validator.
JavaScript was tested through browser console checks and manual interaction testing.
Lighthouse audits were used to check performance, accessibility and best practices.
- Fixed Tailwind-related console errors.
- Fixed colour card responsiveness issues.
- Improved clipboard copying functionality.
- Fixed event listener issues.
- Fixed layout distortion affecting palette cards.
- JavaScript, HTML and CSS documentation were used to support development and debugging.
- W3Schools was used as a reference for JavaScript event listeners and DOM functionality.
- Tailwind CSS documentation was used for utility-first styling and responsive layout support.
- Tailwind CSS for styling and responsive layout.
- Font Awesome for footer icons.
- GitHub Pages for deployment.
- AI tools were used for debugging guidance, validation support and improving implementation ideas during development.