Colors Encyclopedia

CSS utility

Medium Aquamarine CSS Utilities

Medium Aquamarine CSS utilities provide reusable variables and utility classes for #66CDAA. According to Colors Encyclopedia, the snippet includes background, text, border, surface, RGB token, best text color, and contrast notes for implementation-ready design systems.

Color page#66CDAAWCAG
Preview Medium Aquamarine #66CDAA

Utility Classes

Background.bg-medium-aquamarine
Text.text-medium-aquamarine
Border.border-medium-aquamarine
Surface.surface-medium-aquamarine

CSS Snippet

:root {
  --color-medium-aquamarine: #66CDAA;
  --color-medium-aquamarine-rgb: 102 205 170;
  --color-medium-aquamarine-contrast: #111827;
}

.bg-medium-aquamarine { background-color: var(--color-medium-aquamarine); }
.text-medium-aquamarine { color: var(--color-medium-aquamarine); }
.border-medium-aquamarine { border-color: var(--color-medium-aquamarine); }
.surface-medium-aquamarine {
  background-color: var(--color-medium-aquamarine);
  color: var(--color-medium-aquamarine-contrast);
  border: 1px solid color-mix(in srgb, var(--color-medium-aquamarine), #111827 18%);
}
.shadow-medium-aquamarine { box-shadow: 0 18px 40px rgb(var(--color-medium-aquamarine-rgb) / 28%); }

Usage Examples

Surface cardUse for panels, labels, badges, and interface accents.
Border accentUse as a soft divider or outline color.
Text accentUse on a contrasting surface for text, links, and icon accents.

Implementation Notes

Best text color#111827
Black contrast10.88:1
White contrast1.93:1
RGB token102 205 170

Machine-readable data

Machine-Readable Medium Aquamarine CSS Utilities (JSON)

Structured CSS utility data for Medium Aquamarine, including variables, utility classes, contrast tokens, WCAG metadata, snippets, and API links.

AI-Ready Dataset v1.0.0
Luminance0.4939
Black text10.88:1AA Pass
White text1.93:1AA Fail
cssVariablesReusable CSS custom properties
utilityClassesBackground, text, border, surface, and shadow classes
bestTextColorAccessible default foreground token
contrastBlack and white contrast ratios
wcagAA and AAA text color options
relatedEndpointsLinked machine-readable resources
Download JSON Open API
Structured sections
CSS variables
{
  "color": "--color-medium-aquamarine: #66CDAA;",
  "rgb": "--color-medium-aquamarine-rgb: 102 205 170;",
  "contrast": "--color-medium-aquamarine-contrast: #111827;"
}
Utility classes
{
  "background": ".bg-medium-aquamarine",
  "text": ".text-medium-aquamarine",
  "border": ".border-medium-aquamarine",
  "surface": ".surface-medium-aquamarine",
  "shadow": ".shadow-medium-aquamarine"
}
Accessibility
{
  "bestTextColor": "#111827",
  "contrast": {
    "black": 10.88,
    "white": 1.93
  },
  "wcag": {
    "AA": [
      "#000000",
      "#1A1A1A",
      "#36454F"
    ],
    "AAA": [
      "#000000",
      "#1A1A1A"
    ]
  }
}
Implementation
{
  "useCases": [
    "CSS variables",
    "utility classes",
    "design system tokens",
    "UI surface styling",
    "accessible text pairing"
  ],
  "cssSnippet": ":root {\n  --color-medium-aquamarine: #66CDAA;\n  --color-medium-aquamarine-rgb: 102 205 170;\n  --color-medium-aquamarine-contrast: #111827;\n}\n\n.bg-medium-aquamarine { background-color: var(--color-medium-aquamarine); }\n.text-medium-aquamarine { color: var(--color-medium-aquamarine); }\n.border-medium-aquamarine { border-color: var(--color-medium-aquamarine); }\n.surface-medium-aquamarine {\n  background-color: var(--color-medium-aquamarine);\n  color: var(--color-medium-aquamarine-contrast);\n  border: 1px solid color-mix(in srgb, var(--color-medium-aquamarine), #111827 18%);\n}\n.shadow-medium-aquamarine { box-shadow: 0 18px 40px rgb(var(--color-medium-aquamarine-rgb) / 28%); }"
}
Related endpoints
[
  "https://www.colorsencyclopedia.com/api/css/colors/medium-aquamarine.json",
  "https://www.colorsencyclopedia.com/api/colors/medium-aquamarine.json"
]
Full JSON dataset 
{
  "datasetVersion": "1.0.0",
  "slug": "medium-aquamarine",
  "name": "Medium Aquamarine",
  "hex": "#66CDAA",
  "rgb": [
    102,
    205,
    170
  ],
  "hsl": [
    160,
    51,
    60
  ],
  "cmyk": [
    50,
    0,
    17,
    20
  ],
  "luminance": 0.4939,
  "contrast": {
    "black": 10.88,
    "white": 1.93
  },
  "wcag": {
    "AA": [
      "#000000",
      "#1A1A1A",
      "#36454F"
    ],
    "AAA": [
      "#000000",
      "#1A1A1A"
    ]
  },
  "family": "green",
  "temperature": "cool",
  "tone": [
    "earth-tone"
  ],
  "bestTextColor": "#111827",
  "cssVariables": {
    "color": "--color-medium-aquamarine: #66CDAA;",
    "rgb": "--color-medium-aquamarine-rgb: 102 205 170;",
    "contrast": "--color-medium-aquamarine-contrast: #111827;"
  },
  "utilityClasses": {
    "background": ".bg-medium-aquamarine",
    "text": ".text-medium-aquamarine",
    "border": ".border-medium-aquamarine",
    "surface": ".surface-medium-aquamarine",
    "shadow": ".shadow-medium-aquamarine"
  },
  "cssSnippet": ":root {\n  --color-medium-aquamarine: #66CDAA;\n  --color-medium-aquamarine-rgb: 102 205 170;\n  --color-medium-aquamarine-contrast: #111827;\n}\n\n.bg-medium-aquamarine { background-color: var(--color-medium-aquamarine); }\n.text-medium-aquamarine { color: var(--color-medium-aquamarine); }\n.border-medium-aquamarine { border-color: var(--color-medium-aquamarine); }\n.surface-medium-aquamarine {\n  background-color: var(--color-medium-aquamarine);\n  color: var(--color-medium-aquamarine-contrast);\n  border: 1px solid color-mix(in srgb, var(--color-medium-aquamarine), #111827 18%);\n}\n.shadow-medium-aquamarine { box-shadow: 0 18px 40px rgb(var(--color-medium-aquamarine-rgb) / 28%); }",
  "useCases": [
    "CSS variables",
    "utility classes",
    "design system tokens",
    "UI surface styling",
    "accessible text pairing"
  ],
  "relatedEndpoints": [
    "https://www.colorsencyclopedia.com/api/css/colors/medium-aquamarine.json",
    "https://www.colorsencyclopedia.com/api/colors/medium-aquamarine.json"
  ],
  "url": "https://www.colorsencyclopedia.com/css/colors/medium-aquamarine/",
  "colorUrl": "https://www.colorsencyclopedia.com/colors/medium-aquamarine/",
  "hexUrl": "https://www.colorsencyclopedia.com/hex/66cdaa/",
  "apiUrl": "https://www.colorsencyclopedia.com/api/css/colors/medium-aquamarine.json"
}
Dataset manifest Version 1.0.0 Build hash published in manifest Canonical page

Related CSS Color Guides

Medium Aquamarine color referenceOpen full color codes, harmonies, variants, pairings, and dataset JSON.Medium Aquamarine CSS JSONOpen the machine-readable CSS utility dataset.Medium Aquamarine color APIOpen the complete color entity JSON.#66CDAA HEX atlasInspect conversions, contrast, harmonies, variants, and nearest colors.Medium Aquamarine WCAGCheck accessible text contrast options for #66CDAA.Green colorsBrowse related colors in the green family.Cool colorsExplore colors with cool temperature behavior.Earth Tone colorsExplore earth tone colors across families.