Mosmox UI
Current version
GitHubnpmjs.com

Mosmox UI palette

Colors for clear, expressive interfaces

Explore tonal color scales for product surfaces, accents, states, and brand moments. Each scale moves from a soft tint to a deep shade, ready to become a consistent CSS token system.

Color documentation Framework documentation

Color format

Choose the syntax copied to your clipboard.

Use HEX for tokens, RGB for utility values, and HSL when you need to tune saturation or lightness.

Red

16 tones
Red Whisper25#FEF6F7
Red Mist50#FDECEF
Red Pale75#FCDFE3
Red Soft100#FACCD4
Red Light150#F8B5C0
Red Gentle200#F494A4
Red Mid300#F16F85
Red Bright400#ED4561
Red Core500#E91C3E
Red Bold600#C81432
Red Strong700#A21028
Red Deep800#820D20
Red Ink850#6B0B1B
Red Night900#4F0814
Red Shadow950#33050D
Red Void975#200308

Orange

16 tones
Orange Whisper25#FEF9F5
Orange Mist50#FEF3EC
Orange Pale75#FDEADD
Orange Soft100#FCDECA
Orange Light150#FACFB2
Orange Gentle200#F8BA91
Orange Mid300#F6A26A
Orange Bright400#F3873F
Orange Core500#F06C14
Orange Bold600#CE5A0D
Orange Strong700#A84A0B
Orange Deep800#863B09
Orange Ink850#6E3007
Orange Night900#512405
Orange Shadow950#351703
Orange Void975#220F02

Yellow

16 tones
Yellow Whisper25#FEFCF5
Yellow Mist50#FEF9EC
Yellow Pale75#FDF4DD
Yellow Soft100#FCEECA
Yellow Light150#FAE7B2
Yellow Gentle200#F8DC91
Yellow Mid300#F6D06A
Yellow Bright400#F3C33F
Yellow Core500#F0B514
Yellow Bold600#CE9B0D
Yellow Strong700#A87E0B
Yellow Deep800#866509
Yellow Ink850#6E5307
Yellow Night900#513D05
Yellow Shadow950#352803
Yellow Void975#221902

Green

16 tones
Green Whisper25#F7FDFA
Green Mist50#EFFBF5
Green Pale75#E3F8EE
Green Soft100#D3F3E4
Green Light150#BFEED8
Green Gentle200#A2E6C7
Green Mid300#82DEB3
Green Bright400#5ED49D
Green Core500#3ACB87
Green Bold600#2EAD72
Green Strong700#258D5D
Green Deep800#1E714A
Green Ink850#195D3D
Green Night900#12442D
Green Shadow950#0C2C1D
Green Void975#071C13

Teal

16 tones
Teal Whisper25#F6FDFE
Teal Mist50#EDFBFC
Teal Pale75#E0F8FA
Teal Soft100#CFF4F7
Teal Light150#B9F0F4
Teal Gentle200#9AE9EF
Teal Mid300#77E1E9
Teal Bright400#50D9E2
Teal Core500#28D0DC
Teal Bold600#1FB2BD
Teal Strong700#19919A
Teal Deep800#14747B
Teal Ink850#105F65
Teal Night900#0C464B
Teal Shadow950#082E30
Teal Void975#051D1F

Blue

16 tones
Blue Whisper25#F6F8FE
Blue Mist50#ECF0FD
Blue Pale75#DEE5FC
Blue Soft100#CBD6FB
Blue Light150#B4C4F8
Blue Gentle200#93AAF6
Blue Mid300#6E8DF2
Blue Bright400#436BEF
Blue Core500#194AEB
Blue Bold600#123DCA
Blue Strong700#0E31A4
Blue Deep800#0B2783
Blue Ink850#09206C
Blue Night900#071850
Blue Shadow950#040F34
Blue Void975#030A21

Violet

16 tones
Violet Whisper25#F9F6FE
Violet Mist50#F4EDFD
Violet Pale75#EBE0FB
Violet Soft100#E0CEF8
Violet Light150#D2B7F5
Violet Gentle200#BE98F1
Violet Mid300#A874EC
Violet Bright400#8F4BE7
Violet Core500#7523E1
Violet Bold600#631AC1
Violet Strong700#50159D
Violet Deep800#40117E
Violet Ink850#350E67
Violet Night900#270A4C
Violet Shadow950#190731
Violet Void975#10041F

Rose

16 tones
Rose Whisper25#FEF6FA
Rose Mist50#FCEDF5
Rose Pale75#FAE0ED
Rose Soft100#F8CEE3
Rose Light150#F4B8D6
Rose Gentle200#F099C4
Rose Mid300#EA75B0
Rose Bright400#E44E99
Rose Core500#DF2682
Rose Bold600#BF1D6E
Rose Strong700#9B1759
Rose Deep800#7C1347
Rose Ink850#660F3B
Rose Night900#4B0B2B
Rose Shadow950#31071C
Rose Void975#1F0512

Slate

16 tones
Slate Whisper25#F9FAFB
Slate Mist50#F3F4F7
Slate Pale75#EAEDF0
Slate Soft100#DEE2E8
Slate Light150#CFD5DE
Slate Gentle200#BAC3CF
Slate Mid300#A2AEBE
Slate Bright400#8796AB
Slate Core500#6C7E99
Slate Bold600#5A6A81
Slate Strong700#495769
Slate Deep800#3B4554
Slate Ink850#303945
Slate Night900#242A33
Slate Shadow950#171B21
Slate Void975#0F1115

Neutral

16 tones
Neutral Whisper25#FAFAFA
Neutral Mist50#F5F5F5
Neutral Pale75#EDEDED
Neutral Soft100#E3E3E3
Neutral Light150#D6D6D6
Neutral Gentle200#C4C4C4
Neutral Mid300#B0B0B0
Neutral Bright400#999999
Neutral Core500#828282
Neutral Bold600#6E6E6E
Neutral Strong700#595959
Neutral Deep800#474747
Neutral Ink850#3B3B3B
Neutral Night900#2B2B2B
Neutral Shadow950#1C1C1C
Neutral Void975#121212

Color tokens for React

A practical color system for expressive interfaces

Choose a color by scale and tone, or use a semantic name when a value comes from configuration. Every token is ready for product surfaces, borders, text, accents, and interaction states.

Tonal scales

Sixteen balanced steps per scale make light surfaces, readable text, and strong accents easy to choose.

Semantic names

Use names such as Red Core or Slate Whisper when numeric values should stay out of application logic.

Ready-to-copy values

Switch between HEX, RGB, RGBA, HSL, and HSLA formats and copy the value directly into your CSS or theme.

React-ready tokens

Import the palette or ColorSwatch in any React project and keep color decisions reusable.

Quick start

Bring the palette into your React project

Install the standalone package, then import tokens or the ColorSwatch component wherever you build a theme or color picker.

Read the documentation Open npm package