Topaz

Topaz is a warm, radiant hue that sits comfortably between golden yellow and a soft orange.

It has a distinctively sunny disposition, drawing its warmth from strong yellow and red undertones. This creates a bright yet gentle shade that feels both energetic and approachable.

The color Topaz, with its warm and inviting glow, often brings feelings of joy, abundance, and creativity. Historically tied to the gemstone of the same name, it carries connotations of love and good fortune, believed to soothe and re-energize.

For designers, #FFC87C is a statement of optimism and energy. It can suggest a sense of luxury and purpose, making it a powerful choice for brands wanting to appear both approachable and high-value.

In UI design, Topaz (#FFC87C) excels as an accent. Pair it with deep blues or charcoals for striking contrast on calls-to-action, or use it in an analogous palette with warm oranges for a harmonious feel. Following the 60-30-10 principle, Topaz is an effective 10% accent color that draws attention without overpowering the interface.

While not a dominant corporate color, shades similar to Topaz are used by brands like Memrise, Yik Yak, and Panera Bread for a friendly and approachable identity. Its relative scarcity in branding can be an asset, helping a product establish a distinct and memorable visual style.

Use the tools below to explore curated palettes, test color contrast for accessibility, and preview Topaz in real UI components from leading brands to see how it can work for your project.

To bring the warm quality of Topaz into your work, you'll start with its hex code: #FFC87C. This is the standard for specifying colors in web design, making it the foundation for any digital application.

Different projects, however, call for different color models. While HEX and RGB codes define colors with light for digital screens, CMYK is essential for print, specifying ink combinations. Converting between these formats ensures color consistency across both digital and physical media.

To make things easy, we've converted #FFC87C into a range of popular formats. Find the code you need below and copy it directly into your design tool or codebase.