color-palette-generator - GitLite

KO | EN

gitlite — search

#animation #vue #cloud-native #computer-vision #c #codex #tailwindcss #kubernetes #awesome #self-hosted

color-palette-generator

(★ 32)

Color Conjure - Color Palette Generator

File Explorer

ZIP Download

- - BUG_REPORT.md
  - FEATURE_REQUEST.md
- - PR_CHECKS.yml
- dependabot.yml
- PULL_REQUEST_TEMPLATE.md
- commit-msg
- pre-commit
- DESIGN.md
- v01_design.png
- v02_design.png
- _redirects
- android-chrome-192x192.png
- android-chrome-512x512.png
- apple-touch-icon.png
- favicon-16x16.png
- favicon-32x32.png
- favicon.ico
- logo.png
- manifest.json
- - logo.png
- - index.ts
- - useIndexedDB.ts
- - About.tsx
  - Accessibility.tsx
  - ExtractColors.tsx
  - NotFound.tsx
  - SavedPalettes.tsx
- - exportService.ts
  - idbService.ts
- - colorStore.ts
  - colorTypes.ts
  - index.ts
  - paletteSlice.ts
- - App.css
- App.tsx
- main.tsx
- vite-env.d.ts
.editorconfig
.gitignore
.npmrc
.prettierrc
CODE_OF_CONDUCT.md
commitlint.config.cjs
CONTRIBUTING.md
eslint.config.js
index.html
LICENSE
package-lock.json
package.json
README.md
SECURITY.md
tsconfig.app.json
tsconfig.json
tsconfig.node.json
vite.config.ts
vitest.setup.ts

# Use via CDN

jsDelivr

jsDelivr serves any public GitHub repository as a CDN with zero setup. Pick a version and a file to get a ready-to-paste link and snippet.

Version

File

Link

Example

Command Glossary

Commands referenced in this DOCs, explained below.

🔍

`git clone`

View Details ▼

Clone an existing repository.

git clone {{remote_repository_location}} {{path/to/directory}}

Clone an existing repository into a new directory (the default directory is the repository name):

git clone --recursive {{remote_repository_location}}

Clone an existing repository and its submodules:

git clone {{[-n|--no-checkout]}} {{remote_repository_location}}

Clone only the `.git` directory of an existing repository:

🔍

`npm run`

View Details ▼

Run a script.

npm run

List available scripts:

npm run {{script_name}}

Run a script:

npm run {{script_name}} -- {{argument}} {{--option}}

Pass arguments to a script:

# Project Badges

Netlify Status Visit

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

Color Conjure is an open-source color palette generator that helps designers and developers create accessible and consistent color schemes for their projects. Generate shades, check color contrasts, and export colors in various formats with ease.

## 🚀 Demo

