https://github.com/mobalti/props-color-finder
A Progressive Web Application that helps users find the closest Open Props color.
https://github.com/mobalti/props-color-finder
color-picker css open-props
Last synced: 6 months ago
JSON representation
A Progressive Web Application that helps users find the closest Open Props color.
- Host: GitHub
- URL: https://github.com/mobalti/props-color-finder
- Owner: mobalti
- License: mit
- Created: 2023-03-09T17:17:36.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2025-06-15T17:31:51.000Z (about 1 year ago)
- Last Synced: 2025-06-15T18:51:51.311Z (about 1 year ago)
- Topics: color-picker, css, open-props
- Language: TypeScript
- Homepage: https://props-color-finder.netlify.app/
- Size: 263 KB
- Stars: 13
- Watchers: 1
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# Props Color Finder
**Props Color Finder** is a Progressive Web Application (PWA) designed to help users find the closest color match from the [Open Props color palette](https://open-props.style/#colors). Additionally, it provides the ability to match [CSS's built-in named colors](https://developer.mozilla.org/en-US/docs/Web/CSS/named-color) and convert colors to the [OKLCH color space](https://developer.chrome.com/docs/css-ui/access-colors-spaces#oklch).
## Perceptual Color Matching Mode (LAB)
By default, the app uses RGB for color matching. You can switch to the LAB color space for perceptual matching:
- Toggle the checkbox labeled "Enable LAB Color Matching".
- When enabled, LAB color space ensures closer alignment with human visual perception.
## How to Use
### 1. Choose a Core Palette
Use the dropdown menu to select:
- **Open Props**: Find matches within the Open Props color palette (default).
- **Named CSS**: Match against CSS's built-in named colors.
- **HDR (OKLCH)**: Convert colors to the OKLCH color space.
### 2. Pick a Color
Use the color picker to select a color. The app will display the closest match or the OKLCH conversion based on your selected palette.
### 3. Enable LAB Matching (Optional)
Toggle the "Enable LAB Color Matching" checkbox to switch to the LAB color space for perceptual matching.
- Example:
- In **RGB**, red `#FF0000` maps to **red-8** (Open Props).
- In **LAB**, the same red maps to **orange-9**, reflecting human visual perception of brightness and saturation.
## Installation
Props Color Finder is a PWA and works seamlessly in your browser or as an installed app for offline use.
1. Visit the [Props Color Finder](https://props-color-finder.netlify.app/) website.
2. Install the app:
- On desktop: Click the install icon in your browser's address bar.
- On mobile: Use the "Add to Home Screen" option in your browser.
## Accessibility
Props Color Finder prioritizes accessibility:
- All inputs are keyboard-navigable for seamless usability.
- Labels and ARIA attributes ensure compatibility with screen readers.
## License
Props Color Finder is distributed under the MIT License.