Color Palettes
Copy and paste Color Palettes into Webflow and create color systems in seconds. Sourced from Untitled UI.
Neutrals
Neutrals are the foundation of the color system. Almost everything in UI design — text, form fields, backgrounds, dividers — use Neutral colors.

Color Sample
Gray
color-samples/rl-styleguide_color-sample-gray
color-samples/rl-styleguide_color-sample-gray

Color Sample
Gray Blue
color-samples/rl-styleguide_color-sample-grayblue
color-samples/rl-styleguide_color-sample-grayblue

Color Sample
Gray Cool
color-samples/rl-styleguide_color-sample-graycool
color-samples/rl-styleguide_color-sample-graycool

Color Sample
Gray Modern
color-samples/rl-styleguide_color-sample-graymodern
color-samples/rl-styleguide_color-sample-graymodern

Color Sample
Gray Neutral
color-samples/rl-styleguide_color-sample-grayneutral
color-samples/rl-styleguide_color-sample-grayneutral

Color Sample
Gray Iron
color-samples/rl-styleguide_color-sample-grayiron
color-samples/rl-styleguide_color-sample-grayiron

Color Sample
Gray True
color-samples/rl-styleguide_color-sample-graytrue
color-samples/rl-styleguide_color-sample-graytrue

Color Sample
Gray Warm
color-samples/rl-styleguide_color-sample-graywarm
color-samples/rl-styleguide_color-sample-graywarm
Primary, Secondary & Accent Colors
Primary colors are the main colors that make up the majority of the colors used in the design system. Secondary and Accent colors are used sparingly in components such as pills, alerts and labels.

Color Sample
Moss
color-samples/rl-styleguide_color-sample-moss
color-samples/rl-styleguide_color-sample-moss

Color Sample
Green Light
color-samples/rl-styleguide_color-sample-greenlight
color-samples/rl-styleguide_color-sample-greenlight

Color Sample
Green
color-samples/rl-styleguide_color-sample-green
color-samples/rl-styleguide_color-sample-green

Color Sample
Green True
color-samples/rl-styleguide_color-sample-greentrue
color-samples/rl-styleguide_color-sample-greentrue

Color Sample
Teal
color-samples/rl-styleguide_color-sample-teal
color-samples/rl-styleguide_color-sample-teal

Color Sample
Cyan
color-samples/rl-styleguide_color-sample-cyan
color-samples/rl-styleguide_color-sample-cyan

Color Sample
Blue Light
color-samples/rl-styleguide_color-sample-bluelight
color-samples/rl-styleguide_color-sample-bluelight

Color Sample
Blue
color-samples/rl-styleguide_color-sample-blue
color-samples/rl-styleguide_color-sample-blue

Color Sample
Blue Dark
color-samples/rl-styleguide_color-sample-bluebluedark
color-samples/rl-styleguide_color-sample-bluebluedark

Color Sample
Indigo
color-samples/rl-styleguide_color-sample-indigo
color-samples/rl-styleguide_color-sample-indigo

Color Sample
Purple
color-samples/rl-styleguide_color-sample-purple
color-samples/rl-styleguide_color-sample-purple

Color Sample
Violet
color-samples/rl-styleguide_color-sample-violet
color-samples/rl-styleguide_color-sample-violet

Color Sample
Purple True
color-samples/rl-styleguide_color-sample-purpletrue
color-samples/rl-styleguide_color-sample-purpletrue

Color Sample
Fuchsia
color-samples/rl-styleguide_color-sample-fuchsia
color-samples/rl-styleguide_color-sample-fuchsia

Color Sample
Pink
color-samples/rl-styleguide_color-sample-pink
color-samples/rl-styleguide_color-sample-pink

Color Sample
Rosé
color-samples/rl-styleguide_color-sample-rose
color-samples/rl-styleguide_color-sample-rose

Color Sample
Red
color-samples/rl-styleguide_color-sample-red
color-samples/rl-styleguide_color-sample-red

Color Sample
Orange Dark
color-samples/rl-styleguide_color-sample-orangedark
color-samples/rl-styleguide_color-sample-orangedark

Color Sample
Orange
color-samples/rl-styleguide_color-sample-orange
color-samples/rl-styleguide_color-sample-orange

Color Sample
Yellow Dark
color-samples/rl-styleguide_color-sample-yellowdark
color-samples/rl-styleguide_color-sample-yellowdark

Color Sample
Yellow
color-samples/rl-styleguide_color-sample-yellow
color-samples/rl-styleguide_color-sample-yellow
Semantic Colors
Semantic colors are used to communicate standard value states (such as error, success, or warning).

Color Sample
Green Light
color-samples/rl-styleguide_color-sample-greenlight
color-samples/rl-styleguide_color-sample-greenlight

Color Sample
Green
color-samples/rl-styleguide_color-sample-green
color-samples/rl-styleguide_color-sample-green