Check out the live application: [Color Conjure on Netlify](https://color-conjure.netlify.app/)

Please note that this is a work in progress, and some features may not be fully functional.

❗️PLEASE NOTE ❗️ - We use [Seline](https://seline.so) for tracking user interactions and improving the application. _Seline is a simple, lightweight, cookieless, private website analytics tool._

## ✨ Features

- **Color Shade Generation:** Generate a range of shades from a base color.
- **Contrast Checker:** Ensure text is readable against background colors by checking contrast ratios.
- **Export Options:** Export generated colors in multiple formats like HEX, HSL, CSS variables, Tailwind CSS configurations, etc.
- **Accessibility Compliance:** Verify color combinations against [WCAG](https://www.w3.org/WAI/standards-guidelines/wcag/) guidelines [AA](https://www.w3.org/WAI/WCAG2AA-Conformance) and [AAA](https://www.w3.org/WAI/WCAG2AAA-Conformance) standards.
- **Interactive Color Manipulation:** Adjust colors using HEX, RGB, and HSL inputs with previews.

## 🧰 Tools & Libraries

- **[react](https://react.dev/)**
- **[chroma-js](https://gka.github.io/chroma.js/)**
- **[@tanstack/react-table](https://tanstack.com/table/latest)**
- **[react-hot-toast](https://react-hot-toast.com/)**
- **[react-router-dom](https://reactrouter.com/en/main)**
- **[@headlessui/react](https://headlessui.com/)**
- **[clsx](https://github.com/lukeed/clsx)**
- **[vite](https://vitejs.dev/)**
- **[tailwindcss](https://tailwindcss.com/)**
- **[eslint](https://eslint.org/)**
- **[prettier](https://prettier.io/)**
- **[husky](https://typicode.github.io/husky)**
- **[commitlint](https://commitlint.js.org/)**
- **[lint-staged](https://github.com/lint-staged/lint-staged)**
- **[vitest](https://vitest.dev/)**
- **[jsdom](https://github.com/jsdom/jsdom)**
- **[@testing-library/jest-dom](https://testing-library.com/docs/ecosystem-jest-dom/)**
- **[@testing-library/react](https://testing-library.com/docs/react-testing-library/intro/)**
- **[@vitest/coverage-istanbul](https://vitest.dev/guide/coverage.html#coverage-providers)**
- **[typescript](https://www.typescriptlang.org/)**

## 🛠️ Installation

### Prerequisites

- Node.js (v20 or higher)
- npm (v9 or higher)

### Steps

1. **Clone the Repository**

```bash
   git clone https://github.com/<your-username>/color-palette-generator.git

cd color-palette-generator
   ```

2. **Fresh Install Dependencies**

```bash
   npm run bootstrap-dev
   ```

3. **Start the Development Server**

```bash
    npm run dev
   ```

4. **Open the Application**

The application should open automatically in your default browser. If not, visit [http://localhost:5173](http://localhost:5173) to view the application.

5. **Build for Production**

To build and view the application for production, run:

```bash
   npm run build && npm run preview
   ```

The optimized files will be in the `dist` directory.

## 📝 Usage

1. **Generate Color Shades**

- Enter a base color in HEX, RGB, or HSL format.
   - Click on the "Generate Shades" button to create a range of 11 colors, from 50, 100, 200, ..., 900, 950 shades.

2. **Check Color Contrast**

- Click on the "Check Colour Contrast" button to verify the contrast ratio between the text and background colors.
   - The contrast ratio is displayed along with the WCAG compliance level (AA or AAA), and the columns are sortable.

3. **Export Colors**

- Click on the "Export Colors" button to view the export options.
   - Choose from range of formats like HEX, HSL, CSS variables, and Tailwind CSS configurations.
   - Click on the "Copy Code" button to copy the color values to the clipboard.
   - If you add more than one color set/section, then you can use "Export All Colors".

## 📄 License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

## 🤝 Contributing (Code and Design)

Contributions are welcome! Please read the [CONTRIBUTING.md](CONTRIBUTING.md)
file for guidelines on how to contribute to this project. Please note that by participating in this project, you agree to abide by the terms of the [CODE_OF_CONDUCT.md](CODE_OF_CONDUCT.md).

You can even contribute by creating designs for the project. Check the [DESIGN.md](./design/DESIGN.md) file for more information.

## 🐛 Issue Reporting

If you find any bugs or issues, please open an issue on the GitHub repository and provide as much information as possible.

- [ISSUE TRACKER](https://github.com/utk09-NCL/color-palette-generator/issues)
- [NEW ISSUE](https://github.com/utk09-NCL/color-palette-generator/issues/new/choose)
- [ISSUE TEMPLATE](.github/ISSUE_TEMPLATE/BUG_REPORT.md)

## 🆕 Feature Requests

If you have any feature requests or suggestions, please open an issue on the GitHub repository and provide as much information as possible, we would love to hear your ideas! Follow the [FEATURE REQUEST TEMPLATE](.github/ISSUE_TEMPLATE/FEATURE_REQUEST.md) template.

## ❤️ Code of Conduct

Please read the [CODE_OF_CONDUCT.md](CODE_OF_CONDUCT.md) file for details on our code of conduct.
TL;DR: Be Nice, Be Respectful, Be Inclusive.

## 🌟 Show Your Support

If you like this project, give it a ⭐️ on GitHub and share it with your friends!

## 📧 Contact Me?

If you have any queries or want to discuss this project or just tech, find my contact details on my [Personal Website]: utk09[dot]com

## Thanks in advance for all your contributions! 🌟

## 👥 Our Contributors

A big shoutout to all the contributors who have helped (and are helping) in building this project.

[![Contributors](https://contrib.rocks/image?repo=utk09-NCL/color-palette-generator)](https://github.com/utk09-NCL/color-palette-generator/graphs/contributors)

### Author

- [utk09-NCL](https://github.com/utk09-NCL)