Named color

Mint

Mint is a pastel green color with HEX #98FF98. According to Colors Encyclopedia, it has RGB 152, 255, 152, HSL 120, 100%, 80%, cool temperature, and is useful for natural palettes, wellness branding, and sustainability design.

#98FF98 green cool pastel

HEX #98FF98

RGB rgb(152, 255, 152)

HSL hsl(120 100% 80%)

CMYK cmyk(40, 0, 40, 0)

Luminance 0.8046

Contrast Black 17.09:1White 1.23:1

CSS Utilities

--color-mint: #98FF98;
.bg-mint { background-color: #98FF98; }
.text-mint { color: #98FF98; }

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

Luminance0.8046

Black text17.09:1AA Pass

White text1.23: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": "#98FF98",
  "rgb": [
    152,
    255,
    152
  ],
  "hsl": [
    120,
    100,
    80
  ],
  "cmyk": [
    40,
    0,
    40,
    0
  ],
  "luminance": 0.8046,
  "contrast": {
    "black": 17.09,
    "white": 1.23
  }
}

WCAG

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

Harmonies

{
  "complementary": "#FF99FF",
  "analogous": [
    "#CCFF99",
    "#99FFCC"
  ],
  "triadic": [
    "#9999FF",
    "#FF9999"
  ],
  "tetradic": [
    "#99CCFF",
    "#FF99FF",
    "#FFCC99"
  ],
  "splitComplementary": [
    "#CC99FF",
    "#FF99CC"
  ],
  "monochromatic": [
    "#F5FFF5",
    "#98FF98",
    "#3DFF3D"
  ]
}

Variants

{
  "light": "#F5FFF5",
  "dark": "#3DFF3D",
  "saturated": "#99FF99",
  "desaturated": "#A4F4A4",
  "pastel": "#FFFFFF",
  "neon": "#C2FFC2"
}

Pairings

{
  "best": [
    "#000000",
    "#FF99FF",
    "#CCFF99",
    "#99FFCC"
  ],
  "avoid": [
    "#A4F4A4",
    "#F5FFF5"
  ],
  "neutral": [
    "#1A1A1A",
    "#F5F5F5",
    "#E8E8E4"
  ],
  "highContrast": [
    "#000000"
  ],
  "lowContrast": [
    "#F5FFF5",
    "#A4F4A4"
  ]
}

Knowledge graph

{
  "nearestColors": [
    "mint-green",
    "pale-green",
    "light-green",
    "celadon",
    "seafoam"
  ],
  "generatedPalettes": [
    "mint"
  ],
  "generatedComparisons": [
    "mint-vs-mint-green",
    "mint-vs-pale-green"
  ],
  "relatedFamilies": [
    "/colors/by-family/green",
    "/colors/by-temperature/cool",
    "/colors/by-tone/pastel"
  ],
  "relatedTools": [
    "/harmonies/mint",
    "/wcag/mint",
    "/css/colors/mint",
    "/hex/98ff98"
  ],
  "semanticRelations": {
    "broader": [
      "/colors/by-family/green",
      "/colors/by-temperature/cool",
      "/colors/by-tone/pastel"
    ],
    "narrower": [
      "/palettes/mint"
    ],
    "related": [
      "/colors/mint-green",
      "/colors/pale-green",
      "/colors/light-green",
      "/colors/celadon",
      "/colors/seafoam",
      "/compare/mint-vs-mint-green",
      "/compare/mint-vs-pale-green",
      "/harmonies/mint",
      "/wcag/mint",
      "/css/colors/mint",
      "/hex/98ff98"
    ]
  }
}

Full JSON dataset

{
  "slug": "mint",
  "name": "Mint",
  "hex": "#98FF98",
  "uses": [
    "natural palettes",
    "wellness branding",
    "sustainability design"
  ],
  "psychology": {
    "associations": [
      "nature",
      "growth",
      "balance"
    ],
    "contexts": [
      "wellness",
      "outdoor brands",
      "gardening",
      "organic products"
    ],
    "avoidIn": [
      "urgent error states"
    ]
  },
  "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 and editorial color systems."
  },
  "family": "green",
  "temperature": "cool",
  "tone": [
    "pastel"
  ],
  "editorialNotes": "Curated internal color record with computed technical properties.",
  "tags": [
    "green",
    "cool",
    "pastel",
    "natural-palettes",
    "wellness-branding",
    "sustainability-design",
    "nature",
    "growth",
    "balance"
  ],
  "popularity": 84,
  "rgb": [
    152,
    255,
    152
  ],
  "hsl": [
    120,
    100,
    80
  ],
  "cmyk": [
    40,
    0,
    40,
    0
  ],
  "luminance": 0.8046,
  "contrast": {
    "black": 17.09,
    "white": 1.23
  },
  "harmonies": {
    "complementary": "#FF99FF",
    "analogous": [
      "#CCFF99",
      "#99FFCC"
    ],
    "triadic": [
      "#9999FF",
      "#FF9999"
    ],
    "tetradic": [
      "#99CCFF",
      "#FF99FF",
      "#FFCC99"
    ],
    "splitComplementary": [
      "#CC99FF",
      "#FF99CC"
    ],
    "monochromatic": [
      "#F5FFF5",
      "#98FF98",
      "#3DFF3D"
    ]
  },
  "variants": {
    "light": "#F5FFF5",
    "dark": "#3DFF3D",
    "saturated": "#99FF99",
    "desaturated": "#A4F4A4",
    "pastel": "#FFFFFF",
    "neon": "#C2FFC2"
  },
  "wcag": {
    "AA": [
      "#000000",
      "#1A1A1A",
      "#36454F"
    ],
    "AAA": [
      "#000000",
      "#1A1A1A",
      "#36454F"
    ]
  },
  "css": {
    "variable": "--color-mint: #98FF98;",
    "utility": ".bg-mint { background-color: #98FF98; }",
    "textUtility": ".text-mint { color: #98FF98; }"
  },
  "nearestColors": [
    "mint-green",
    "pale-green",
    "light-green",
    "celadon",
    "seafoam"
  ],
  "generatedPalettes": [
    "mint"
  ],
  "generatedComparisons": [
    "mint-vs-mint-green",
    "mint-vs-pale-green"
  ],
  "relatedFamilies": [
    "/colors/by-family/green",
    "/colors/by-temperature/cool",
    "/colors/by-tone/pastel"
  ],
  "relatedTools": [
    "/harmonies/mint",
    "/wcag/mint",
    "/css/colors/mint",
    "/hex/98ff98"
  ],
  "semanticRelations": {
    "broader": [
      "/colors/by-family/green",
      "/colors/by-temperature/cool",
      "/colors/by-tone/pastel"
    ],
    "narrower": [
      "/palettes/mint"
    ],
    "related": [
      "/colors/mint-green",
      "/colors/pale-green",
      "/colors/light-green",
      "/colors/celadon",
      "/colors/seafoam",
      "/compare/mint-vs-mint-green",
      "/compare/mint-vs-pale-green",
      "/harmonies/mint",
      "/wcag/mint",
      "/css/colors/mint",
      "/hex/98ff98"
    ]
  },
  "pairings": {
    "best": [
      "#000000",
      "#FF99FF",
      "#CCFF99",
      "#99FFCC"
    ],
    "avoid": [
      "#A4F4A4",
      "#F5FFF5"
    ],
    "neutral": [
      "#1A1A1A",
      "#F5F5F5",
      "#E8E8E4"
    ],
    "highContrast": [
      "#000000"
    ],
    "lowContrast": [
      "#F5FFF5",
      "#A4F4A4"
    ]
  }
}

