Figma color wheel
Want to find the perfect complementary or analogous colors to match Opal?
Opal is an iridescent, soothing hue that sits between green and blue on the color wheel. Its play-of-color effect can include hints of pink and purple. This opalescent, multicolored shade adds a dreamy touch to designs, ideal for creating serene and whimsical atmospheres. Consider using it in calming spaces.
Color variations
Shades
Tints
Tones
Hues
Color harmonies
Complementary
Split
Monochromatic
Analogous
Triadic
Square
Custom palettes
Serene Canopy
Soft Harmony
Tranquil Retreat
Opal is defined by the following color codes and values to ensure consistency across various digital platforms and devices.
- Hex Code: #A8C3BC
- RGB value: 65.9% red, 76.5% green, 73.7% blue
Accessibility considerations play a crucial role in UX and UI design color choices. Figma offers plugins in the Community to make sure your designs meet Web Content Accessibility Guidelines
For variations within the same spectrum as opal, consider:
- Turquoise (#40E0D0): Turquoise embodies the calming allure of water, offering a bright and refreshing hue that mirrors Opal’s iridescent qualities and play-of-color.
- Aqua (#00FFF0): Aqua provides a serene and crisp appearance, aligning with Opal’s light and translucent characteristics that evoke a sense of clarity and purity.
- Tiffany Blue (#81D8D0): Tiffany Blue channels a sophisticated and dreamy vibe, similar to Opal’s soft, opalescent sheen that reflects elegance and subtle color variations.
- Seafoam (#8DDCDC): Seafoam captures a gentle, coastal essence with its light and airy tone, reminiscent of the multicolored shimmer found in Opal’s play of color.
To complement Opal, consider pairing it with:
- Navy Blue (#000080): Navy blue's depth offers a striking contrast to opal's lighter tones, creating a balanced and sophisticated palette reminiscent of twilight against opal's iridescent, precious charm.
- Peach (#FFD3AC): Peach introduces warmth and softness, enhancing opal's gentle, opalescent qualities without overpowering its play-of-color.
- Light Yellow (#FFFFC5): This light yellow shade reflects opal's brightness and subtle rainbow hues, offering an uplifting and cheerful combination.
- Mint Green (#ADEBB3): Mint green's fresh, soothing vibe enhances opal's ethereal aspect, evoking a serene and harmonious atmosphere.
While Opal is an iridescent hue known for its captivating play-of-color, it may clash with:
- Bright Orange (#FF991C): The high energy of bright orange can overwhelm Opal's delicate, multicolored nature, resulting in a visually unbalanced mix.
- Chartreuse (#CCFF00): Chartreuse's neon brightness may overshadow Opal's softer, subtler tones, creating a jarring contrast.
- Dark Purple (#341539): The deep and intense shade of dark purple can make Opal's lighter tones appear washed out and less vivid.
- Electric Blue (#00F0FF): Electric blue's vibrant intensity competes with Opal’s translucent and mutable quality, disrupting its harmonious appeal.
- Scarlet (#ED2100): Scarlet's bold warmth might clash with Opal’s cooler, lighter spectrum, making the mix visually tense and harsh.
Contrast checker
Contrast 1.88
- Large Text
#A8C3BC
- Normal Text
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Fail | Fail | |
Fail | Fail | |
Fail | Fail |
Contrast 11.2
- Large Text
#A8C3BC
- Normal Text
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Pass | Pass | |
Pass | Pass | |
Pass | Pass |
Color simulations
Protanopia
Deuteranopia
Tritanopia
Achromatopsia
The hexadecimal color #A8C3BC, known as Opal, has RGB values of R:168, G:195, B:188 and CMYK values of C:14, M:0, Y:4, K:24.
| VALUE | CSS | |
|---|---|---|
| HEX | #A8C3BC | #A8C3BC |
| RGB DECIMAL | 168, 195, 188 | RGB(168,195,188) |
| RGB PERCENTAGE | 65.9, 76.5, 73.7 | RGB(65.9%,76.5%,73.7%) |
| CMYK | 14, 0, 4, 24 | |
| HSL | HSL(164.4, 18.4%, 71.2%) | HSL(164.4, 18.4%, 71.2%) |
| HSV (OR HSB) | 164.4°, 13.8, 76.5 | |
| WEB SAFE | #153204204 | #153204204 |
| BINARY | 10101000, 11000011, 10111100 | |
| iOS - SwiftUI | Color(red: 0.659, green: 0.765, blue: 0.737) | |
| iOS - UIKit | UIColor(red: 0.659, green: 0.765, blue: 0.737, alpha: 1) | |
| Android - Compose | Color(0xFFA8C3BC) |
