color.picker.mp4
Palette Picker is a web application built with Next.js, TypeScript, and Tailwind CSS that allows users to select a primary color and receive suggestions for complementary colors. The background of the webpage dynamically changes based on the selected primary color.
- Color Picker: Choose a primary color using a color wheel.
- Color Suggestions: Get complementary color suggestions including secondary, light, dark, and accent colors.
- Dynamic Background: The background gradient changes based on the selected primary color.
- Responsive Design: The application is fully responsive and adjusts to different screen sizes.
Make sure you have the following installed on your machine:
-
Clone the repository:
git clone https://github.com/your-username/palette-picker.git cd palette-picker
-
Install dependencies:
npm install
or
yarn install
3.Running the Application
Start the development server:
npm run dev
or
yarn dev
Open your browser and navigate to:
app/page.tsx: Main page component that includes the color picker and displays color suggestions. app/components/ColorPicker.tsx: Color picker component that handles color selection and suggestions. styles/globals.css: Global CSS file with Tailwind CSS and custom styles.
Select a primary color using the color picker on the left side of the screen. View the suggested colors on the right side of the screen. The background gradient will change based on the selected primary color.