Brown + Gold

Gradient variants

Eight CSS specimens using both anchors. Each CSS Forge link keeps the same from and to values pre-filled.

linear-gradient(90deg, #8B4513, #FFD700)

bg-linear-to-r from-[#8B4513] to-[#FFD700]

linear-gradient(45deg, #8B4513, #FFD700)

bg-linear-45 from-[#8B4513] to-[#FFD700]

linear-gradient(180deg, #8B4513, #FFD700)

bg-linear-to-b from-[#8B4513] to-[#FFD700]

radial-gradient(circle at center, #8B4513, #FFD700)

bg-radial from-[#8B4513] to-[#FFD700]

conic-gradient(from 90deg, #8B4513, #FFD700, #8B4513)

bg-conic from-[#8B4513] via-[#FFD700] to-[#8B4513]

linear-gradient(90deg, #8B4513, #546678, #FFD700)

bg-linear-to-r from-[#8B4513] via-[#546678] to-[#FFD700]

linear-gradient(90deg, #552A0C, #FFE452)

bg-linear-to-r from-[#552A0C] to-[#FFE452]

radial-gradient(circle at 20% 25%, #8B4513, transparent 34%), radial-gradient(circle at 80% 30%, #C1FF00, transparent 32%), linear-gradient(135deg, #546678, #FFD700)

bg-[radial-gradient(circle_at_20%_25%,#8B4513,transparent_34%),linear-gradient(135deg,#546678,#FFD700)]

Five-color palette

Generated reference notes

A Brown and Gold palette reads as analogous, which makes it useful for pages that need a recognizable mood without becoming decorative first. Because the pair carries strong chroma, it should be handled as a system rather than two isolated swatches. Put the more legible anchor behind small UI details, and keep large text on neutral backgrounds. If the design needs a gradient, the direct transition works well for headers, cards, and data fills; if it needs a calmer surface, add a neutral midpoint between the colors. This combination can support dashboards, brand explorations, documentation pages, and seasonal editorial work. The safest implementation uses the two anchors as accents, a dark neutral for text, and a light neutral for reading surfaces. For repeated components, reserve the stronger anchor for state changes and let the quieter anchor carry grouping or section rhythm. Save the direct gradient for moments where the transition itself communicates continuity.