@phun-ky/moebius möbius

Generate harmonious, customizable color palettes from a single base color - instantly and programmatically.

• @phun-ky/moebius möbius
  • About
  • Features
  • Demo
  • Install
  • Full API-reference
  • Usage
    • Creating palettes
      • Default options
      • Interpolate
      • Luminance shift
      • Monochromatic
      • Complement
      • Split
      • Triadic
      • Tetradic
      • Pentadic
      • Hexadic
      • Analogous
    • Get color objects
      • toString
      • toObject
      • toFloat
    • Types
  • Contributing
  • License
  • Changelog
  • Sponsor me

About

Möbius is a color palette generation tool designed for developers and designers who need quick, consistent, and attractive color schemes. It supports a wide variety of palette types and exports color data in multiple formats — RGB, HSL, LAB, CMYK, and more - making it ideal for both web design and data visualization.

Features

• Generate palettes using:
  • Interpolation
  • Luminance shifts
  • Monochromatic, Complementary, Analogous, Triadic, Tetradic, etc.
• Output in multiple color spaces: RGB, HSL, LCH, CMYK, etc.
• Randomized or lightness-corrected options
• Diverging palette support
• TypeScript-friendly API

Demo

You can check out a working CodePen where you can adjust settings and colors here, or the website moebius.wtf.

Install

1npm i -S @phun-ky/moebius

Full API-reference

You can find the full API documentation here.

Usage

Import and run the required function:

1import Moebius from '@phun-ky/moebius';
2
3const { MoebiusColor, MoebiusPalettes } = await Moebius();
4
5const palette = new MoebiusPalettes({
6  baseColor: new MoebiusColor('#1e90ff')
7});
8
9console.log(palette.colors.interpolate); // ['#1e90ff', '#3298d8', ...]

Creating palettes

The main feature is the ability to create palettes with a given primary color and a secondary color (used for diverging palettes). You can also give the color to diverge to/from.

Default options

1const defaultOptions = {
2  diverging: false,
3  bezier: false,
4  randomOffset: false,
5  correctLightness: false,
6  noDuplicates: true,
7  colorScaleMode: 'lch',
8  reverseDirection: false,
9  divergentColor: '#f5f5f5'
10};

You initiate MoebiusPalette like this:

1import Moebius from '@phun-ky/moebius';
2
3const { MoebiusPalette, MoebiusColor } = await Moebius();
4
5const palettes = new MoebiusPalettes({
6  baseColor: new MoebiusColor('#003f5c'),
7  secondaryColor: new MoebiusColor('#ff9900'),
8  ...options
9});

And then you can enjoy your palettes!

Interpolate

1console.log(palettes.colors.interpolate);
2/*
3[
4  "#003f5c",
5  "#2b4e4d",
6  "#555d3d",
7  "#806c2e",
8  "#aa7b1f",
9  "#d58a0f",
10  "#ff9900"
11]
12*/

Gives you an array of hex-colors.

Luminance shift

1console.log(palettes.colors.luminanceShift);
2/*
3[
4  "#003f5c",
5  "#5f8bac",
6  "#b3dff2",
7  "#f5f5f5",
8  "#fcb852",
9  "#d17300",
10  "#762800"
11]
12*/

Gives you an array of hex-colors.

If you diverge them, it could look like this:

Monochromatic

1console.log(palettes.colors.monochromatic);
2/*
3[
4  "#003f5c",
5  "#003342",
6  "#002329",
7  "#000e0f",
8  "#000000"
9]
10*/

Gives you an array of hex-colors.

Complement

1console.log(palettes.colors.complement);
2/*
3[
4  "#003f5c",
5  "#0f394d",
6  "#1f343d",
7  "#2e2e2e",
8  "#3d281f",
9  "#4d230f",
10  "#5c1d00"
11]
12*/

Gives you an array of hex-colors.

Split

1console.log(palettes.colors.split);
2/*
3[
4  "#003f5c",
5  "#1f2a43",
6  "#3d152a",
7  "#5c0011",
8  "#5c190b",
9  "#5c3206",
10  "#5c4b00"
11]
12*/

Gives you an array of hex-colors.

Triadic

1console.log(palettes.colors.triadic);
2/*
3[
4  "#003f5c",
5  "#1f2a52",
6  "#3d1549",
7  "#5c003f",
8  "#521f2a",
9  "#493d15",
10  "#3f5c00"
11]
12*/

Gives you an array of hex-colors.

Tetradic

1console.log(palettes.colors.tetradic);
2/*
3[
4  "#003f5c",
5  "#26205c",
6  "#4b005c",
7  "#540f2e",
8  "#5c1d00",
9  "#363d00",
10  "#115c00"
11]
12*/

