Reasonable Colors is an open-source color system for building accessible, nice-looking color palettes.

Reasonable Colors is free and open source.

The annotated source-code is available on Github (mirrored on Gitlab) and released under the MIT license. Anyone can use these colors for anything.

Reasonable colors are accessible.

The color system was purpose-built for creating accessible, high-contrast color combinations.

WCAG 2 Contrast Recommendations and Colors Shades

It's simple to use Reasonable Colors to meet WCAG 2 contrast recommendations. Each color comes in 6, numbered shades. The contrast between any two shades can be inferred by the difference between their shade numbers.

Read more about accessible color contrast on MDN.

Contrast ratio ≥ 3:1: shade difference of 2

The contrast between any shades with a difference of 2 (shade-2 and shade-4, for example) will be at least 3:1.

✓ WCAG 2 AA contrast for large text
✓ WCAG 2 AA contrast for icons and graphics

Contrast ratio ≥ 4.5:1: shade difference of 3

The contrast between any shades with a difference of 3 (shade-2 and shade-5, for example) will be at least 4.5:1.

✓ WCAG 2 AA contrast for body text
✓ WCAG 2 AAA contrast for large text

Contrast ratio ≥ 7:1: shade difference of 4

The contrast between any shades with a difference of 4 (shade-2 and shade-6, for example) will be at least 7:1.

✓ WCAG 2 AAA contrast for body text

The Fun Part

And here's the really fun part – because this is all built within the LCH color space and the relative luminance for each shade is pinned within certain ranges, those contrast rules work across all 24 color sets. Mix and match shades from any color, even the grays.

Reasonable colors are easy to use.

The 24 sets of named colors are uniformly spaced, each hue is 15° apart from its neighbors on the LCH color wheel. This uniform spacing makes it simple to find complimentary pairs and build nice-looking color palettes.

Getting Started

Reasonable Colors defines a set of CSS variables that follow this format:

--color-COLORNAME-SHADE /* Example */ code { background-color: var(--color-magenta-2);

The simplest way to get started is to include the single CSS file:

<link rel="stylesheet" href="https://unpkg.com/reasonable-colors@0.4.0/reasonable-colors.css">

Or install via NPM:

npm install reasonable-colors

Other Color Spaces

For simplicity, the default Reasonable Colors CSS variables use hex values to define the colors. But, both HSL and RGB CSS variables are also available:

<link rel="stylesheet" href="https://unpkg.com/reasonable-colors@0.4.0/reasonable-colors-hsl.css"> <link rel="stylesheet" href="https://unpkg.com/reasonable-colors@0.4.0/reasonable-colors-rgb.css">

Support for LCH Color

Sometime in the near future, web browsers will begin to support wide gamut color spaces. Since Reasonable Colors was built using the LCH color space, it's ready for this day and already provides LCH CSS variables.

<link rel="stylesheet" href="https://unpkg.com/reasonable-colors@0.4.0/reasonable-colors-lch.css">

SCSS Variables

A corresponding .scss file (for each color space) is provided with SCSS variable declarations.

Help Contribute

Have a better name for a color? Notice a silly or a serious mistake? Have ideas to improve the project? Kindly let me know! Discuss on Twitter @matthewhowell, open an issue on Github, or even send an email.

Support

Reasonable Colors is and forever will be free and open source. Contributing and sharing the project are both great, free ways to support it.

Read how to financially support Reasonable Colors

The easiest way to financially support Reasonable Company's open-source work is to make a small donation.

Make a donation on Ko-fi →

Thanks and Acknowledgements

Like nearly everything, this couldn't have been made without the generous work of many other humans. An incomplete list of helpers:

Lea Verou's lovely introduction to LCH color on the web
George Francis' approachable tutorial for selecting colors programmatically
Everyone at Moqups who works on Culori, a splendid JS color library
The undefatigable MDN Web Docs, the best web docs
U.S. Web Design System docs, which do a wonderful job of explaining their design decisions

Color Sets

gray

#f6f6f6

#e2e2e2

#8b8b8b

#6f6f6f

#3e3e3e

#222222

rose

#fff7f9

#ffdce5

#ff3b8d

#db0072

#800040

#4c0023

raspberry

#fff8f8

#ffdddf

#ff426c

#de0051

#82002c

#510018

red

#fff8f6

#ffddd8

#ff4647

#e0002b

#830014

#530003

orange

#fff8f5

#ffded1

#fd4d00

#cd3c00

#752100

#401600

cinnamon

#fff8f3

#ffdfc6

#d57300

#ac5c00

#633300

#371d00

amber

#fff8ef

#ffe0b2

#b98300

#926700

#523800

#302100

yellow

#fff9e5

#ffe53e

#9c8b00

#7d6f00

#463d00

#292300

lime

#f7ffac

#d5f200

#819300

#677600

#394100

#222600

chartreuse

#e5ffc3

#98fb00

#5c9b00

#497c00

#264500

#182600

green

#e0ffd9

#72ff6c

#00a21f

#008217

#004908

#062800

emerald

#dcffe6

#5dffa2

#00a05a

#008147

#004825

#002812

aquamarine

#daffef

#42ffc6

#009f78

#007f5f

#004734

#00281b

teal

#d7fff7

#00ffe4

#009e8c

#007c6e

#00443c

#002722

cyan

#c4fffe

#00fafb

#00999a

#007a7b

#004344

#002525

powder

#dafaff

#8df0ff

#0098a9

#007987

#004048

#002227

sky

#e3f7ff

#aee9ff

#0094b4

#007590

#00404f

#001f28

cerulean

#e8f6ff

#b9e3ff

#0092c5

#00749d

#003c54

#001d2a

azure

#e8f2ff

#c6e0ff

#008fdb

#0071af

#003b5e

#001c30

blue

#f0f4ff

#d4e0ff

#0089fc

#006dca

#00386d

#001a39

indigo

#f3f3ff

#deddff

#657eff

#0061fc

#00328a

#001649

violet

#f7f1ff

#e8daff

#9b70ff

#794aff

#2d0fbf

#0b0074

purple

#fdf4ff

#f7d9ff

#d150ff

#b01fe3

#660087

#3a004f

magenta

#fff3fc

#ffd7f6

#f911e0

#ca00b6

#740068

#44003c

pink

#fff7fb

#ffdcec

#ff2fb2

#d2008f

#790051

#4b0030