#B2FFAE

Accessibility

AAA

17.81:1

Vs white / black

1.18:1 · 17.81:1

Sources

Library color

Codes

Formats

HEX

#b2ffae

RGB

rgb(178, 255, 174)

RGBA

rgba(178, 255, 174, 1)

HSL

hsl(117, 100%, 84%)

HSLA

hsla(117, 100%, 84%, 1)

HSV

hsv(117, 32%, 100%)

LAB

lab(93.47% -38.78 31.41)

LCH

lch(93.47% 49.9 140.99)

OKLAB

oklab(0.9301 -0.1058 0.0789)

OKLCH

oklch(0.9301 0.132 143.29)

XYZ

xyz(61.76, 84.04, 53.00)

CMYK

cmyk(30%, 0%, 32%, 0%)

CSS

color: #b2ffae;

CSS variable

--color-b2ffae: #b2ffae;

SCSS

$color-b2ffae: #b2ffae;

JavaScript

const color = "#b2ffae";

TypeScript

const color: string = "#b2ffae";

React

style={{ backgroundColor: "#b2ffae" }}

JSON

{ "hex": "#b2ffae", "rgb": { "r": 178, "g": 255, "b": 174 }, "oklch": "oklch(0.9301 0.132 143.29)" }

Export

Developer code

css

:root {
  --#b2ffae-1: #b2ffae;
}

Design systems

Nearest official tokens

An arbitrary HEX is not an official Tailwind, Material, or Bootstrap color. Distance is CIEDE2000.

Nearest Tailwind color

green-300

Very different · ΔE 6.5 · #86EFAC

Nearest CSS named color

PaleGreen

Noticeably different · ΔE 3.78 · #98FB98

Nearest Material color

light-green-200

Very different · ΔE 9.35 · #C5E1A5

Nearest Bootstrap color

light

Very different · ΔE 25.04 · #F8F9FA

OKLCH

Perceptual 50–950 scale

Generated in OKLCH from this hex. Not an official Tailwind scale unless the hex itself is a Tailwind token.

50d6ffd3 100c6f8c3 200ace6a9 3008fd18c 4006cb669 500509a4f 600428140 700326831 800234f22 900153814 950032204

Palette

Tints & shades

Full scale from light tints through the base color into deep shades

f9fff8 f2fff2 ecffeb e5ffe4 dfffdd d9ffd7 d2ffd0 ccffc9 c5ffc2 bfffbc b8ffb5 b2ffae a3eaa0 94d591 86bf83 77aa74 689565 598057 4a6a49 3b553a 2d402c 1e2a1d 0f150f

Palette

Tints

Mixed toward white — soft backgrounds and highlights

f9fff8 f2fff2 ecffeb e5ffe4 dfffdd d9ffd7 d2ffd0 ccffc9 c5ffc2 bfffbc b8ffb5

Palette

Shades

Mixed toward black — depth, text, and emphasis

a3eaa0 94d591 86bf83 77aa74 689565 598057 4a6a49 3b553a 2d402c 1e2a1d 0f150f

Palette

Tones

Mixed toward neutral grey — muted UI surfaces

aef4aa aaeaa6 a6dfa3 a1d59f 9dca9b 99c097 95b593 91aa8f 8da08c 889588 848b84

Harmony

Complementary

Opposite on the color wheel for contrast

#B2FFAEStop 1 #FBADFFStop 2

Harmony

Analogous

Neighbors that sit comfortably together

#DAFFADStop 1 #B2FFAEStop 2 #ADFFD2Stop 3

Harmony

Triadic

Evenly spaced triad for vibrant sets

#B2FFAEStop 1 #ADB1FFStop 2 #FFADB1Stop 3

Harmony

Split complementary

Base plus two accents beside the complement

#B2FFAEStop 1 #D2ADFFStop 2 #FFADDAStop 3

Harmony

Monochromatic

Same hue, varied lightness and saturation

#056600Stop 1 #09B300Stop 2 #0DFF00Stop 3 #55FF4DStop 4 #9EFF99Stop 5

Using this color

Where #b2ffae works

#B2FFAE (#b2ffae) sits in the light green family at about 117° hue, 100% saturation, and 84% lightness. Contrast is 1.18:1 on white and 17.81:1 on black, so near-black labels read more clearly on the swatch itself. Nearest Tailwind token: green-300 (approximation unless the hex is an official scale stop).

Sensible jobs for this swatch

subtle surfaces, chips, and table stripes
text or icons on charcoal / dark mode

Do not use #b2ffae as small body text on white — 1.18:1 misses WCAG AA (4.5:1). Pair it with a darker shade from the scale below, or check pairs in the contrast checker.

Family context: Vitality, optimism, and renewal. Friendly for outdoor and lifestyle brands. Common uses still include buttons, charts, and accents in the Light Green range — always verify the pair for this exact hex in the contrast checker.

Similar & related colors

Nearby colors from the library by perceptual distance

PaleGreen#98FB98 Web Safe #99FF99#99FF99 LightGreen#90EE90 Web Safe #CCFF99#CCFF99 Web Safe #CCFFCC#CCFFCC Spectrum #9EEA81#9EEA81 Tailwind green 300#86EFAC Spectrum #98E684#98E684 Spectrum #A4EE7C#A4EE7C Spectrum #6DF39A#6DF39A Spectrum #90E184#90E184 Web Safe #66FF99#66FF99