Radix Homepage
Radix Homepage
ThemesThemesPrimitivesPrimitivesIconsIconsColorsColors
Documentation

Scales

An overview of all 30 Radix Colors scales.

Colors

Radix Colors provides 15 color scales, designed for white foreground text at step 9.

Tomato

1
2
3
4
5
6
7
8
9
10
11
12
Tomato
Tomato Alpha
Tomato Dark
Tomato Dark Alpha

Red

1
2
3
4
5
6
7
8
9
10
11
12
Red
Red Alpha
Red Dark
Red Dark Alpha

Crimson

1
2
3
4
5
6
7
8
9
10
11
12
Crimson
Crimson Alpha
Crimson Dark
Crimson Dark Alpha

Pink

1
2
3
4
5
6
7
8
9
10
11
12
Pink
Pink Alpha
Pink Dark
Pink Dark Alpha

Plum

1
2
3
4
5
6
7
8
9
10
11
12
Plum
Plum Alpha
Plum Dark
Plum Dark Alpha

Purple

1
2
3
4
5
6
7
8
9
10
11
12
Purple
Purple Alpha
Purple Dark
Purple Dark Alpha

Violet

1
2
3
4
5
6
7
8
9
10
11
12
Violet
Violet Alpha
Violet Dark
Violet Dark Alpha

Indigo

1
2
3
4
5
6
7
8
9
10
11
12
Indigo
Indigo Alpha
Indigo Dark
Indigo Dark Alpha

Blue

1
2
3
4
5
6
7
8
9
10
11
12
Blue
Blue Alpha
Blue Dark
Blue Dark Alpha

Cyan

1
2
3
4
5
6
7
8
9
10
11
12
Cyan
Cyan Alpha
Cyan Dark
Cyan Dark Alpha

Teal

1
2
3
4
5
6
7
8
9
10
11
12
Teal
Teal Alpha
Teal Dark
Teal Dark Alpha

Green

1
2
3
4
5
6
7
8
9
10
11
12
Green
Green Alpha
Green Dark
Green Dark Alpha

Grass

1
2
3
4
5
6
7
8
9
10
11
12
Grass
Grass Alpha
Grass Dark
Grass Dark Alpha

Orange

1
2
3
4
5
6
7
8
9
10
11
12
Orange
Orange Alpha
Orange Dark
Orange Dark Alpha

Brown

1
2
3
4
5
6
7
8
9
10
11
12
Brown
Brown Alpha
Brown Dark
Brown Dark Alpha

Bright Colors

Radix Colors provides 5 bright scales, designed for black foreground text at step 9.

Sky

1
2
3
4
5
6
7
8
9
10
11
12
Sky
Sky Alpha
Sky Dark
Sky Dark Alpha

Mint

1
2
3
4
5
6
7
8
9
10
11
12
Mint
Mint Alpha
Mint Dark
Mint Dark Alpha

Lime

1
2
3
4
5
6
7
8
9
10
11
12
Lime
Lime Alpha
Lime Dark
Lime Dark Alpha

Yellow

1
2
3
4
5
6
7
8
9
10
11
12
Yellow
Yellow Alpha
Yellow Dark
Yellow Dark Alpha

Amber

1
2
3
4
5
6
7
8
9
10
11
12
Amber
Amber Alpha
Amber Dark
Amber Dark Alpha

Grays

Radix Colors provides 6 gray scales.

Gray

1
2
3
4
5
6
7
8
9
10
11
12
Gray
Gray Alpha
Gray Dark
Gray Dark Alpha

Mauve

1
2
3
4
5
6
7
8
9
10
11
12
Mauve
Mauve Alpha
Mauve Dark
Mauve Dark Alpha

Slate

1
2
3
4
5
6
7
8
9
10
11
12
Slate
Slate Alpha
Slate Dark
Slate Dark Alpha

Sage

1
2
3
4
5
6
7
8
9
10
11
12
Sage
Sage Alpha
Sage Dark
Sage Dark Alpha

Olive

1
2
3
4
5
6
7
8
9
10
11
12
Olive
Olive Alpha
Olive Dark
Olive Dark Alpha

Sand

1
2
3
4
5
6
7
8
9
10
11
12
Sand
Sand Alpha
Sand Dark
Sand Dark Alpha

Metals

Radix Colors provides 2 metal scales.

Bronze

1
2
3
4
5
6
7
8
9
10
11
12
Bronze
Bronze Alpha
Bronze Dark
Bronze Dark Alpha

Gold

1
2
3
4
5
6
7
8
9
10
11
12
Gold
Gold Alpha
Gold Dark
Gold Dark Alpha

Overlays

The black and white scales are designed for overlays. These scales don’t change across themes.



1
2
3
4
5
6
7
8
9
10
11
12
Black Alpha
White Alpha
PreviousReleases
NextComposing a palette
Edit this page on GitHub.