Ohcolor

🎨 ohcolor is a moden, expandable immutable color library.

WIP: The project is currently under intensive development and its API may undergo breaking changes. A stable API is expected to be available starting from 0.1.0.

Usage

Install package:

# npm
npm install ohcolor

# yarn
yarn add ohcolor

# pnpm
pnpm install ohcolor

# bun
bun install ohcolor

Import:

import { mycolor } from "ohcolor";
// or
import mycolor from "ohcolor";

mycolor("#ff3399").rgba(); // [255, 51, 153, 1]
mycolor("#ff3399").red(); // 255
mycolor(255, 165, 0, 1).red(133).rgba(); // [133, 165, 0, 1]
mycolor(255, 165, 0, 1).green(34).rgba(); // [255, 34, 0, 1]
mycolor(255, 165, 0, 1).blue(99).rgba(); // [255, 165, 99, 1]
mycolor(255, 165, 0, 1).alpha(0.5).rgba(); // [255, 165, 0, 0.5]
mycolor("#ffa500").format('string'); // rgba(255,165,0,1)
mycolor("#ffa500").format('css'); // rgba(255 165 0 / 1)
mycolor("#ffa500").format('object'); // { r: 255, g: 165, b: 0, a: 1 }

All right, that's all ohcolor has to offer. It has simple functions and is small enough. But you can add plugins as needed to enrich ohcolor.

Plugin

A plugin is an independent module that can be added to Ohcolor to extend functionality or add new features.

By default, Ohcolor comes with core code only and some core built-in plugins.

You can load multiple plugins based on your need.

Customize

You could build your own Ohcolor plugin to meet different needs.

Feel free to open a pull request to share your plugin.

Template of a Ohcolor plugin.

import type { ColorPlugin } from "ohcolor";
import "./type.d.ts"; // your plugin .d.ts

export const yourPlugin: ColorPlugin = (option, ohcolorClass, ohcolorFactory) => {
  // extend ohcolor()
  // e.g. add ohcolor().isSame()
  const proto = ohcolorClass.prototype
  proto.isSame = function(arguments) {}

  // extend ohcolor
  // e.g. add ohcolor.isSame()
  const _ohcolorFactory = ohcolorFactory
  _ohcolorFactory.isSame = arguments => {}

  // overriding existing API
  // e.g. extend ohcolor().format()
  const oldFormat = proto.format
  proto.format = function(arguments) {
    // original format result
    const result = oldFormat.bind(this)(arguments)
    // return modified result
  }
}

and your type.d.ts:

export {};

declare module "ohcolor" {
  interface MyColor {
    /** your custom function. */
    isSame: () => boolean;
  }
}

or use js:

export default (option, ohcolorClass, ohcolorFactory) => {
  // extend ohcolor()
  // e.g. add ohcolor().isSame()
  ohcolorClass.prototype.isSame = function(arguments) {}

  // extend ohcolor
  // e.g. add ohcolor.isSame()
  ohcolorFactory.isSame = arguments => {}

  // overriding existing API
  // e.g. extend ohcolor().format()
  const oldFormat = ohcolorClass.prototype.format
  ohcolorClass.prototype.format = function(arguments) {
    // original format result
    const result = oldFormat.bind(this)(arguments)
    // return modified result
  }
}

Plugins

inputNamed

Support input w3cx11 color.

import mycolor from 'ohcolor'
import inputNamed from 'ohcolor/plugin/inputNamed'

mycolor.extend(inputNamed)
mycolor("yellow").rgba() // [255, 255, 0, 1]

getLuminance

Returns a number (float) representing the luminance of a color.

import { mycolor } from 'ohcolor'
import { getLuminance } from 'ohcolor/plugin/getLuminance'

mycolor.extend(getLuminance)
mycolor("#ffff00").getLuminance() // 0.9278

themeColors

Generate color shades for themes.

import { mycolor } from 'ohcolor'
import { themeColors } from 'ohcolor/plugin/themeColors'

mycolor.extend(themeColors)
mycolor("#ffff00").themeColors()

Will generate the following shades:

{
  "100": "#FFFFE6",
  "200": "#FFFFBF",
  "300": "#FFFF99",
  "400": "#FFFF4D",
  "50": "#FFFFF2",
  "500": "#FFFF00",
  "600": "#E6E600",
  "700": "#999900",
  "800": "#737300",
  "900": "#4D4D00",
  "950": "#333300",
}

readableColor

Get black or white for best contrast depending on the luminosity.

import { mycolor } from 'ohcolor'
import { readableColor } from 'ohcolor/plugin/readableColor'

mycolor.extend(readableColor)
mycolor("#ffff00").readableColor() // #000
mycolor("#000").readableColor() // #fff

formatHex

Extend format function to support formatting to get hex color string.

import { mycolor } from 'ohcolor'
import { formatHex } from 'ohcolor/plugin/formatHex'

mycolor.extend(formatHex)
mycolor(255, 165, 0, 1).format("hex") // #ffa500ff

formatDec

Extend format function to support formatting to get decimal number color.

import { mycolor } from 'ohcolor'
import { formatDec } from 'ohcolor/plugin/formatDec'

mycolor.extend(formatDec)
mycolor(46, 139, 87, 0.6).format("dec") // 780_883_865

outputHex

Support output hexadecimal color string.

import { mycolor } from 'ohcolor'
import { outputHex } from 'ohcolor/plugin/outputHex'

mycolor.extend(outputHex)
mycolor(255, 165, 0, 1).hex() // #ffa500ff

outputGl

Get rgba array, but in the channel range of 0 ~ 1 instead of 0 ~ 255.

import { mycolor } from 'ohcolor'
import { outputGl } from 'ohcolor/plugin/outputGl'

mycolor.extend(outputGl)
mycolor(51, 204, 0, 1).gl() // [0.2, 0.8, 0, 1]

getter

Getters for rgba.

import { mycolor } from 'ohcolor'
import { getter } from 'ohcolor/plugin/getter'

mycolor.extend(getter)

const color = mycolor(255, 135, 0, 1);
color.getR() // 255
color.getG() // 135
color.getB() // 0
color.getA() // 1

Development

• Clone this repository
• Install latest LTS version of Node.js
• Enable Corepack using corepack enable
• Install dependencies using pnpm install
• Run interactive tests using pnpm dev

License

Made with 💛 @wzc520pyfm

Published under MIT License.