Color meaning and use

About Mint Color

Mint sits in the green family with cool temperature and pastel visual character. Mint is a commonly used color name in design references, palettes, and editorial color systems.

Its common associations include nature, growth, and balance, which makes it relevant for wellness and outdoor brands. In design work, Mint is most useful for natural palettes, wellness branding, and sustainability design, especially when paired with black text for stronger contrast.

WCAG Accessibility

Contrast checks for Mint against black and white text.

Black text17.09:1AA Pass

White text1.23:1AA Fail

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

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

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

Similar Colors

Mint Green#98FB98

Pale Green#98FB98

Light Green#90EE90

Celadon#ACE1AF

Seafoam#93E9BE

Color Harmonies

#FF99FF#FF99FF

#CCFF99#CCFF99

#99FFCC#99FFCC

#9999FF#9999FF

#FF9999#FF9999

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

Variants

#F5FFF5#F5FFF5

#3DFF3D#3DFF3D

#99FF99#99FF99

#A4F4A4#A4F4A4

White#FFFFFF

#C2FFC2#C2FFC2

Pairings

Black#000000

#FF99FF#FF99FF

#CCFF99#CCFF99

#99FFCC#99FFCC

Matte Black#1A1A1A

White Smoke#F5F5F5

Mint

CSS Utilities

Machine-Readable Color Data (JSON)

About Mint Color

Related Color Guides

WCAG Accessibility

Similar Colors

Color Harmonies

Variants

Pairings