Petrol Coast color palette — #F4F7E8 · #5F9162 · #5D629A · #704150 · #38332D

Slate and Fern set the tone — five colors that lean into nature and growth.

The five colors

• Ivory (#F4F7E8): a clean, paper-quiet neutral.
• Fern (#5F9162): A luminous, balanced green — the color of fresh herbs.
• Slate (#5D629A): A full-bodied, balanced violet — the color of a velvet chair.
• Cocoa (#704150): A full-bodied, dusty rose — the color of a warm blush.
• Espresso (#38332D): quiet, heavy and certain.

Feels like: Nature, Growth, Creativity, Sophistication. Tagged jewel, vibrant, muted.

Use it as a design system

One click turns Petrol Coast into a complete token system: semantic roles from primary to success, an 11-stop OKLCH scale per role, a WCAG AA/AAA and APCA contrast matrix, an auto-derived dark mode and 11 export formats including CSS custom properties, Tailwind, Figma Variables and shadcn/ui.

Similar palettes

• Dusty Bloom color palette (#FAF5E8, #939157, #3B6B96, #674168, #542700)
• Ancient Parlor color palette (#F0F8EE, #389796, #835B7C, #70412F, #33332C)
• Petrol Drift color palette (#F0F3EA, #57966F, #087D9B, #793744, #181C0B)
• Worn Lagoon Dune color palette (#FFF4E2, #7DB69A, #38848A, #764C51, #3F4D37)
• Hushed Chapel color palette (#F4F6EF, #D4DCD8, #A3AEB5, #638D71, #51534D)
• Timeworn Aubergine color palette (#EBFAE9, #008077, #72287B, #581E00, #252207)
• Softworn Delta color palette (#F3FAD0, #88C6AD, #3C948B, #006973, #27486F)
• Lagoon Courtyard color palette (#ECF5EA, #199082, #314135, #242B21, #0F1712)

Browse the whole catalog at Explore, or see today's palette.