Topaz
Meet Topaz (#FFC87C), a radiant hue sitting between gold and orange. Its striking quality comes from a bright, sun-drenched warmth that brings a luminous energy to any palette without being overpowering, making it a compelling choice for visual projects.
What color is 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.
What is the meaning of the color Topaz (#FFC87C)?
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.
How do I use Topaz in UI design?
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.
How do I use the Topaz color codes?
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.
Analogous
Analogous colors sit next to each other on the color wheel. Paired with Topaz, these neighboring hues create a harmonious and serene visual effect.
Complementary
Complementary colors sit directly opposite each other on the color wheel. When paired with Topaz, these colors create a striking, high-contrast visual effect.
Split Complementary
A split complementary scheme for Topaz uses the two colors adjacent to its direct complement, offering a balanced yet vibrant palette.
Triadic
A triadic scheme pairs Topaz with two other colors equidistant on the color wheel, resulting in a high-contrast yet harmonious visual effect.
Tetradic
A tetradic color scheme for Topaz uses two pairs of complementary colors, forming a rectangle on the color wheel for a vibrant palette.
Square
A square color scheme uses four colors spaced evenly around the color wheel, creating a vibrant and high-contrast palette with Topaz as a key component.
Text Color
Background Color
Your Catchy Large Text Goes Here
Shades
Shades are darker versions of Topaz, made by adding black for more depth and weight.
Tints
By adding white to Topaz, you create tints—lighter variations that add a soft touch.
Tones
Tones of Topaz are created by adding gray, which softens the color’s saturation.
Hues
Hues are variations of Topaz, sharing its base color but with different intensities or temperatures.
Never run out of inspiration again.
Use Mobbin for free as long as you like or get full access with any of our paid plans.




























































































































