Offera

💖 296 likes

Created Mar 5, 2019

5 colors

Color Palette Overview

00ABC1

F9FAFC

627684

1A425D

21B96D

Colors and Tints/Shades

10% Lighter	5% Lighter	Original Color	5% Darker	10% Darker
#00d8f5 Tint -10%	#00c2db Tint -5%	00ABC1 Original	#0095a8 Shade +5%	#007e8f Shade +10%
#ffffff Tint -10%	#ffffff Tint -5%	F9FAFC Original	#e7ebf3 Shade +5%	#d6ddea Shade +10%
#7b8f9d Tint -10%	#6c8393 Tint -5%	627684 Original	#576975 Shade +5%	#4c5b67 Shade +10%
#255e83 Tint -10%	#1f4f6f Tint -5%	1A425D Original	#143348 Shade +5%	#0f2534 Shade +10%
#33db87 Tint -10%	#25d07a Tint -5%	21B96D Original	#1da561 Shade +5%	#198f54 Shade +10%

Complete Color Information

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

HEX	RGB	CMYK	Name
00ABC1	RGB(0, 171, 193)	CMYK(100, 11, 0, 24)	Cyan
F9FAFC	RGB(249, 250, 252)	CMYK(1, 1, 0, 1)	White
627684	RGB(98, 118, 132)	CMYK(26, 11, 0, 48)	Gray
1A425D	RGB(26, 66, 93)	CMYK(72, 29, 0, 64)	Blue
21B96D	RGB(33, 185, 109)	CMYK(82, 0, 41, 27)	Green

Print Design Considerations

CMYK values for professional printing

00ABC1

C:100 M:11 Y:0 K:24

F9FAFC

C:1 M:1 Y:0 K:1

627684

C:26 M:11 Y:0 K:48

1A425D

C:72 M:29 Y:0 K:64

21B96D

C:82 M:0 Y:41 K:27

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: 00ABC1;
  --color-2: F9FAFC;
  --color-3: 627684;
  --color-4: 1A425D;
  --color-5: 21B96D;
}

Text & Button Examples

See how text and buttons look on each color background

Cyan 00ABC1

Heading Level 1

Heading Level 2

Heading Level 3

This is regular paragraph text on the Cyan background. The text color automatically adjusts to light 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 dark, so light text provides optimal contrast for readability.

White F9FAFC

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.

Gray 627684

Heading Level 1

Heading Level 2

Heading Level 3

This is regular paragraph text on the Gray background. The text color automatically adjusts to light 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 dark, so light text provides optimal contrast for readability.

Blue 1A425D

Heading Level 1

Heading Level 2

Heading Level 3

This is regular paragraph text on the Blue background. The text color automatically adjusts to light 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 dark, so light text provides optimal contrast for readability.

Green 21B96D

Heading Level 1

Heading Level 2

Heading Level 3

This is regular paragraph text on the Green 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

Offera

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:)