IMZ final Complementary

💖 0 likes

Created Feb 11, 2024

13 colors

Color Palette Overview

258df9

718388

545f63

3d4547

313739

252a2c

0e1010

f4f6fa

e3e8f1

d2dbe9

7ba6ff

2374f8

5068a2

Colors and Tints/Shades

10% Lighter	5% Lighter	Original Color	5% Darker	10% Darker
#56a6fb Tint -10%	#3d98fa Tint -5%	258df9 Original	#0b7ef9 Shade +5%	#0672e5 Shade +10%
#8d9ca0 Tint -10%	#7f9094 Tint -5%	718388 Original	#66767a Shade +5%	#5a696c Shade +10%
#6c7a7f Tint -10%	#606c71 Tint -5%	545f63 Original	#495255 Shade +5%	#3d4548 Shade +10%
#546063 Tint -10%	#495355 Tint -5%	3d4547 Original	#31383a Shade +5%	#262b2c Shade +10%
#495255 Tint -10%	#3d4548 Tint -5%	313739 Original	#262a2c Shade +5%	#1a1d1e Shade +10%
#3c4548 Tint -10%	#31383a Tint -5%	252a2c Original	#1a1d1f Shade +5%	#0e1011 Shade +10%
#262c2c Tint -10%	#1a1e1e Tint -5%	0e1010 Original	#020303 Shade +5%	#000000 Shade +10%
#ffffff Tint -10%	#ffffff Tint -5%	f4f6fa Original	#e3e8f2 Shade +5%	#d2daea Shade +10%
#ffffff Tint -10%	#f5f7fa Tint -5%	e3e8f1 Original	#d3dbe9 Shade +5%	#c2cde0 Shade +10%
#f5f7fa Tint -10%	#e4e9f2 Tint -5%	d2dbe9 Original	#c1cde1 Shade +5%	#b0c0d8 Shade +10%
#adc9ff Tint -10%	#94b8ff Tint -5%	7ba6ff Original	#6196ff Shade +5%	#4785ff Shade +10%
#5292fa Tint -10%	#3983f9 Tint -5%	2374f8 Original	#0864f7 Shade +5%	#075adf Shade +10%
#6c82b7 Tint -10%	#5b74ae Tint -5%	5068a2 Original	#475d90 Shade +5%	#3e527e Shade +10%

Complete Color Information

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

HEX	RGB	CMYK	Name
258df9	RGB(37, 141, 249)	CMYK(85, 43, 0, 2)	Blue
718388	RGB(113, 131, 136)	CMYK(17, 4, 0, 47)	Gray
545f63	RGB(84, 95, 99)	CMYK(15, 4, 0, 61)	Gray
3d4547	RGB(61, 69, 71)	CMYK(14, 3, 0, 72)	Gray
313739	RGB(49, 55, 57)	CMYK(14, 4, 0, 78)	Gray
252a2c	RGB(37, 42, 44)	CMYK(16, 5, 0, 83)	Black
0e1010	RGB(14, 16, 16)	CMYK(13, 0, 0, 94)	Black
f4f6fa	RGB(244, 246, 250)	CMYK(2, 2, 0, 2)	White
e3e8f1	RGB(227, 232, 241)	CMYK(6, 4, 0, 5)	White
d2dbe9	RGB(210, 219, 233)	CMYK(10, 6, 0, 9)	Black
7ba6ff	RGB(123, 166, 255)	CMYK(52, 35, 0, 0)	Blue
2374f8	RGB(35, 116, 248)	CMYK(86, 53, 0, 3)	Blue
5068a2	RGB(80, 104, 162)	CMYK(51, 36, 0, 36)	Black

Print Design Considerations

CMYK values for professional printing

258df9

C:85 M:43 Y:0 K:2

718388

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

545f63

C:15 M:4 Y:0 K:61

3d4547

C:14 M:3 Y:0 K:72

313739

C:14 M:4 Y:0 K:78

252a2c

C:16 M:5 Y:0 K:83

0e1010

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

f4f6fa

C:2 M:2 Y:0 K:2

e3e8f1

C:6 M:4 Y:0 K:5

d2dbe9

C:10 M:6 Y:0 K:9

7ba6ff

C:52 M:35 Y:0 K:0

2374f8

C:86 M:53 Y:0 K:3

5068a2

C:51 M:36 Y:0 K:36

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: 258df9;
  --color-2: 718388;
  --color-3: 545f63;
  --color-4: 3d4547;
  --color-5: 313739;
  --color-6: 252a2c;
  --color-7: 0e1010;
  --color-8: f4f6fa;
  --color-9: e3e8f1;
  --color-10: d2dbe9;
  --color-11: 7ba6ff;
  --color-12: 2374f8;
  --color-13: 5068a2;
}

Text & Button Examples

See how text and buttons look on each color background

Blue 258df9

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.

Gray 718388

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.

Gray 545f63

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.

Gray 3d4547

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.

Gray 313739

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 252a2c

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.

Black 0e1010

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.

White f4f6fa

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 e3e8f1

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.

Black d2dbe9

Heading Level 1

Heading Level 2

Heading Level 3

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

Blue 7ba6ff

Heading Level 1

Heading Level 2

Heading Level 3

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

Blue 2374f8

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.

Black 5068a2

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.

Related Color Schemes

Discover more beautiful color combinations

IMZ final Complementary

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

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