Crystal

💖 638 likes

Created Sep 28, 2018

10 colors

Color Palette Overview

1C6F71

F5F5F5

F2FCFA

CCF5EB

96F3DD

707070

252A32

84329B

00CE9B

C0023E

Colors and Tints/Shades

10% Lighter	5% Lighter	Original Color	5% Darker	10% Darker
#27999b Tint -10%	#228587 Tint -5%	1C6F71 Original	#175d5e Shade +5%	#124949 Shade +10%
#ffffff Tint -10%	#ffffff Tint -5%	F5F5F5 Original	#e8e8e8 Shade +5%	#dbdbdb Shade +10%
#ffffff Tint -10%	#ffffff Tint -5%	F2FCFA Original	#def7f2 Shade +5%	#c9f3ea Shade +10%
#f6fdfc Tint -10%	#e1f9f3 Tint -5%	CCF5EB Original	#b7f1e2 Shade +5%	#a1ecda Shade +10%
#c4f8ec Tint -10%	#adf5e4 Tint -5%	96F3DD Original	#7ff0d6 Shade +5%	#68edce Shade +10%
#8a8a8a Tint -10%	#7d7d7d Tint -5%	707070 Original	#636363 Shade +5%	#575757 Shade +10%
#3b424f Tint -10%	#303641 Tint -5%	252A32 Original	#1a1e23 Shade +5%	#0f1115 Shade +10%
#a43ec1 Tint -10%	#9438ad Tint -5%	84329B Original	#732c87 Shade +5%	#632574 Shade +10%
#00ffbf Tint -10%	#00e6ac Tint -5%	00CE9B Original	#00b386 Shade +5%	#009973 Shade +10%
#f2024e Tint -10%	#d90246 Tint -5%	C0023E Original	#a70236 Shade +5%	#8d012e Shade +10%

Complete Color Information

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

HEX	RGB	CMYK	Name
1C6F71	RGB(28, 111, 113)	CMYK(75, 2, 0, 56)	Cyan
F5F5F5	RGB(245, 245, 245)	CMYK(0, 0, 0, 4)	White
F2FCFA	RGB(242, 252, 250)	CMYK(4, 0, 1, 1)	White
CCF5EB	RGB(204, 245, 235)	CMYK(17, 0, 4, 4)	Cyan
96F3DD	RGB(150, 243, 221)	CMYK(38, 0, 9, 5)	Cyan
707070	RGB(112, 112, 112)	CMYK(0, 0, 0, 56)	Gray
252A32	RGB(37, 42, 50)	CMYK(26, 16, 0, 80)	Black
84329B	RGB(132, 50, 155)	CMYK(15, 68, 0, 39)	Purple
00CE9B	RGB(0, 206, 155)	CMYK(100, 0, 25, 19)	Cyan
C0023E	RGB(192, 2, 62)	CMYK(0, 99, 68, 25)	Pink

Print Design Considerations

CMYK values for professional printing

1C6F71

C:75 M:2 Y:0 K:56

F5F5F5

C:0 M:0 Y:0 K:4

F2FCFA

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

CCF5EB

C:17 M:0 Y:4 K:4

96F3DD

C:38 M:0 Y:9 K:5

707070

C:0 M:0 Y:0 K:56

252A32

C:26 M:16 Y:0 K:80

84329B

C:15 M:68 Y:0 K:39

00CE9B

C:100 M:0 Y:25 K:19

C0023E

C:0 M:99 Y:68 K:25

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: 1C6F71;
  --color-2: F5F5F5;
  --color-3: F2FCFA;
  --color-4: CCF5EB;
  --color-5: 96F3DD;
  --color-6: 707070;
  --color-7: 252A32;
  --color-8: 84329B;
  --color-9: 00CE9B;
  --color-10: C0023E;
}

Text & Button Examples

See how text and buttons look on each color background

Cyan 1C6F71

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 F5F5F5

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.

White F2FCFA

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.

Cyan CCF5EB

Heading Level 1

Heading Level 2

Heading Level 3

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

Cyan 96F3DD

Heading Level 1

Heading Level 2

Heading Level 3

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

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.

Black 252A32

Heading Level 1

Heading Level 2

Heading Level 3

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

Purple 84329B

Heading Level 1

Heading Level 2

Heading Level 3

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

Cyan 00CE9B

Heading Level 1

Heading Level 2

Heading Level 3

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

Pink C0023E

Heading Level 1

Heading Level 2

Heading Level 3

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

Related Color Schemes

Discover more beautiful color combinations

Crystal

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

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