Mid Engineering Logo

Mid Engineering Docs

Pretty Ugly Colors

Pretty Ugly Colors is an open source color system that is currently being developed as a host for other functionality to reduce token proliferation, simplify theming, and future-proof scalability.

Install

Add a comprehensive and accessible color palette directly into your project by installing the package below:

Install using npm:

bash

npm i @razorloaf/pretty-ugly-colors

You can also use CDN files within your project. It's advised you don't use this for production as they're are unreliable and could increase load times.

Install using CDN:

html

<!-- Import all colors at once -->

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@razorloaf/pretty-ugly-colors@latest/dist/css/colors.css">

<!-- Or import specific color palettes -->

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@razorloaf/pretty-ugly-colors@latest/dist/css/neutral.css">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@razorloaf/pretty-ugly-colors@latest/dist/css/purple.css">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@razorloaf/pretty-ugly-colors@latest/dist/css/blue.css">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@razorloaf/pretty-ugly-colors@latest/dist/css/green.css">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@razorloaf/pretty-ugly-colors@latest/dist/css/yellow.css">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@razorloaf/pretty-ugly-colors@latest/dist/css/orange.css">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@razorloaf/pretty-ugly-colors@latest/dist/css/red.css">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@razorloaf/pretty-ugly-colors@latest/dist/css/pink.css">

Usage

Tayer colors is a sophisticated color system that's implemented as structured JavaScript/TypeScript objects but designed to be used in multiple contexts. Here's how you can use for vanilla CSS.

Tayer colors is a sophisticated color system that's implemented as structured JavaScript/TypeScript objects but designed to be used in multiple contexts. Here's how you can use for vanilla CSS.
Tayer colors is a sophisticated color system that's implemented as structured JavaScript/TypeScript objects but designed to be used in multiple contexts. Here's how you can use for vanilla CSS.

Vanilla CSS:

css

/* Import all colors */

import '@razorloaf/pretty-ugly-colors/colors.css';

/* Individual imports */

import '@razorloaf/pretty-ugly-colors/neutral.css';

import '@razorloaf/pretty-ugly-colors/purple.css';

import '@razorloaf/pretty-ugly-colors/blue.css';

import '@razorloaf/pretty-ugly-colors/green.css';

import '@razorloaf/pretty-ugly-colors/yellow.css';

import '@razorloaf/pretty-ugly-colors/orange.css';

import '@razorloaf/pretty-ugly-colors/red.css';

import '@razorloaf/pretty-ugly-colors/pink.css';

/* Use them instantly */

.actually-ugly-button {

background-color: var(--green-900);

color: var(--yellow-500);

border-color: var(--blue-300);

}

Additionally you can programmatically access to the colors:

Additionally you can programmatically access to the colors:
Additionally you can programmatically access to the colors:

Javascript/Typescript:

js

// Import all colors

import { colors } from '@razorloaf/pretty-ugly-colors';

// Import just what you need

import { green, yellow, blue } from '@razorloaf/pretty-ugly-colors';

// Use them directly

const darkGreen = green[900];

const midYellow = yellow[500];

const lightBlue = blue[300];

Scales

For your convenience we've provided the Pretty Ugly Color scales below:

Purple

1

2

3

4

5

6

7

8

9

10

11

12

Purple

Purple Alpha

Purple Dark

Purple Dark Alpha

Blue

1

2

3

4

5

6

7

8

9

10

11

12

Blue

Blue Alpha

Blue Dark

Blue Dark Alpha

Green

1

2

3

4

5

6

7

8

9

10

11

12

Green

Green Alpha

Green Dark

Green Dark Alpha

Yellow

1

2

3

4

5

6

7

8

9

10

11

12

Yellow

Yellow Alpha

Yellow Dark

Yellow Dark Alpha

Orange

1

2

3

4

5

6

7

8

9

10

11

12

Orange

Orange Alpha

Orange Dark

Orange Dark Alpha

Red

1

2

3

4

5

6

7

8

9

10

11

12

Red

Red Alpha

Red Dark

Red Dark Alpha

Pink

1

2

3

4

5

6

7

8

9

10

11

12

Pink

Pink Alpha

Pink Dark

Pink Dark Alpha

Neutral

1

2

3

4

5

6

7

8

9

10

11

12

Neutral

Neutral Alpha

Neutral Dark

Neutral Dark Alpha

Are you a designer?

Access our Pretty Ugly Figma File

Footnotes

  1. This open source package is being maintained by Joshua Hoy.

  1. Licensed under MIT. See LICENSE file for complete terms.

  1. While attribution is appreciated, it's not required for implementation in commercial projects.

Mid Engineering © 2025