#hexpedia

Named color category

Vibrant Colors

Vibrant colors are saturated enough to stand out as accents, tags, chart marks, and interaction states.

Indexed vibrant hex colors

A reference grid selected from Hexpedia CSS, xkcd, Material, Tailwind, and generated static color datasets.

Reference #FF5733#FF5733Microsoft Microsoft Red#F25022Git Git Orange#F05032Reference #FF6040#FF6040Figma Red#F24E1EMaterial Deep Orange 600#F4511ETomato#EF4026Material Deep Orange 500#FF5722Orangey Red#FA4224Reddish Orange#F8481CMaterial Deep Orange 700#E64A19Material Red 500#F44336Reference #E04020#E04020Tomato#FF6347GitLab GitLab Red#E24329Orange Red#FD411EReference #FF6020#FF6020Reference #FF4020#FF4020Material Deep Orange 800#D84315Material Deep Orange 400#FF7043Firefox Firefox Orange#FF7139Reference #E04000#E04000Reference #FF4040#FF4040Tailwind Orange 600#EA580COrangered#FE420FGitLab GitLab Orange#FC6D26Vermillion#F4320CMaterial Orange 900#E65100Pinkish Orange#FF724CMaterial Red 600#E53935
Orangish Red#F43605Deep Orange#DC4D01Reference #E02020#E02020Blood Orange#FE4B03Tomato Red#EC2D01Coral#FC5A50Orange Pink#FF6F52Tailwind Red 600#DC2626Red Orange#FD3C06Reference #E02000#E02000Reference #E06020#E06020Reddit Reddit Orange#FF4500Bright Orange#FF5B00Tailwind Red 500#EF4444Reference #FF4000#FF4000Netflix Netflix Red#E50914Light Red#FF474CReference #FF2020#FF2020eBay eBay Red#E53238Reference #FF6000#FF6000Mastercard Mastercard Red#EB001BReference #E00020#E00020Pinterest Pinterest Red#E60023Melon#FF7855Grapefruit#FD5956Reference #E00000#E00000Reference #E06040#E06040Red#E50000Reference #C02000#C02000Material Deep Orange 900#BF360C

Light Vibrant

Reference #FF5733#FF5733Microsoft Microsoft Red#F25022Git Git Orange#F05032Reference #FF6040#FF6040Figma Red#F24E1EMaterial Deep Orange 600#F4511ETomato#EF4026Material Deep Orange 500#FF5722Orangey Red#FA4224Reddish Orange#F8481CMaterial Deep Orange 700#E64A19Material Red 500#F44336

Dark Vibrant

Reference #FF5733#FF5733Microsoft Microsoft Red#F25022Git Git Orange#F05032Reference #FF6040#FF6040Figma Red#F24E1EMaterial Deep Orange 600#F4511ETomato#EF4026Material Deep Orange 500#FF5722Orangey Red#FA4224Reddish Orange#F8481CMaterial Deep Orange 700#E64A19Material Red 500#F44336

Muted Vibrant

Reference #FF5733#FF5733Microsoft Microsoft Red#F25022Git Git Orange#F05032Reference #FF6040#FF6040Figma Red#F24E1EMaterial Deep Orange 600#F4511ETomato#EF4026Material Deep Orange 500#FF5722Orangey Red#FA4224Reddish Orange#F8481CMaterial Deep Orange 700#E64A19Material Red 500#F44336

Vibrant Vibrant

Reference #FF5733#FF5733Microsoft Microsoft Red#F25022Git Git Orange#F05032Reference #FF6040#FF6040Figma Red#F24E1EMaterial Deep Orange 600#F4511ETomato#EF4026Material Deep Orange 500#FF5722Orangey Red#FA4224Reddish Orange#F8481CMaterial Deep Orange 700#E64A19Material Red 500#F44336

How designers use vibrant

Vibrant colors are most useful when they are treated as a family rather than a single swatch. Start with the central values for accents, then use lighter versions for surfaces and darker versions for text, borders, or active states. In product interfaces, vibrant can guide attention, but it should not carry meaning alone; pair it with labels, spacing, and predictable hierarchy. For editorial pages, this family can create a recognizable mood while still leaving room for neutral backgrounds. Always test contrast before using any vibrant value behind body text, because perceived brightness can shift quickly across adjacent hues.

Combinations with vibrant

Palette pages use Red as the nearest stable anchor for this color family.

Amber + Red#FFBF00#FF0000Beige + Red#F5F5DC#FF0000Black + Red#000000#FF0000Blue + Red#0000FF#FF0000Brown + Red#8B4513#FF0000Cyan + Red#00FFFF#FF0000Gold + Red#FFD700#FF0000Gray + Red#808080#FF0000

Build with vibrant in CSS Forge

Move from reference values into practical CSS experiments with pre-filled generator links.

Build a vibrant gradientTint a shadow