Gives you an array of hex-colors.

Pentadic

1console.log(palettes.colors.pentadic);
2/*
3[
4  "#003f5c",
5  "#2e203b",
6  "#5c001a",
7  "#5c2a0d",
8  "#5c5400",
9  "#2e5806",
10  "#005c0b"
11]
12*/

Gives you an array of hex-colors.

Hexadic

1console.log(palettes.colors.hexadic);
2/*
3[
4  "#003f5c",
5  "#3d1549",
6  "#5c0a2a",
7  "#5c1d00",
8  "#494700",
9  "#2a5c0a",
10  "#005c1d"
11]
12*/

Gives you an array of hex-colors.

Analogous

1console.log(palettes.colors.interpolate);
2/*
3[
4  "#003f5c",
5  "#00285c",
6  "#00115c",
7  "#0f085c",
8  "#1d005c",
9  "#34005c",
10  "#4b005c"
11]
12*/

Gives you an array of hex-colors.

Get color objects

1import Moebius from '@phun-ky/moebius';
2
3const { MoebiusColor } = await Moebius();
4
5//
6const color = new MoebiusColor('#003f5c');
7
8console.log(color.hsl); // hsl(199, 100%, 18%);

This will make available a color object with all of the colors readily converted and ready to use. This is an example output of the color object:

1{
2  "color": "#003f5c",
3  "name": "Maniac Mansion",
4  "hex": "#003f5c",
5  "rgb": "rgb(0, 63, 92)",
6  "hsl": {
7    "h": 199,
8    "s": 100,
9    "l": 18
10  },
11  "hwb": {
12    "h": 0.45,
13    "w": 0,
14    "b": 0.64
15  },
16  "hsv": {
17    "h": 198.91,
18    "s": 1,
19    "v": 0.36
20  },
21  "lab": {
22    "l": 24.72,
23    "a": -5.95,
24    "b": -22.26
25  },
26  "xyz": {
27    "x": 0.37,
28    "y": 0.43,
29    "z": 0.38
30  },
31  "lch": {
32    "l": 24.72,
33    "c": 23.04,
34    "h": 255.03
35  },
36  "oklch": {
37    "l": 0.35,
38    "c": 0.08,
39    "h": 236.65
40  },
41  "hsi": {
42    "h": 197.96,
43    "s": 1,
44    "i": 0.2
45  },
46  "oklab": {
47    "l": 0.35,
48    "a": -0.04,
49    "b": -0.06
50  },
51  "cmyk": {
52    "c": 100,
53    "m": 0,
54    "y": 32,
55    "k": 64
56  }
57}

toString

For the non-CSS units, the color object also exposes a toString method pr unit:

1const color = new MoebiusColor('#003f5c');
2
3console.log(color.hsl.toString()); // "199, 100, 18"

toObject

The color object exposes a toObject method, that allows to objectify from any color unit given to either a color object for the hsl units, or default rgb:

1const color = new MoebiusColor('#003f5c');
2
3console.log(color.toObject('hsl')); // "199, 100, 18"
4console.log(color.toObject(); // "0, 63, 92"

toFloat

The color object exposes a toFloat method, that allows to objectify to float values, as in 0-1 instead of 0-255/0-100 from any color unit given to either a color object for the hsl units, or default rgb:

1const color = new MoebiusColor('#003f5c');
2
3console.log(color.toFloat('hsl')); // "199, 1, 0.18"
4console.log(color.toFloat(); // "0, 0.25, 0.36"

Types

Types can be found in @phun-ky/moebius/moebius.d.ts.

Contributing

Want to contribute? Please read the CONTRIBUTING.md and CODE_OF_CONDUCT.md

License

This project is licensed under the MIT License - see the LICENSE file for details.

Changelog

See the CHANGELOG.md for details on the latest updates.

Sponsor me

I'm an Open Source evangelist, creating stuff that does not exist yet to help get rid of secondary activities and to enhance systems already in place, be it documentation or web sites.

The sponsorship is an unique opportunity to alleviate more hours for me to maintain my projects, create new ones and contribute to the large community we're all part of :)

Support me on GitHub Sponsors.

p.s. Ukraine is still under brutal Russian invasion. A lot of Ukrainian people are hurt, without shelter and need help. You can help in various ways, for instance, directly helping refugees, spreading awareness, putting pressure on your local government or companies. You can also support Ukraine by donating e.g. to Red Cross, Ukraine humanitarian organisation or donate Ambulances for Ukraine.