Color Sample
Green True
color-samples/rl-styleguide_color-sample-greentrue
color-samples/rl-styleguide_color-sample-greentrue

Color Sample
Red
color-samples/rl-styleguide_color-sample-red
color-samples/rl-styleguide_color-sample-red

Color Sample
Yellow Dark
color-samples/rl-styleguide_color-sample-yellowdark
color-samples/rl-styleguide_color-sample-yellowdark

Color Sample
Yellow
color-samples/rl-styleguide_color-sample-yellow
color-samples/rl-styleguide_color-sample-yellow
Neutrals
Neutrals are the foundation of the color system. Almost everything in UI design — text, form fields, backgrounds, dividers — use Neutral colors.

Background Color
Gray
background-colors/rl-styleguide_background-color-gray
background-colors/rl-styleguide_background-color-gray

Background Color
Gray Blue
background-colors/rl-styleguide_background-color-grayblue
background-colors/rl-styleguide_background-color-grayblue

Background Color
Gray Cool
background-colors/rl-styleguide_background-color-graycool
background-colors/rl-styleguide_background-color-graycool

Background Color
Gray Modern
background-colors/rl-styleguide_background-color-graymodern
background-colors/rl-styleguide_background-color-graymodern

Background Color
Gray Neutral
background-colors/rl-styleguide_background-color-grayneutral
background-colors/rl-styleguide_background-color-grayneutral

Background Color
Gray Iron
background-colors/rl-styleguide_background-color-grayiron
background-colors/rl-styleguide_background-color-grayiron

Background Color
Gray True
background-colors/rl-styleguide_background-color-graytrue
background-colors/rl-styleguide_background-color-graytrue

Background Color
Gray Warm
background-colors/rl-styleguide_background-color-graywarm
background-colors/rl-styleguide_background-color-graywarm
Primary, Secondary & Accent Colors
Primary colors are the main colors that make up the majority of the colors used in the design system. Secondary and Accent colors are used sparingly in components such as pills, alerts and labels.

Background Color
Moss
background-colors/rl-styleguide_background-color-moss
background-colors/rl-styleguide_background-color-moss

Background Color
Green Light
background-colors/rl-styleguide_background-color-greenlight
background-colors/rl-styleguide_background-color-greenlight

Background Color
Green
background-colors/rl-styleguide_background-color-green
background-colors/rl-styleguide_background-color-green

Background Color
Green True
background-colors/rl-styleguide_background-color-greentrue
background-colors/rl-styleguide_background-color-greentrue

Background Color
Teal
background-colors/rl-styleguide_background-color-teal
background-colors/rl-styleguide_background-color-teal

Background Color
Cyan
background-colors/rl-styleguide_background-color-cyan
background-colors/rl-styleguide_background-color-cyan

Background Color
Blue Light
background-colors/rl-styleguide_background-color-bluelight
background-colors/rl-styleguide_background-color-bluelight

Background Color
Blue
background-colors/rl-styleguide_background-color-blue
background-colors/rl-styleguide_background-color-blue

Background Color
Blue Dark
background-colors/rl-styleguide_background-color-bluedark
background-colors/rl-styleguide_background-color-bluedark

Background Color
Indigo
background-colors/rl-styleguide_background-color-indigo
background-colors/rl-styleguide_background-color-indigo

Background Color
Purple
background-colors/rl-styleguide_background-color-purple
background-colors/rl-styleguide_background-color-purple

Background Color
Violet
background-colors/rl-styleguide_background-color-violet
background-colors/rl-styleguide_background-color-violet

Background Color
Purple True
background-colors/rl-styleguide_background-color-purpletrue
background-colors/rl-styleguide_background-color-purpletrue

Background Color
Fuchsia
background-colors/rl-styleguide_background-color-fuchsia
background-colors/rl-styleguide_background-color-fuchsia

Background Color
Pink
background-colors/rl-styleguide_background-color-pink
background-colors/rl-styleguide_background-color-pink

Background Color
Rosé
background-colors/rl-styleguide_background-color-rose
background-colors/rl-styleguide_background-color-rose

Background Color
Red
background-colors/rl-styleguide_background-color-red
background-colors/rl-styleguide_background-color-red

Background Color
Orange Dark
background-colors/rl-styleguide_background-color-orangedark
background-colors/rl-styleguide_background-color-orangedark

Background Color
Orange
background-colors/rl-styleguide_background-color-orange
background-colors/rl-styleguide_background-color-orange

Background Color
Yellow Dark
background-colors/rl-styleguide_background-color-yellowdark
background-colors/rl-styleguide_background-color-yellowdark

Background Color
Yellow
background-colors/rl-styleguide_background-color-yellow
background-colors/rl-styleguide_background-color-yellow
Semantic Colors
Semantic colors are used to communicate standard value states (such as error, success, or warning).

Background Color
Green Light
Semantic
background-colors/rl-styleguide_background-color-greenlight

Background Color
Green
Semantic
background-colors/rl-styleguide_background-color-green

