ABCDE

💖 2,342 likes

Created Apr 22, 2020

5 colors

Color Palette Overview

AAAAAA

BBBBBB

CCCCCC

DDDDDD

EEEEEE

Colors and Tints/Shades

10% Lighter	5% Lighter	Original Color	5% Darker	10% Darker
#c4c4c4 Tint -10%	#b8b8b8 Tint -5%	AAAAAA Original	#9e9e9e Shade +5%	#919191 Shade +10%
#d4d4d4 Tint -10%	#c7c7c7 Tint -5%	BBBBBB Original	#adadad Shade +5%	#a1a1a1 Shade +10%
#e6e6e6 Tint -10%	#d9d9d9 Tint -5%	CCCCCC Original	#bfbfbf Shade +5%	#b3b3b3 Shade +10%
#f7f7f7 Tint -10%	#ebebeb Tint -5%	DDDDDD Original	#d1d1d1 Shade +5%	#c4c4c4 Shade +10%
#ffffff Tint -10%	#fafafa Tint -5%	EEEEEE Original	#e0e0e0 Shade +5%	#d4d4d4 Shade +10%

Complete Color Information

Professional color data with RGB and CMYK values for all design applications.

HEX	RGB	CMYK	Name
AAAAAA	RGB(170, 170, 170)	CMYK(0, 0, 0, 33)	Gray
BBBBBB	RGB(187, 187, 187)	CMYK(0, 0, 0, 27)	Gray
CCCCCC	RGB(204, 204, 204)	CMYK(0, 0, 0, 20)	Gray
DDDDDD	RGB(221, 221, 221)	CMYK(0, 0, 0, 13)	Gray
EEEEEE	RGB(238, 238, 238)	CMYK(0, 0, 0, 7)	White

Print Design Considerations

CMYK values for professional printing

AAAAAA

C:0 M:0 Y:0 K:33

BBBBBB

C:0 M:0 Y:0 K:27

CCCCCC

C:0 M:0 Y:0 K:20

DDDDDD

C:0 M:0 Y:0 K:13

EEEEEE

C:0 M:0 Y:0 K:7

Usage Examples

See how this color scheme works in different design contexts and get inspiration for your projects.

CSS Variables

Use these CSS custom properties in your stylesheets

:root {
  --color-1: AAAAAA;
  --color-2: BBBBBB;
  --color-3: CCCCCC;
  --color-4: DDDDDD;
  --color-5: EEEEEE;
}

Text & Button Examples

See how text and buttons look on each color background

Gray AAAAAA

Heading Level 1

Heading Level 2

Heading Level 3

This is regular paragraph text on the Gray background. The text color automatically adjusts to dark for optimal readability and accessibility.

Small text and secondary information also maintains good contrast and readability.

Card Title

Card content with subtle background overlay for depth and hierarchy.

Alert Message

Important information displayed with accent border.

Accessibility: This color is detected as light, so dark text provides optimal contrast for readability.

Gray BBBBBB

Heading Level 1

Heading Level 2

Heading Level 3

This is regular paragraph text on the Gray background. The text color automatically adjusts to dark for optimal readability and accessibility.

Small text and secondary information also maintains good contrast and readability.

Card Title

Card content with subtle background overlay for depth and hierarchy.

Alert Message

Important information displayed with accent border.

Accessibility: This color is detected as light, so dark text provides optimal contrast for readability.

Gray CCCCCC

Heading Level 1

Heading Level 2

Heading Level 3

This is regular paragraph text on the Gray background. The text color automatically adjusts to dark for optimal readability and accessibility.

Small text and secondary information also maintains good contrast and readability.

Card Title

Card content with subtle background overlay for depth and hierarchy.

Alert Message

Important information displayed with accent border.

Accessibility: This color is detected as light, so dark text provides optimal contrast for readability.

Gray DDDDDD

Heading Level 1

Heading Level 2

Heading Level 3

This is regular paragraph text on the Gray background. The text color automatically adjusts to dark for optimal readability and accessibility.

Small text and secondary information also maintains good contrast and readability.

Card Title

Card content with subtle background overlay for depth and hierarchy.

Alert Message

Important information displayed with accent border.

Accessibility: This color is detected as light, so dark text provides optimal contrast for readability.

White EEEEEE

Heading Level 1

Heading Level 2

Heading Level 3

This is regular paragraph text on the White background. The text color automatically adjusts to dark for optimal readability and accessibility.

Small text and secondary information also maintains good contrast and readability.

Card Title

Card content with subtle background overlay for depth and hierarchy.

Alert Message

Important information displayed with accent border.

Accessibility: This color is detected as light, so dark text provides optimal contrast for readability.

Related Color Schemes

Discover more beautiful color combinations

ABCDE

Color Palette Overview

Colors and Tints/Shades

Complete Color Information

Print Design Considerations

Usage Examples

CSS Variables

Text & Button Examples

Heading Level 1

Heading Level 2

Heading Level 3

Card Title

Alert Message

Heading Level 1

Heading Level 2

Heading Level 3

Card Title

Alert Message

Heading Level 1

Heading Level 2

Heading Level 3

Card Title

Alert Message

Heading Level 1

Heading Level 2

Heading Level 3

Card Title

Alert Message

Heading Level 1

Heading Level 2

Heading Level 3

Card Title

Alert Message

Related Color Schemes

night sky!!!!

Midnight Calm

Pastel rainbow

my favorite colors:)