Named color

Opal

Opal color #A8C3BC: RGB 168, 195, 188 and HSL 164°, 18%, 71%. Explore its cool green profile, contrast, CSS, palettes and harmonies.

#A8C3BC green cool muted

HEX #A8C3BC

RGB rgb(168, 195, 188)

HSL hsl(164 18% 71%)

CMYK cmyk(14, 0, 4, 24)

Luminance 0.5099

Contrast Black 11.2:1White 1.88:1

Use this color

Create with Opal

Open a professional color tool with #A8C3BC already applied. Each configuration stays canonical to the tool and can be adjusted or shared.

All color tools

Generate palette & CSS variablesCreate 50–950 tokens and export CSS, SCSS, JSON, or Tailwind.Open configured tool →Open in Gradient StudioStart with Opal and its complementary color.Open configured tool →Mix this colorBlend it with a complementary color and copy color-mix() CSS.Open configured tool →Check contrastOpen the strongest black or white background pairing.Open configured tool →Accessible combinationsReview AA and AAA text options, alternatives, warnings, and UI guidance.Open configured tool →Create glass surfaceUse this color as the tint for a translucent UI panel.Open configured tool →

CSS Utilities

--color-opal: #A8C3BC;
.bg-opal { background-color: #A8C3BC; }
.text-opal { color: #A8C3BC; }

Open CSS utility pageReusable variables, classes, examples, and implementation notes

Color history, meaning and use · Editorially reviewed

About Opal Color

Precious opal is defined less by one body color than by play-of-color. Submicroscopic silica spheres arranged in an ordered structure diffract light into spectral colors; sphere size and arrangement influence which colors appear. White, dark, and transparent body colors can all support that optical display.

A single muted blue-green Opal swatch can suggest the material’s cool translucency, but it cannot reproduce moving flashes of red, green, violet, and yellow. For digital design, an opal-inspired effect is more honestly built with restrained gradients, iridescent highlights, and motion while keeping readable content on a stable contrasting surface.

This HEX is a body-color-inspired reference, not a simulation of play-of-color, gemstone type, treatment, or quality.

WCAG Accessibility

Contrast checks for Opal against black and white text.

Black text11.2:1AA Pass

White text1.88:1AA Fail

AA text options#000000, #1A1A1A, #36454F

AAA text options#000000, #1A1A1A

Open WCAG pageDetailed contrast notes, warnings, alternatives, and UI examples

Downloadable color reference infographic

Opal Color Reference Infographic

Save a high-resolution infographic of Opal, including its color values, coordinated palette, and black and white text contrast.

1200 × 800

Opal color reference infographic showing #A8C3BC, RGB and HSL values, a coordinated palette, and black and white text contrast. — Opal color reference infographic generated from the verified Colors Encyclopedia dataset.

Download WebP Download SVG Open full size

Color Harmonies

#C2A8AF#C2A8AF #A8C2AE#A8C2AE #A8BCC2#A8BCC2 #BBA8C2#BBA8C2 #C2BBA8#C2BBA8

Open full Opal harmony pageComplementary, analogous, triadic, tetradic, split, and monochromatic sets

Variants

#DEE8E5#DEE8E5 #729D91#729D91 #97D3C3#97D3C3 #B5B5B5#B5B5B5 #F4F5F5#F4F5F5 #94FFE2#94FFE2

Pairings

Black#000000 #C2A8AF#C2A8AF #A8C2AE#A8C2AE #A8BCC2#A8BCC2 Matte Black#1A1A1A White Smoke#F5F5F5

Luminance0.5099

Black text11.2:1AA Pass

White text1.88:1AA Fail

hexCanonical HEX value

rgbRed, green, blue channels

hslHue, saturation, lightness

cmykApproximate print conversion

wcagAA and AAA contrast options

harmoniesMathematical harmony sets

variantsGenerated tone variants

nearestColorsKnowledge graph neighbors

Structured sections

Color systems

{
  "hex": "#A8C3BC",
  "rgb": [
    168,
    195,
    188
  ],
  "hsl": [
    164,
    18,
    71
  ],
  "cmyk": [
    14,
    0,
    4,
    24
  ],
  "luminance": 0.5099,
  "contrast": {
    "black": 11.2,
    "white": 1.88
  }
}

WCAG

{
  "AA": [
    "#000000",
    "#1A1A1A",
    "#36454F"
  ],
  "AAA": [
    "#000000",
    "#1A1A1A"
  ]
}

Harmonies

{
  "complementary": "#C2A8AF",
  "analogous": [
    "#A8C2AE",
    "#A8BCC2"
  ],
  "triadic": [
    "#BBA8C2",
    "#C2BBA8"
  ],
  "tetradic": [
    "#AEA8C2",
    "#C2A8AF",
    "#BCC2A8"
  ],
  "splitComplementary": [
    "#C2A8BC",
    "#C2AEA8"
  ],
  "monochromatic": [
    "#DEE8E5",
    "#A8C3BC",
    "#729D91"
  ]
}

Variants

{
  "light": "#DEE8E5",
  "dark": "#729D91",
  "saturated": "#97D3C3",
  "desaturated": "#B5B5B5",
  "pastel": "#F4F5F5",
  "neon": "#94FFE2"
}

Pairings

{
  "best": [
    "#000000",
    "#C2A8AF",
    "#A8C2AE",
    "#A8BCC2"
  ],
  "avoid": [
    "#B5B5B5",
    "#DEE8E5"
  ],
  "neutral": [
    "#1A1A1A",
    "#F5F5F5",
    "#E8E8E4"
  ],
  "highContrast": [
    "#000000"
  ],
  "lowContrast": [
    "#DEE8E5",
    "#B5B5B5"
  ]
}

Knowledge graph

{
  "nearestColors": [
    "ash-gray",
    "pumice",
    "pastel-blue",
    "galvanized-steel",
    "silver"
  ],
  "generatedPalettes": [
    "opal"
  ],
  "generatedComparisons": [
    "ash-gray-vs-opal",
    "opal-vs-pumice",
    "pastel-blue-vs-opal"
  ],
  "relatedFamilies": [
    "/colors/by-family/green",
    "/colors/by-temperature/cool",
    "/colors/by-tone/muted"
  ],
  "relatedTools": [
    "/harmonies/opal",
    "/wcag/opal",
    "/css/colors/opal",
    "/hex/a8c3bc",
    "/tools/css-gradient-generator",
    "/tools/color-palette-generator",
    "/tools/css-color-mixer",
    "/tools/contrast-checker"
  ],
  "semanticRelations": {
    "broader": [
      "/colors/by-family/green",
      "/colors/by-temperature/cool",
      "/colors/by-tone/muted"
    ],
    "narrower": [
      "/palettes/opal"
    ],
    "related": [
      "/colors/ash-gray",
      "/colors/pumice",
      "/colors/pastel-blue",
      "/colors/galvanized-steel",
      "/colors/silver",
      "/compare/ash-gray-vs-opal",
      "/compare/opal-vs-pumice",
      "/compare/pastel-blue-vs-opal",
      "/harmonies/opal",
      "/wcag/opal",
      "/css/colors/opal",
      "/hex/a8c3bc",
      "/tools/css-gradient-generator",
      "/tools/color-palette-generator",
      "/tools/css-color-mixer",
      "/tools/contrast-checker"
    ]
  }
}

Full JSON dataset

{
  "slug": "opal",
  "name": "Opal",
  "hex": "#A8C3BC",
  "uses": [
    "jewel-tone palettes",
    "luxury branding",
    "premium interface accents"
  ],
  "psychology": {
    "associations": [
      "depth",
      "richness",
      "prestige"
    ],
    "contexts": [
      "luxury",
      "fashion",
      "beauty",
      "editorial design"
    ],
    "avoidIn": [
      "minimal compliance dashboards"
    ]
  },
  "aliases": [],
  "sourceType": "curated",
  "confidence": "medium",
  "reviewStatus": "manual",
  "sourceUrl": "https://www.colorsencyclopedia.com/assets/colors.json",
  "origin": {
    "type": "common",
    "notes": "Curated common color reference used in design, material, cultural, and editorial color systems."
  },
  "family": "green",
  "temperature": "cool",
  "tone": [
    "muted"
  ],
  "editorialNotes": "Curated internal color record with computed technical properties.",
  "tags": [
    "green",
    "cool",
    "muted",
    "jewel-tone-palettes",
    "luxury-branding",
    "premium-interface-accents",
    "depth",
    "richness",
    "prestige"
  ],
  "popularity": 84,
  "rgb": [
    168,
    195,
    188
  ],
  "hsl": [
    164,
    18,
    71
  ],
  "cmyk": [
    14,
    0,
    4,
    24
  ],
  "luminance": 0.5099,
  "contrast": {
    "black": 11.2,
    "white": 1.88
  },
  "harmonies": {
    "complementary": "#C2A8AF",
    "analogous": [
      "#A8C2AE",
      "#A8BCC2"
    ],
    "triadic": [
      "#BBA8C2",
      "#C2BBA8"
    ],
    "tetradic": [
      "#AEA8C2",
      "#C2A8AF",
      "#BCC2A8"
    ],
    "splitComplementary": [
      "#C2A8BC",
      "#C2AEA8"
    ],
    "monochromatic": [
      "#DEE8E5",
      "#A8C3BC",
      "#729D91"
    ]
  },
  "variants": {
    "light": "#DEE8E5",
    "dark": "#729D91",
    "saturated": "#97D3C3",
    "desaturated": "#B5B5B5",
    "pastel": "#F4F5F5",
    "neon": "#94FFE2"
  },
  "wcag": {
    "AA": [
      "#000000",
      "#1A1A1A",
      "#36454F"
    ],
    "AAA": [
      "#000000",
      "#1A1A1A"
    ]
  },
  "css": {
    "variable": "--color-opal: #A8C3BC;",
    "utility": ".bg-opal { background-color: #A8C3BC; }",
    "textUtility": ".text-opal { color: #A8C3BC; }"
  },
  "nearestColors": [
    "ash-gray",
    "pumice",
    "pastel-blue",
    "galvanized-steel",
    "silver"
  ],
  "generatedPalettes": [
    "opal"
  ],
  "generatedComparisons": [
    "ash-gray-vs-opal",
    "opal-vs-pumice",
    "pastel-blue-vs-opal"
  ],
  "relatedFamilies": [
    "/colors/by-family/green",
    "/colors/by-temperature/cool",
    "/colors/by-tone/muted"
  ],
  "relatedTools": [
    "/harmonies/opal",
    "/wcag/opal",
    "/css/colors/opal",
    "/hex/a8c3bc",
    "/tools/css-gradient-generator",
    "/tools/color-palette-generator",
    "/tools/css-color-mixer",
    "/tools/contrast-checker"
  ],
  "semanticRelations": {
    "broader": [
      "/colors/by-family/green",
      "/colors/by-temperature/cool",
      "/colors/by-tone/muted"
    ],
    "narrower": [
      "/palettes/opal"
    ],
    "related": [
      "/colors/ash-gray",
      "/colors/pumice",
      "/colors/pastel-blue",
      "/colors/galvanized-steel",
      "/colors/silver",
      "/compare/ash-gray-vs-opal",
      "/compare/opal-vs-pumice",
      "/compare/pastel-blue-vs-opal",
      "/harmonies/opal",
      "/wcag/opal",
      "/css/colors/opal",
      "/hex/a8c3bc",
      "/tools/css-gradient-generator",
      "/tools/color-palette-generator",
      "/tools/css-color-mixer",
      "/tools/contrast-checker"
    ]
  },
  "pairings": {
    "best": [
      "#000000",
      "#C2A8AF",
      "#A8C2AE",
      "#A8BCC2"
    ],
    "avoid": [
      "#B5B5B5",
      "#DEE8E5"
    ],
    "neutral": [
      "#1A1A1A",
      "#F5F5F5",
      "#E8E8E4"
    ],
    "highContrast": [
      "#000000"
    ],
    "lowContrast": [
      "#DEE8E5",
      "#B5B5B5"
    ]
  }
}

Opal

Create with Opal

CSS Utilities

About Opal Color

WCAG Accessibility

Opal Color Reference Infographic

Color Harmonies

Variants

Pairings

Machine-Readable Color Data (JSON)

Similar Colors

Related Color Guides