Rianbbeoow

💖 335 likes

Created Jun 4, 2020

12 colors

Color Palette Overview

Ff0000

ff00ff

8000ff

0000ff

0080ff

00ffff

00ff80

00ff00

80FF00

FFFF00

ff8000

ff0080

Colors and Tints/Shades

10% Lighter	5% Lighter	Original Color	5% Darker	10% Darker
#ff3333 Tint -10%	#ff1a1a Tint -5%	Ff0000 Original	#e60000 Shade +5%	#cc0000 Shade +10%
#ff33ff Tint -10%	#ff1aff Tint -5%	ff00ff Original	#e600e6 Shade +5%	#cc00cc Shade +10%
#9933ff Tint -10%	#8c1aff Tint -5%	8000ff Original	#7300e6 Shade +5%	#6600cc Shade +10%
#3333ff Tint -10%	#1a1aff Tint -5%	0000ff Original	#0000e6 Shade +5%	#0000cc Shade +10%
#3399ff Tint -10%	#1a8cff Tint -5%	0080ff Original	#0073e6 Shade +5%	#0066cc Shade +10%
#33ffff Tint -10%	#1affff Tint -5%	00ffff Original	#00e6e6 Shade +5%	#00cccc Shade +10%
#33ff99 Tint -10%	#1aff8c Tint -5%	00ff80 Original	#00e673 Shade +5%	#00cc66 Shade +10%
#33ff33 Tint -10%	#1aff1a Tint -5%	00ff00 Original	#00e600 Shade +5%	#00cc00 Shade +10%
#99ff33 Tint -10%	#8cff1a Tint -5%	80FF00 Original	#73e600 Shade +5%	#66cc00 Shade +10%
#ffff33 Tint -10%	#ffff1a Tint -5%	FFFF00 Original	#e6e600 Shade +5%	#cccc00 Shade +10%
#ff9933 Tint -10%	#ff8c1a Tint -5%	ff8000 Original	#e67300 Shade +5%	#cc6600 Shade +10%
#ff3399 Tint -10%	#ff1a8c Tint -5%	ff0080 Original	#e60073 Shade +5%	#cc0066 Shade +10%

Complete Color Information

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

HEX	RGB	CMYK	Name
Ff0000	RGB(255, 0, 0)	CMYK(0, 100, 100, 0)	Red
ff00ff	RGB(255, 0, 255)	CMYK(0, 100, 0, 0)	Purple
8000ff	RGB(128, 0, 255)	CMYK(50, 100, 0, 0)	Blue
0000ff	RGB(0, 0, 255)	CMYK(100, 100, 0, 0)	Blue
0080ff	RGB(0, 128, 255)	CMYK(100, 50, 0, 0)	Blue
00ffff	RGB(0, 255, 255)	CMYK(100, 0, 0, 0)	Cyan
00ff80	RGB(0, 255, 128)	CMYK(100, 0, 50, 0)	Green
00ff00	RGB(0, 255, 0)	CMYK(100, 0, 100, 0)	green
80FF00	RGB(128, 255, 0)	CMYK(50, 0, 100, 0)	Green
FFFF00	RGB(255, 255, 0)	CMYK(0, 0, 100, 0)	Yellow
ff8000	RGB(255, 128, 0)	CMYK(0, 50, 100, 0)	Orange
ff0080	RGB(255, 0, 128)	CMYK(0, 100, 50, 0)	Purple

Print Design Considerations

CMYK values for professional printing

Ff0000

C:0 M:100 Y:100 K:0

ff00ff

C:0 M:100 Y:0 K:0

8000ff

C:50 M:100 Y:0 K:0

0000ff

C:100 M:100 Y:0 K:0

0080ff

C:100 M:50 Y:0 K:0

00ffff

C:100 M:0 Y:0 K:0

00ff80

C:100 M:0 Y:50 K:0

00ff00

C:100 M:0 Y:100 K:0

80FF00

C:50 M:0 Y:100 K:0

FFFF00

C:0 M:0 Y:100 K:0

ff8000

C:0 M:50 Y:100 K:0

ff0080

C:0 M:100 Y:50 K:0

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: Ff0000;
  --color-2: ff00ff;
  --color-3: 8000ff;
  --color-4: 0000ff;
  --color-5: 0080ff;
  --color-6: 00ffff;
  --color-7: 00ff80;
  --color-8: 00ff00;
  --color-9: 80FF00;
  --color-10: FFFF00;
  --color-11: ff8000;
  --color-12: ff0080;
}

Text & Button Examples

See how text and buttons look on each color background

Red Ff0000

Heading Level 1

Heading Level 2

Heading Level 3

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

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.

Blue 8000ff

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.

Blue 0000ff

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.

Blue 0080ff

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.

Cyan 00ffff

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.

Green 00ff80

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.

green 00ff00

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.

Green 80FF00

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.

Yellow FFFF00

Heading Level 1

Heading Level 2

Heading Level 3

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

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.

Purple ff0080

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.

Related Color Schemes

Discover more beautiful color combinations

Rianbbeoow

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

Related Color Schemes

night sky!!!!

Midnight Calm

Pastel rainbow

my favorite colors:)