What color is Opal?
Opal is a soft, muted blue-green with a slight gray undertone, hex #A8C3BC, close to the color of pale eucalyptus leaves. It has a cool, watery quality without being fully blue or fully green.
What is the meaning of the color Opal?
Named after the iridescent gemstone prized in ancient Rome, opal as a color reflects the stone’s pale, shifting blue-green tones rather than its full spectral play. The gemstone was recorded in Latin as opalus by Pliny the Elder in his Natural History, written around 77 AD. During the Arts and Crafts movement of the late 19th century, opal tones appeared in decorative glassware and ceramic glazes as a mark of refined, nature-inspired design. Wedgwood used similar muted blue-green glazes in its jasperware line, anchoring the color to a tradition of quiet, understated elegance in British decorative arts.
What colors go with Opal?
Colors that pair well with Opal include:
Ivory: soft, warm contrast
Slate Blue: cool tonal depth
Sage Green: gentle natural harmony
Charcoal: grounding dark balance
Dusty Rose: warm, muted complement
Similar Colors
Conversions & Codes
| Format | Value | CSS |
|---|---|---|
| HEX | #A8C3BC |
color: #A8C3BC;
|
| RGB | 168, 195, 188 |
color: rgb(168, 195, 188);
|
| RGB Percentage | 66%, 76%, 74% |
color: rgb(66%, 76%, 74%);
|
| CMYK | 14%, 0%, 4%, 24% | Not supported in CSS |
| HSL | 164°, 18%, 71% |
color: hsl(164, 18%, 71%);
|
| HSV | 164°, 14%, 76% | Not supported in CSS |
| CIE-LAB | 57, -5, 2 |
color: lab(57% -5 2);
|
| Decimal | 11060156 | Not supported in CSS |
Color Variations
Shades
Tints
Tones
Hues
Color Harmonies
Analogous
Complementary
Split Complementary
Triadic
Tetradic
Square
CSS & Dev Snippets
.opal {
color: #A8C3BC;
}
$opal: #A8C3BC;
rgb(168, 195, 188)