A brand brief calls for a "jewel-toned palette." A fashion line is named after gemstones. A website uses "gold" as the primary accent color and the actual hex code is nowhere near what the word implies. Gemstone color names and metallic color names are some of the most aspirationally used terms in design vocabulary and some of the most inconsistently applied.
The challenge is that real gemstones are not flat colors. They are translucent with internal depth, and their appearance shifts with cut, light, and quality. When "ruby" or "emerald" is translated to a flat hex code, the result is an approximation of the stone's visual character rather than an exact match. The color name finder finds the nearest CSS named color for any hex, which is useful for understanding what standard color a gem-inspired shade most closely resembles. None of the major gemstone names appear in the CSS specification itself.
This guide covers the most recognized gemstone color names and metallic color names, with their approximate hex values, the CSS colors they sit closest to, and how they are used in design contexts.
Why Colors Are Named After Gemstones and Metals
Gemstone and metal color names carry associations beyond the visual color. Emerald green implies value, depth, and rarity. Ruby red implies intensity and luxury. Gold implies wealth and warmth. These connotations make gem and metal names effective in branding, fashion, and interior design where emotional resonance matters alongside visual accuracy.
They also describe specific visual qualities that generic color names cannot. "Vivid deep green" tells you saturation and depth. "Emerald" tells you that, plus a specific coolness, a particular depth, and a sense of richness that generic descriptors lack. The same is true for sapphire vs. "dark blue," for amethyst vs. "medium purple," and for topaz vs. "warm orange."
The practical trade-off is precision. When a brief says "emerald green," the hex code target is ambiguous because emerald ranges in actual gems. Getting the hex aligned requires seeing the specific reference or specifying depth, saturation, and undertone explicitly alongside the gem name.
Red Gemstone Color Names: Ruby, Garnet, and Coral
Ruby: A vivid medium-deep red with a slight blue lean. The most prized rubies are described as "pigeon blood red," a vivid red-pink with no orange tint. Approximate hex: #9B111E. CSS crimson (#DC143C) is the closest named color, slightly more vivid. Ruby in fashion and design describes a rich, saturated red that reads as warm without being orange-adjacent.
Garnet: A deep dark red with a brown undertone, named after the dark red variety of the garnet gemstone (which also comes in green and orange). In design, garnet describes a very dark, slightly muted red. Approximate hex: #732639. CSS darkred (#8B0000) is close but slightly less complex.
Spinel: A vivid red similar to ruby. Historically confused with ruby in jewelry. In color use, spinel red sits close to ruby with a slightly more orange quality. Approximate hex: #A91101.
Carnelian: An orange-red gemstone color. Carnelian (also spelled cornelian) describes a warm red-orange with translucent depth. Approximate hex: #B31B1B to #B84B00. Used in jewelry design and historically significant in ancient seals and amulets.
Coral (Gem): Coral as a gemstone color describes organic coral, which ranges from pale salmon-pink (#FFAB8C) to deep vivid orange-red (#FF6B35). CSS coral (#FF7F50) sits in the middle of this range.
Blue Gemstone Color Names: Sapphire, Aquamarine, and Turquoise
Sapphire: A medium-to-deep blue with a slight violet undertone. Approximate hex: #0F52BA. CSS cornflowerblue (#6495ED) is close in undertone but much lighter. Royalblue (#4169E1) is similar in saturation but slightly lighter. Sapphire implies a rich, clearly vivid blue that reads as more saturated than navy and darker than cobalt.
Aquamarine: A pale cyan-green gem color. CSS aquamarine is #7FFFD4, which accurately represents the light, cool blue-green of the gemstone. Mediumaquamarine (#66CDAA) is darker. Aquamarine describes a color that sits at the intersection of light blue and light green with a cool, translucent quality.
Turquoise: CSS turquoise is #40E0D0, a vivid medium cyan-green. Turquoise in jewelry describes the specific blue-green of the turquoise stone, which ranges from greenish-blue (#00CED1) to distinctly blue (#30D5C8). In design, turquoise describes a medium vivid cyan-green that reads as warmer than aquamarine.
Lapis Lazuli: A deep, vivid ultramarine blue named after the stone used to make the most prized historical blue pigment. Approximate hex: #26619C. The deep ultramarine quality is distinct from sapphire's more neutral blue. Lapis lazuli was historically more expensive than gold as a pigment.
Blue Topaz: A pale to medium blue, distinct from the golden topaz most people know. Blue topaz ranges from very pale (#B0D0E0) to a vivid medium blue (#00C4E8) depending on treatment. The word topaz alone usually implies the golden variety.
Green Gemstone Color Names: Emerald, Jade, and Malachite
Emerald: A vivid, medium-depth green with a slight blue lean. No CSS named emerald exists. The most common hex reference is approximately #50C878. CSS mediumseagreen (#3CB371) is the closest named color in quality, though emerald is typically more vivid and saturated. In Pantone terms, Emerald was the 2013 Color of the Year and defined as a rich, vivid jewel green.
Jade: A medium green with a gray-cool quality, associated with the jade stone used in Chinese and Mesoamerican art. Jade green ranges from pale (#C3E8C3) to deep dark (#00A36C) depending on the jade variety. The most recognizable jade color is a medium, slightly muted green with cool undertones, approximately #00A86B.
Malachite: A vivid, medium-bright green named after the banded green mineral. CSS has no named malachite. Malachite green sits around #0BDA51 in its brightest form, though the stone's color varies. The word implies a vivid, nature-derived green distinct from the deeper quality of emerald.
Peridot: The yellow-green birthstone for August. Peridot (olivine) is a distinctive warm yellow-green. Approximate hex: #A3E56A to #AECB50. CSS yellowgreen (#9ACD32) is the closest named color in undertone quality. Peridot is distinctly warmer and more yellow than most named gem greens.
Forest Green: Not a gemstone name but consistently placed in the same vocabulary. CSS forestgreen (#228B22) is a dark, muted green. In design, forest green describes a dark natural green distinct from the vivid quality of emerald.
Purple and Violet Gemstone Color Names: Amethyst and Tanzanite
Amethyst: A medium purple named after the purple variety of quartz. The color ranges from pale lavender-purple in light specimens to deep vivid purple in dark specimens. Standard design reference for amethyst: approximately #9966CC. CSS mediumpurple (#9370DB) is close. Amethyst sits in the middle of the purple range with a slight blue lean. A full guide to the purple color family including amethyst is at the purple color names guide.
Tanzanite: A deep blue-purple gem discovered in Tanzania in 1967, known for its strong trichroism (appearing different colors at different angles). In design, tanzanite describes a deep blue-violet, approximately #4C3869 to #5E4FA2. Tanzanite in color vocabulary implies a more blue-dominant quality than amethyst.
Alexandrite: A color-change gem that appears green in daylight and red in incandescent light. In design contexts, alexandrite describes the blue-green version: approximately #00847A. The color-change property cannot be represented in a flat hex.
Violet Sapphire: Sapphires occur in purple varieties as well as blue. Violet sapphire in design describes a deep blue-purple, approximately #4B0082, close to CSS indigo.
Gold Color Names: The Full Range
Gold is the most used metallic color name in design and also the most misunderstood. The word covers a wide range.
Gold: CSS gold is #FFD700, a vivid bright yellow-gold. In flat digital design, this is the reference. It reads as vivid and warm but not metallic.
Goldenrod: CSS goldenrod (#DAA520) is a deeper, more muted golden-yellow. It sits in the warm yellow range with more complexity than pure gold.
Darkgoldenrod: CSS darkgoldenrod (#B8860B) is a deep warm amber-gold. This is the darkest named CSS color in the yellow-gold range.
Pale Gold: A light, slightly warm golden color for use in backgrounds and subtle accents. Approximate hex: #EFD469.
Antique Gold: A muted, slightly brownish gold that implies age and patina. Approximate hex: #CFB53B. More muted than CSS gold and warmer.
Old Gold: Deeper and more brownish than standard gold. Approximate hex: #CFB53B to #B8A000. Used in academic and heritage design contexts.
Champagne Gold: A very pale gold with a slight warmth. Approximate hex: #F7E7CE. Popular in luxury branding and wedding design where vivid gold would read as too bold.
Silver, Platinum, and Other Metallic Color Names
Silver: CSS silver is #C0C0C0, a medium-light neutral gray. In everyday design, silver describes a cool, slightly reflective gray. The flat hex does not represent the metallic sheen, but the color quality is correct.
Platinum: A very pale, slightly warm silver. Approximate hex: #E5E4E2. Platinum implies a higher, paler, cooler quality than standard silver. Used in luxury branding to suggest a level above gold.
Bronze: A warm reddish-brown metallic color, approximately #CD7F32. Bronze sits at the intersection of gold and brown, with more red and less brightness than gold.
Copper: A warm orange-brown metallic color, approximately #B87333. Copper is distinctly more orange than bronze and more metallic-looking than terracotta. As a hair color name, copper describes a vivid orange-red. As a metal color, it describes the warm orange-brown of unoxidized copper.
Rose Gold: A pale, warm pink-gold blend. Approximate hex: #B76E79 to #E8B4B8 depending on context. Rose gold in jewelry describes a gold alloy with copper that produces a warm pink quality. In design, rose gold became a major trend in the mid-2010s as both a material finish and a palette color.
Chrome: A very bright, cool near-white metallic. Approximate hex: #DBE4EE. Chrome as a color name implies a high-contrast, highly reflective quality. In flat design, it reads as a very pale cool silver.
Gunmetal: A dark blue-gray metallic. Approximate hex: #2A3439. Gunmetal implies a dark, slightly cool charcoal with a metallic quality. Used in industrial design and masculine brand palettes.
Brass: A warm golden-yellow metallic, similar to gold but with more warmth and less vivid yellow. Approximate hex: #B5A642.
Using Gemstone and Metallic Colors in Design
The central challenge with gem and metal color names in design is that no flat hex code can fully represent a reflective or translucent material. When the visual goal is a "gold" or "emerald" effect in UI or print design, the approach is typically to use the flat approximation for small applications and apply gradient, shadow, or texture for larger areas where the flat color would look disappointing.
The color name finder matches any gem-inspired hex to its nearest CSS named color, which helps document which standard color a custom gem shade most closely resembles. This is useful in design system documentation where precise CSS vocabulary is needed. For unusual gem colors and their hex history, the rare and unique color names guide covers historical pigments, unusual named colors, and their origins.
For building tonal palettes around any gemstone or metallic color, the tints and shades generator generates 11 steps from white to black through any input hex, giving you the highlight, midtone, and shadow range of the gem color for illustration or palette use.
The complete set of color tools for palette work and hex conversion is in the color tools section.
