Vincentius

💖 0 likes

Created Feb 26, 2024

5 colors

Color Palette Overview

0397D5

5bcdfd

d54103

FD8B5B

Colors and Tints/Shades

10% Lighter	5% Lighter	Original Color	5% Darker	10% Darker
#0eb4fb Tint -10%	#04a6ec Tint -5%	0397D5 Original	#0383ba Shade +5%	#0271a1 Shade +10%
#8bdbfe Tint -10%	#72d4fe Tint -5%	5bcdfd Original	#3fc4fd Shade +5%	#26bcfd Shade +10%
#fb550e Tint -10%	#ec4904 Tint -5%	d54103 Original	#ba3a03 Shade +5%	#a13202 Shade +10%
#fead8b Tint -10%	#fe9c72 Tint -5%	FD8B5B Original	#fd783f Shade +5%	#fd6626 Shade +10%
#fead8b Tint -10%	#fe9c72 Tint -5%	FD8B5B Original	#fd783f Shade +5%	#fd6626 Shade +10%

Complete Color Information

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

HEX	RGB	CMYK	Name
0397D5	RGB(3, 151, 213)	CMYK(99, 29, 0, 16)	Cyan
5bcdfd	RGB(91, 205, 253)	CMYK(64, 19, 0, 1)	Cyan
d54103	RGB(213, 65, 3)	CMYK(0, 69, 99, 16)	Orange
FD8B5B	RGB(253, 139, 91)	CMYK(0, 45, 64, 1)	Orange
FD8B5B	RGB(253, 139, 91)	CMYK(0, 45, 64, 1)	Orange

Print Design Considerations

CMYK values for professional printing

0397D5

C:99 M:29 Y:0 K:16

5bcdfd

C:64 M:19 Y:0 K:1

d54103

C:0 M:69 Y:99 K:16

FD8B5B

C:0 M:45 Y:64 K:1

FD8B5B

C:0 M:45 Y:64 K:1

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: 0397D5;
  --color-2: 5bcdfd;
  --color-3: d54103;
  --color-4: FD8B5B;
  --color-5: FD8B5B;
}

Text & Button Examples

See how text and buttons look on each color background

Cyan 0397D5

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.

Cyan 5bcdfd

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.

Orange d54103

Heading Level 1

Heading Level 2

Heading Level 3

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

Orange FD8B5B

Heading Level 1

Heading Level 2

Heading Level 3

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

Orange FD8B5B

Heading Level 1

Heading Level 2

Heading Level 3

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

Vincentius

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