Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/zyyv/magic-color
Make the colors be magical.
https://github.com/zyyv/magic-color
Last synced: 2 months ago
JSON representation
Make the colors be magical.
- Host: GitHub
- URL: https://github.com/zyyv/magic-color
- Owner: zyyv
- License: mit
- Created: 2024-01-29T10:58:19.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-04-26T09:28:09.000Z (8 months ago)
- Last Synced: 2024-04-26T10:29:30.844Z (8 months ago)
- Language: TypeScript
- Homepage: https://color.zyob.top
- Size: 2.96 MB
- Stars: 4
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
magic-color
🌈 Make the colors be magical.
Watch my Talk to learn more basic knowledge points.
## Features
-
💫
Support `multi-color model` conversion. -
📦
Built-in color related components. -
🚀
Provides utility toolset functions -
🦄
Theme color generator and fully customizable. -
🥳esmonly & 0 dependencies. -
Provide powerful for Onu UI.
## Usage
```bash
pnpm add magic-color
```
A lot of color tool functions for you to use, providing easy conversion, generation, parsing, comparison, operation and other functions.
### basic
```ts
import { Magicolor, mc } from 'magic-color'
// mc is an alias of Magicolor, but more static methods are mounted on mc, making it more powerful 💪.
const color = new Magicolor('#ffffff') // auto parse color
const color = mc('#ffffff')
const color = mc([255, 255, 255]) // default parse as RGB
const color = mc({ r: 255, g: 255, b: 255 })
const color = mc('#ffffff', 'hex') // specify color type
const color = mc('#ffffff', 'hex', 1) // specify opacity
```
`Magicolor` will automatically infer the input color type and the opacity.
**Currently Magicolor supports the following types: `RGB`, `HEX`, `HSL`, `HSB`, `LAB`, `Keyword`.**
You can convert between supported types.
```ts
color.toRgb() // RGB value: [255, 255, 255]
color.toHex() // HEX value: '#ffffff'
color.toHsl() // HSL value: [0, 0, 100]
color.toHsb() // HSB value: [0, 0, 100]
// or you can use the `to` method
color.to('your transformed type')
```
Get any type value of the color.
```ts
color.value() // current type value. If type is rgb: [255, 255, 255]
color.value('hex') // HEX value: '#ffffff'
color.value('hsl') // HSL value: [0, 0, 100]
color.value('hsb') // HSB value: [0, 0, 100]
```
If you want to output a color string, you can use the `css` method, and you can choose whether you need opacity.
```ts
color.css() // '#ffffff'
// with opacity
color.css(true) // '#ffffffff'
color.css('rgb') // 'rgb(255 255 255)'
color.css('rgb', true) // 'rgb(255 255 255 / 100%)'
```
Refer to the [type documentation](https://github.com/zyyv/magic-color/blob/main/src/core/types.ts) for more information.
And more...
### mc.theme
Well, you can use it to create a theme color.
```ts
import { mc } from 'magic-color'
mc.theme() // A random theme color
mc.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`.
```ts
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]
}
```
```ts
import { mc } from 'magic-color'
mc.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",
// }
```
## Credits
- [apca-w3](https://github.com/Myndex/apca-w3)
- [chroma.js](https://github.com/gka/chroma.js)
- [theme-colors](https://github.com/unjs/theme-colors)
## Activity
## license
[MIT](./LICENSE)