themd

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

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

import { derive } from 'themd'

const target = '#00FF57' // toxic green

const getColor = derive(guides)
const result = getColor(target)

console.log(result)

You can configure it

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

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