Twilit Cocoa Ridge color palette — #CCF0F1 · #005A3E · #582200 · #1F1600 · #000202

A conversation between Espresso and Pine, giving this palette its sense of optimism and sophistication.

The five colors

• Frost (#CCF0F1): A whisper-light, dusty teal — the color of sea glass.
• Pine (#005A3E): A full-bodied, balanced teal — the color of shallow lagoons.
• Espresso (#582200): A deep, shadowed, balanced orange — the color of autumn markets.
• Ink (#1F1600): A deep, shadowed, dusty gold — the color of afternoon light on wheat.
• Black (#000202): a grounded near-black with real depth.

Feels like: Optimism, Sophistication, Depth, Luxury. Tagged jewel, vibrant, dark, muted.

Use it as a design system

One click turns Twilit Cocoa Ridge 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

• Twilit Garnet Station color palette (#D7F8EF, #405A00, #6A0027, #341300, #000201)
• Inked Station color palette (#D1E7F6, #004C65, #24232B, #000F1C, #000204)
• Shadow Navy Parlor color palette (#D8EEF8, #004D5A, #04007D, #1A181E, #0D0200)
• Worn Mulberry color palette (#DFEFDC, #008075, #8E0092, #551D00, #010200)
• Aubergine Alley color palette (#C8E6F8, #004E60, #380076, #042601, #000203)
• Antique Corridor color palette (#D3E5EE, #007C8C, #4D29AC, #213F00, #000A0C)
• Lowlit Boulevard color palette (#C6E5EA, #00362F, #2E0034, #1B0200, #010200)
• Washed Abyss Grove color palette (#DFEAEE, #8BAAB9, #688CA2, #004F55, #000B11)

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