https://github.com/yingjia-z/color-editor

A color swatch editor with multi-format color display.
https://github.com/yingjia-z/color-editor

jsx preact typescript

Last synced: 6 days ago
JSON representation

A color swatch editor with multi-format color display.

• Host: GitHub
• URL: https://github.com/yingjia-z/color-editor
• Owner: Yingjia-Z
• Created: 2024-05-08T22:19:00.000Z (6 months ago)
• Default Branch: master
• Last Pushed: 2024-05-10T02:06:56.000Z (6 months ago)
• Last Synced: 2024-10-16T11:25:13.283Z (21 days ago)
• Topics: jsx, preact, typescript
• Language: TypeScript
• Homepage:
• Size: 31.3 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Color Swatch Editor

#### Developed in HTML, CSS and Typescript.

## Features and Usage

- **Swatch Management:** Begin with 10 randomly generated color swatches. Adjust the palette by adding or removing swatches, with a limit of 1 to 16.

- **Color Adjustment:** Use interactive rectangles for precise control of hue, saturation, and luminosity. Adjustments can be made through sliders, text fields, and by clicking directly on the rectangles.

- **Multiple Color Formats:** Switch between HSL, RGB, and HEX formats to accommodate different needs. Each swatch can be edited in any of these formats.

- **Modify:** Interact with any swatch to modify its properties.

https://github.com/Yingjia-Z/color-editor/assets/85412717/2cd5acd0-a789-4f30-8a5a-a380b1e477e9

## Installation:

To get started with this editor, you'll need to:

- Clone this repository:

```

git clone https://github.com/Yingjia-Z/color-editor.git

cd color-editor

npm install

```

- Run the editor and open the localhost URL in your browser:

```

npm run dev

```

## Note:

The method for creating gradient color in Saturation-Luminance square is referenced on the following website:

   

   https://www.joshwcomeau.com/css/make-beautiful-gradients/