Beige + Slate

Gradient variants

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

linear-gradient(90deg, #F5F5DC, #708090)

bg-linear-to-r from-[#F5F5DC] to-[#708090]

linear-gradient(45deg, #F5F5DC, #708090)

bg-linear-45 from-[#F5F5DC] to-[#708090]

linear-gradient(180deg, #F5F5DC, #708090)

bg-linear-to-b from-[#F5F5DC] to-[#708090]

radial-gradient(circle at center, #F5F5DC, #708090)

bg-radial from-[#F5F5DC] to-[#708090]

conic-gradient(from 90deg, #F5F5DC, #708090, #F5F5DC)

bg-conic from-[#F5F5DC] via-[#708090] to-[#F5F5DC]

linear-gradient(90deg, #F5F5DC, #A8B5C2, #708090)

bg-linear-to-r from-[#F5F5DC] via-[#A8B5C2] to-[#708090]

linear-gradient(90deg, #E7E7AC, #9EA9B4)

bg-linear-to-r from-[#E7E7AC] to-[#9EA9B4]

radial-gradient(circle at 20% 25%, #F5F5DC, transparent 34%), radial-gradient(circle at 80% 30%, #707390, transparent 32%), linear-gradient(135deg, #A8B5C2, #708090)

bg-[radial-gradient(circle_at_20%_25%,#F5F5DC,transparent_34%),linear-gradient(135deg,#A8B5C2,#708090)]

Five-color palette

Generated reference notes

Beige with Slate creates a split-complementary color story that can move from reference swatches into practical interface systems. The pair has measured color pressure, so it benefits from a clear hierarchy: one anchor should lead, and the other should support. When the palette feels open and high-key, use neutral surfaces to keep the composition readable. Gradients between the two colors are useful for hero bands, badges, charts, and empty states, but flat applications often need more restraint. Try using one color for links or buttons and the other for category chips, focus rings, or illustration details. The combination becomes more durable when paired with off-white surfaces, dark text, and a small number of repeated spacing rules. In brand-adjacent work, document which color owns action, which owns decoration, and which neutral owns text. Save the direct gradient for moments where the transition itself communicates continuity. Avoid using both colors at full strength around long paragraphs.