color-palette-generator - GitLite

KO | EN

gitlite — search

#video #proxy #golang #go #generative-ai #list #vue #java #agent #cross-platform

color-palette-generator

(★ 32)

Color Conjure - Color Palette Generator

파일 탐색기

ZIP 다운로드

- - 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

# CDN으로 사용하기

jsDelivr

jsDelivr는 공개 GitHub 리포지토리를 별도 설정 없이 CDN으로 즉시 서빙합니다. 버전과 파일을 고르면 웹페이지에 바로 붙일 수 있는 링크와 예시 코드가 만들어집니다.

버전

파일

링크

예시

명령어 용어집

이 문서에서 사용된 명령어를 모아봤습니다. 낯선 명령어가 있다면 펼쳐서 확인해보세요.

🔍

`git clone`

설명 보기 ▼

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`

설명 보기 ▼

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:

# 프로젝트 배지

Netlify Status 바로가기

// 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)