https://github.com/limpix31/themd
Make anything match your color symphony
https://github.com/limpix31/themd
Last synced: over 1 year ago
JSON representation
Make anything match your color symphony
- Host: GitHub
- URL: https://github.com/limpix31/themd
- Owner: LIMPIX31
- Created: 2023-06-23T12:32:08.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2023-06-23T18:26:20.000Z (about 3 years ago)
- Last Synced: 2025-04-10T00:38:17.018Z (over 1 year ago)
- Language: TypeScript
- Size: 26.2 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Themd — theme tool
# How it works
###### This is simply a function that approximates color to your palette by blending your color with similar colors. No magic.
# How to use
###### Firstly, define your color guides. The more, the better
```ts
const guides = [
// colors
'#dc322f', // red
'#cb4b16', // orange
'#b58900', // yellow
'#859900', // green
'#2aa198', // aqua
'#268bd2', // blue
'#6c71c4', // magenta
'#d33682', // purple
// grayscales
'#002b36',
'#073642',
'#586e75',
'#657b83',
'#839496',
'#93a1a1',
'#eee8d5',
'#fdf6e3',
]
```
###### Let's derive a new color based on the guides
```ts
import { derive } from 'themd'
const target = '#00FF57' // toxic green
const getColor = derive(guides)
const result = getColor(target)
console.log(result)
```
###### You can configure it
```ts
const getColor = derive(guides, {
ratio: 0.75, // Limit on the ratio and number of colors to be mixed (default: 0.75)
dry: 0.5, // Mixing ratio with input color
clamp: false, // The output color can't be lighter or darker than the color guides (default: false),
// Selects the most matching color from the color guides,
// without mixing the color. Discards all the options above.
strict: false
})
```
* **Dry: 1** - means that the output color consists only of color guides
* **Ratio: >2** - The more `ratio`, the more colors will be mixed, it is recommended to change between 0.25 and 1.75
* **Clamped: true** - means that even with the input color `#000` you won't get a color darker than what is in the color guides. Similarly, with light colors.
# Troubleshooting
* Sometimes the input color can fall into the group of background colors (too dark or light). This is considered normal because the colors are often more similar in brightness than in hue. You have two ways to solve this problem: add a similar color to the color guides or adjust the `ratio` parameter in more detail.
# Specific use
You can convert colors to grayscale. Note that this may be unstable.