Color System

@mosmox-ui/colors is a standalone React package for using the Mosmox UI color system in applications. It provides named color scales, sixteen tones per scale, multiple color formats, and a small ColorSwatch component for previews and copy interactions.

InstallationCopy Anchor Link

Install the package from npm:

npm install @mosmox-ui/colors

Alternative package managers:

pnpm add @mosmox-ui/colors
yarn add @mosmox-ui/colors

React 18 or newer is required as a peer dependency. The package is independent from the main UI component package, so it can be installed only where the color tokens or swatch component are needed.

Color scalesCopy Anchor Link

The package includes red, orange, yellow, green, teal, blue, violet, rose, slate, and neutral scales. Every scale contains sixteen tones:

25, 50, 75, 100, 150, 200, 300, 400, 500, 600, 700, 800, 850, 900, 950, and 975.

Lower values are soft tints and higher values are deeper shades. The middle tones are useful for controls and accents, while the lightest and darkest tones work well for surfaces, borders, and readable text.

The neutral scale is a grayscale ramp that moves from near-white to near-black. Use it for page surfaces, cards, borders, muted text, overlays, and dark UI states:

import { colors } from '@mosmox-ui/colors';

const panel = colors.neutral[50].hex;
const border = colors.neutral[200].hex;
const ink = colors.neutral[900].hex;

Use named tokensCopy Anchor Link

Import the colors object and select a scale and tone. Every token includes a semantic name and ready-to-use hex, rgb, and hsl values:

import { colors } from '@mosmox-ui/colors';

const accent = colors.red[500];

export function Alert() {
  return (
    <div style={{ backgroundColor: colors.red[50].hex, color: accent.hex }}>
      Important message
    </div>
  );
}

A token has this shape:

{
  name: 'Red Core',
  scale: 'red',
  tone: 500,
  hex: '#EA183F',
  rgb: 'rgb(234, 24, 63)',
  hsl: 'hsl(350 82% 51%)',
}

Use the tone number when a design token is needed, or use the token's name when displaying a palette label. Keeping the scale and tone in code makes it easy to change a palette centrally without scattering raw color strings through a project.

Use a color by nameCopy Anchor Link

When a color is selected from configuration, a CMS, or a design tool, use getColor to resolve the semantic name without manually splitting the scale and tone:

import { getColor } from '@mosmox-ui/colors';

const accent = getColor('Red Core');
const surface = getColor('slate whisper');

export function NamedTheme() {
  if (!accent || !surface) return null;

  return (
    <div style={{ backgroundColor: surface.hex, color: accent.hex }}>
      Named color tokens
    </div>
  );
}

Names are case-insensitive and extra spaces are ignored. getColor returns undefined when the name does not exist, so handle that case before using the token. The same names shown in the browser are available in code, for example Red Whisper, Red Core, Blue Bold, and Slate Void.

For direct iteration or lookup by the exact displayed name, import colorByName:

import { colorByName } from '@mosmox-ui/colors';

const brandRed = colorByName['Red Core'];

Render a color swatchCopy Anchor Link

ColorSwatch accepts either a token or a CSS color string. Clicking the swatch copies the color's HEX value by default:

import { ColorSwatch, colors } from '@mosmox-ui/colors';

export function PalettePreview() {
  return (
    <ColorSwatch
      color={colors.blue[500]}
      showValue
      size={64}
      onCopy={(value) => console.log('Copied', value)}
    />
  );
}

For a one-off CSS color, pass a string instead:

<ColorSwatch color="#D90B2C" showValue />

Import the token collectionCopy Anchor Link

The token collection is also available from the subpath export, which is useful when an application does not need the React component:

import { colors, colorScales, colorTones } from '@mosmox-ui/colors/tokens';

const surface = colors.slate[25].hex;
const availableTones = colorTones;

The browser page supports HEX, RGB, RGBA, HSL, and HSLA display and copy formats. The selected format is remembered in local storage for the next visit.

Package linksCopy Anchor Link

These links are temporary project links and can be updated after publishing:

• Open the package on npmjs.com
• Open the package repository on GitHub
• View the @mosmox-ui/colors source in this workspace

License and creditsCopy Anchor Link

The color scales and React implementation are original Mosmox UI project work. The package is distributed under the MIT License; the license text is included in colors/LICENSE and should remain with redistributed copies.