Background Color
Green True
Semantic
background-colors/rl-styleguide_background-color-greentrue

Background Color
Red
Semantic
background-colors/rl-styleguide_background-color-red

Background Color
Yellow Dark
Semantic
background-colors/rl-styleguide_background-color-yellowdark

Background Color
Yellow
Semantic
background-colors/rl-styleguide_background-color-yellow
Neutrals
Neutrals are the foundation of the color system. Almost everything in UI design — text, form fields, backgrounds, dividers — use Neutral colors.

Gray
text-colors/rl-styleguide_text-color-gray
text-colors/rl-styleguide_text-color-gray

Gray Blue
text-colors/rl-styleguide_text-color-grayblue
text-colors/rl-styleguide_text-color-grayblue

Gray Cool
text-colors/rl-styleguide_text-color-graycool
text-colors/rl-styleguide_text-color-graycool

Gray Modern
text-colors/rl-styleguide_text-color-graymodern
text-colors/rl-styleguide_text-color-graymodern

Gray Neutral
text-colors/rl-styleguide_text-color-grayneutral
text-colors/rl-styleguide_text-color-grayneutral

Gray Iron
text-colors/rl-styleguide_text-color-grayiron
text-colors/rl-styleguide_text-color-grayiron

Gray True
text-colors/rl-styleguide_text-color-graytrue
text-colors/rl-styleguide_text-color-graytrue

Gray Warm
text-colors/rl-styleguide_text-color-graywarm
text-colors/rl-styleguide_text-color-graywarm
Primary, Secondary & Accent Colors
Primary colors are the main colors that make up the majority of the colors used in the design system. Secondary and Accent colors are used sparingly in components such as pills, alerts and labels.

Moss
text-colors/rl-styleguide_text-color-moss
text-colors/rl-styleguide_text-color-moss

Green Light
text-colors/rl-styleguide_text-color-greenlight
text-colors/rl-styleguide_text-color-greenlight

Green
text-colors/rl-styleguide_text-color-green
text-colors/rl-styleguide_text-color-green

Green True
text-colors/rl-styleguide_text-color-greentrue
text-colors/rl-styleguide_text-color-greentrue

Teal
text-colors/rl-styleguide_text-color-teal
text-colors/rl-styleguide_text-color-teal

Cyan
text-colors/rl-styleguide_text-color-cyan
text-colors/rl-styleguide_text-color-cyan

Blue Light
text-colors/rl-styleguide_text-color-bluelight
text-colors/rl-styleguide_text-color-bluelight

Blue
text-colors/rl-styleguide_text-color-blue
text-colors/rl-styleguide_text-color-blue

Blue Dark
text-colors/rl-styleguide_text-color-bluedark
text-colors/rl-styleguide_text-color-bluedark

Indigo
text-colors/rl-styleguide_text-color-indigo
text-colors/rl-styleguide_text-color-indigo

Purple
text-colors/rl-styleguide_text-color-purple
text-colors/rl-styleguide_text-color-purple

Violet
text-colors/rl-styleguide_text-color-violet
text-colors/rl-styleguide_text-color-violet

Purple True
text-colors/rl-styleguide_text-color-purpletrue
text-colors/rl-styleguide_text-color-purpletrue

Fuchsia
text-colors/rl-styleguide_text-color-fuchsia
text-colors/rl-styleguide_text-color-fuchsia

Pink
text-colors/rl-styleguide_text-color-pink
text-colors/rl-styleguide_text-color-pink

Rosé
text-colors/rl-styleguide_text-color-rose
text-colors/rl-styleguide_text-color-rose

Red
text-colors/rl-styleguide_text-color-red
text-colors/rl-styleguide_text-color-red

Orange Dark
text-colors/rl-styleguide_text-color-orangedark
text-colors/rl-styleguide_text-color-orangedark

Orange
text-colors/rl-styleguide_text-color-orange
text-colors/rl-styleguide_text-color-orange

Yellow Dark
text-colors/rl-styleguide_text-color-yellowdark
text-colors/rl-styleguide_text-color-yellowdark

Yellow
text-colors/rl-styleguide_text-color-yellow
text-colors/rl-styleguide_text-color-yellow
Semantic Colors
Semantic colors are used to communicate standard value states (such as error, success, or warning).

Green Light
text-colors/rl-styleguide_text-color-greenlight
text-colors/rl-styleguide_text-color-greenlight

Green
text-colors/rl-styleguide_text-color-green
text-colors/rl-styleguide_text-color-green

Green True
text-colors/rl-styleguide_text-color-greentrue
text-colors/rl-styleguide_text-color-greentrue

Red
text-colors/rl-styleguide_text-color-red
text-colors/rl-styleguide_text-color-red

Yellow Dark
text-colors/rl-styleguide_text-color-yellowdark
text-colors/rl-styleguide_text-color-yellowdark

Yellow
text-colors/rl-styleguide_text-color-yellow
text-colors/rl-styleguide_text-color-yellow