#hexpedia

Named color category

Warm Colors

Warm colors include reds, oranges, yellows, and related browns that visually move forward in a composition.

Indexed warm hex colors

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

Tailwind Orange 500#F97316Orange#F97306Material Orange 800#EF6C00Reference #FF8020#FF8020Material Amber 900#FF6F00Pumpkin Orange#FB7D07GitLab GitLab Orange#FC6D26Material Orange 700#F57C00Material Yellow 900#F57F17Reference #E06000#E06000Reference #FF8000#FF8000Cloudflare Cloudflare Light Orange#F6821FCloudflare Cloudflare Orange#F38020Tailwind Orange 600#EA580CReference #FF6000#FF6000Pumpkin#E17701Reference #FF6020#FF6020Material Orange 900#E65100Firefox Firefox Orange#FF7139Reference #E06020#E06020Reference #FF8040#FF8040Bright Orange#FF5B00Deep Orange#DC4D01Dark Orange#FF8C00Material Orange 600#FB8C00Rusty Orange#CD5909Tailwind Amber 600#D97706Material Amber 800#FF8F00Dusty Orange#F0833AMaterial Deep Orange 500#FF5722
Material Deep Orange 600#F4511EChocolate#D2691EReference #E08000#E08000Reference #E08020#E08020Tailwind Orange 400#FB923CDark Orange#C65102Material Deep Orange 400#FF7043Figma Red#F24E1EMicrosoft Microsoft Red#F25022Material Deep Orange 700#E64A19Browny Orange#CA6B02Tangerine#FF9408Orangish#FC824AOrangeish#FD8D49Rust Orange#C45508Reference #E04000#E04000Firefox Firefox Yellow#FF9500Burnt Orange#C04E01Blood Orange#FE4B03Reference #C06000#C06000Material Deep Orange 800#D84315Reference #FF5733#FF5733Reddish Orange#F8481CBrick Orange#C14A09Reference Coral#FF7F50Material Orange 500#FF9800AWS AWS Orange#FF9900Pastel Orange#FF964FOrange Brown#BE6400Pinkish Orange#FF724C

Light Warm

Tailwind Orange 500#F97316Orange#F97306Material Orange 800#EF6C00Reference #FF8020#FF8020Material Amber 900#FF6F00Pumpkin Orange#FB7D07GitLab GitLab Orange#FC6D26Material Orange 700#F57C00Material Yellow 900#F57F17Reference #E06000#E06000Reference #FF8000#FF8000Cloudflare Cloudflare Light Orange#F6821F

Dark Warm

Tailwind Orange 500#F97316Orange#F97306Material Orange 800#EF6C00Reference #FF8020#FF8020Material Amber 900#FF6F00Pumpkin Orange#FB7D07GitLab GitLab Orange#FC6D26Material Orange 700#F57C00Material Yellow 900#F57F17Reference #E06000#E06000Reference #FF8000#FF8000Cloudflare Cloudflare Light Orange#F6821F

Muted Warm

Tailwind Orange 500#F97316Orange#F97306Material Orange 800#EF6C00Reference #FF8020#FF8020Material Amber 900#FF6F00Pumpkin Orange#FB7D07GitLab GitLab Orange#FC6D26Material Orange 700#F57C00Material Yellow 900#F57F17Reference #E06000#E06000Reference #FF8000#FF8000Cloudflare Cloudflare Light Orange#F6821F

Vibrant Warm

Tailwind Orange 500#F97316Orange#F97306Material Orange 800#EF6C00Reference #FF8020#FF8020Material Amber 900#FF6F00Pumpkin Orange#FB7D07GitLab GitLab Orange#FC6D26Material Orange 700#F57C00Material Yellow 900#F57F17Reference #E06000#E06000Reference #FF8000#FF8000Cloudflare Cloudflare Light Orange#F6821F

How designers use warm

Warm 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, warm 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 warm value behind body text, because perceived brightness can shift quickly across adjacent hues.

Combinations with warm

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

Amber + Orange#FFBF00#FFA500Beige + Orange#F5F5DC#FFA500Black + Orange#000000#FFA500Blue + Orange#0000FF#FFA500Brown + Orange#8B4513#FFA500Cyan + Orange#00FFFF#FFA500Gold + Orange#FFD700#FFA500Gray + Orange#808080#FFA500

Build with warm in CSS Forge

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

Build a warm gradientTint a shadow