Gold + Green

Gradient variants

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

linear-gradient(90deg, #FFD700, #008000)

bg-linear-to-r from-[#FFD700] to-[#008000]

linear-gradient(45deg, #FFD700, #008000)

bg-linear-45 from-[#FFD700] to-[#008000]

linear-gradient(180deg, #FFD700, #008000)

bg-linear-to-b from-[#FFD700] to-[#008000]

radial-gradient(circle at center, #FFD700, #008000)

bg-radial from-[#FFD700] to-[#008000]

conic-gradient(from 90deg, #FFD700, #008000, #FFD700)

bg-conic from-[#FFD700] via-[#008000] to-[#FFD700]

linear-gradient(90deg, #FFD700, #4F6172, #008000)

bg-linear-to-r from-[#FFD700] via-[#4F6172] to-[#008000]

linear-gradient(90deg, #C2A300, #00D200)

bg-linear-to-r from-[#C2A300] to-[#00D200]

radial-gradient(circle at 20% 25%, #FFD700, transparent 34%), radial-gradient(circle at 80% 30%, #008033, transparent 32%), linear-gradient(135deg, #4F6172, #008000)

bg-[radial-gradient(circle_at_20%_25%,#FFD700,transparent_34%),linear-gradient(135deg,#4F6172,#008000)]

Five-color palette

Generated reference notes

Gold and Green form a analogous pairing with strong chroma. The hue distance gives the combination enough structure to read as intentional instead of accidental, while the average lightness keeps the result grounded and weighted. Use the brighter side for active controls, highlights, or small graphic marks, then reserve the quieter side for panels, backgrounds, or secondary accents. This palette works best when it is supported by neutral text colors and generous spacing, because both anchors can attract attention. In product interfaces, it can separate navigation, status, and content regions without relying only on borders. In editorial layouts, the pair can frame pull quotes, section labels, or data marks while keeping body copy on black, white, or slate surfaces. For data visualization, use one anchor as the primary series and keep the other for comparison, alerts, or hovered states. Save the direct gradient for moments where the transition itself communicates continuity. Test contrast before placing text directly on either color.