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.
• 🥳 esm only & 0 dependencies.
• Provide powerful for Onu UI.

Usage

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

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.

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.

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.

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 for more information.

And more...

mc.theme

Well, you can use it to create a theme color.

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.

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 { 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
• chroma.js
• theme-colors

Activity

license

MIT