Make the colors be magical.
You can watch my talk to learn more basic knowledge points.
- 💫 Support
multi-color model
conversion. - 📦 Built-in color related components.
- 🚀 Provides utility toolset functions
- 🦄 Theme color generator and fully customizable.
- 🥳 esm only & 0 dependencies.
pnpm add magic-color
A lot of color tool functions for you to use, providing easy conversion, generation, parsing, comparison, operation and other functions.
import { MagicColor, createMagicColor, mc } from 'magic-color'
const mc = new MagicColor('#ffffff', 'hex', '1')
// or (mc is createMagicColor alias)
const mc = mc('#ffffff') // recommended
createMagicColor
will automatically infer the input color type and the opacity.
Now support color types: RGB
, HEX
, HSL
, HSB
, Keyword
.
You can convert between supported types.
mc.toRgb().value // [255, 255, 255]
mc.toHex().value // '#ffffff'
mc.toHsl().value // [0, 0, 100]
mc.toHsb().value // [0, 0, 100]
If you want to output a color string, you can use the toString
method, and you can choose whether you need opacity.
mc.toRgb().toString() // 'rgb(255, 255, 255)'
// with opacity
mc.toRgb().toString(true) // 'rgba(255, 255, 255, 100%)'
Refer to the type documentation for more information.
And more...
Well, you can use it to create a theme color.
import { theme } from 'magic-color'
theme('#9955ff')
// Will output:
// {
// "50": "#faf7ff",
// "100": "#f5eeff",
// "200": "#e6d5ff",
// "300": "#d6bbff",
// "400": "#b888ff",
// "500": "#9955ff",
// "600": "#8a4de6",
// "700": "#5c3399",
// "800": "#452673",
// "900": "#2e1a4d",
// "950": "#1f1133",
// }
And you can custom it with themeOptions
.
export interface ThemeOptions {
/**
* Output color type
*
* @default same type as input
*/
type?: ColorType
/**
* Custom render output color
*
* @param meta [name, color]
* @returns [CustomedName, CustomedColor]
*/
render?: (meta: [string, string]) => [string, string]
}
import { theme } from 'magic-color'
theme('#9955ff', {
type: 'rgb',
render: (meta) => {
return [
`--color-primary-${meta[0]}`,
meta[1].replace(/rgb\((.*)\)/, '$1').replace(/,/g, ''),
]
},
})
// Will output:
// {
// "--color-primary-50": "250 247 255",
// "--color-primary-100": "245 238 255",
// "--color-primary-200": "230 213 255",
// "--color-primary-300": "214 187 255",
// "--color-primary-400": "184 136 255",
// "--color-primary-500": "153 85 255",
// "--color-primary-600": "138 77 230",
// "--color-primary-700": "92 51 153",
// "--color-primary-800": "69 38 115",
// "--color-primary-900": "46 26 77",
// "--color-primary-950": "31 17 51",
// }
- theme-colors - (Better than it)