Named colour

Android Green #3ddc84

The robot’s green, open by design.

Token name suggestion: True Fern

RGB

61, 220, 132

HSL

147°, 69%, 55%

CMYK

72, 0, 40, 14

Luminance

0.5384

#3ddc84 is a balanced vivid green, 147° on the wheel and 74/100 on the cool side. Put black text on it (11.77:1). As text it scores 1.78:1 on white — use #188649 instead. Nearest name is Medium Spring Green, nearest Tailwind family is green.

hsl(147 69% 55%)rgb(61 220 132)Base step 500AAA inkCool

At a glance

Every number on this page in one read: what #3ddc84 is made of, how bright it looks, and which way it leans.

Hex

#3ddc84

Hue

147°

green

Saturation

69%

vivid

Lightness

55%

balanced

Brightness

86%

HSV value

Perceived

70%

weighted brightness

Luminance

0.5384

WCAG relative

Temperature

Cool

74/100 cool

Color family

Green

Tone

Vivid

Best ink

Black

11.77:1

Closest name

Medium Spring Green

ΔE2000 6.7

Chroma

68.0

LCH, 0–130ish

OKLCH L

0.793

perceptual lightness

Tailwind

green

500 · ΔE 6.7

Web-safe

#33CC99

nearest of 216

Where it sits

Hue147° of 360°

Saturation69%

Lightness55%

Saturation × lightness field

Left edge is grey, right edge is full chroma; top is white, bottom is black. The dot is #3ddc84.

Temperature

Warm ← → Cool74% cool

Reads cool. Warm and cool siblings keep the same lightness, so you can swap one in without redoing your contrast maths.

Warmer#3DDC4A This color#3ddc84 Cooler#3BDEC0

Luminance by channel

Red2%

Green95%

Blue3%

Green carries most of what the eye calls brightness — that is why WCAG weights it 0.7152.

About Android Green

Android green, #3ddc84, is the bugdroid’s color — a bright mint-emerald chosen for a mascot that Google, unusually, lets everyone remix. The most open brand color in tech belongs to the most open platform.

History

Irina Blok’s 2007 bugdroid was released with permissive usage — startups put it on skateboards and cupcakes, and Google encouraged it. The 2019 refresh brightened the classic #a4c639 to today’s #3ddc84 and retired the full-body robot for the head.

Psychology

Green reads open, alive and communal — the anti-walled-garden. Its friendliness is the strategy: a mascot you can hug scales differently than a mark you must not touch.

In design

A vivid mint-emerald for dark and light chrome alike (large-text only on white at ~2.2:1). Pair with charcoal, white, and Android’s blue-gray secondaries. The openness itself is the design lesson: permissive marks build ecosystems.

In culture

Lawn statues at Googleplex, bugdroids in a million forms nobody sued over: the rare corporate mascot with a fandom’s freedom.

Brands that own android green

Classic bugdroid#a4c639 Spotify#1db954 WhatsApp#25d366 Xbox#107c10 Wise#9fe870

Shades of android green

Spring green Emerald Mint Malachite Jade Seafoam Shamrock Classic android

Every format

HEX	#3ddc84
HEX (8-digit)	#3ddc84ff
RGB	rgb(61, 220, 132)
RGBA	rgba(61, 220, 132, 1)
HSL	hsl(147, 69%, 55%)
HSV / HSB	hsv(147, 72%, 86%)
HWB	hwb(147 24% 14%)
CMYK	cmyk(72%, 0%, 40%, 14%)
LAB	lab(78.4 -60.1 31.8)
LCH	lch(78.4 68.0 152.1)
OKLCH	oklch(0.793 0.180 154.0)
XYZ (D65)	xyz(31.68, 53.84, 30.55)
Decimal	4054148
Display P3	color(display-p3 0.239 0.863 0.518)
Web-safe	#33CC99

Copy-ready code

every platformclick to select

/* CSS */
color: #3ddc84;
background-color: #3ddc84;
/* CSS custom property */
--brand: #3ddc84;
/* Tailwind (arbitrary) */
class="text-[#3ddc84] bg-[#3ddc84]"
/* SCSS */
$brand: #3ddc84;
/* SwiftUI */
Color(red: 0.239, green: 0.863, blue: 0.518)
/* UIKit */
UIColor(red: 0.239, green: 0.863, blue: 0.518, alpha: 1)
/* Android XML */
<color name="brand">#3DDC84</color>
/* Android Compose */
Color(0xFF3DDC84)
/* Flutter */
Color(0xFF3DDC84)
/* Python / OpenCV (BGR) */
(132, 220, 61)
/* Python / PIL (RGB) */
(61, 220, 132)
/* Java AWT */
new Color(61, 220, 132)
/* .NET */
Color.FromArgb(255, 61, 220, 132)
/* OpenGL / Unity (0–1) */
(0.2392f, 0.8627f, 0.5176f, 1f)
/* LaTeX */
\definecolor{brand}{RGB}{61,220,132}

modern cssclick to select

/* mix without leaving CSS */
background: color-mix(in oklab, #3ddc84 85%, white);
border-color: color-mix(in oklab, #3ddc84 40%, transparent);
/* theme-aware in one line */
color: light-dark(#146C3B, #D3EEDF);
/* relative colour syntax */
--hover: hsl(from #3ddc84 h s calc(l - 7));

Design tokens

The same ramp in the four formats a team actually needs. Paste one and the whole palette lands with it.

css custom propertiesclick to select

:root {
  --brand-50: #F3FBF7;
  --brand-100: #E7F8EF;
  --brand-200: #CAF2DC;
  --brand-300: #A0EEC3;
  --brand-400: #70E5A5;
  --brand-500: #3ddc84;
  --brand-600: #25CF71;
  --brand-700: #1FAD5E;
  --brand-800: #198A4C;
  --brand-900: #166439;
  --brand-950: #0E3F24;
  --brand: #3ddc84;
  --brand-ink: #000000;
  --brand-surface: #F4FAF7;
  --brand-border: #C0EDD4;
  --brand-hover: #26D072;
  --brand-pressed: #20B261;
}
@media (prefers-color-scheme: dark) {
  :root {
    --brand-surface: #14241B;
    --brand-ink: #D3EEDF;
  }
}

tailwind.config.jsclick to select

theme: {
  extend: {
    colors: {
      brand: {
        50: '#F3FBF7',
        100: '#E7F8EF',
        200: '#CAF2DC',
        300: '#A0EEC3',
        400: '#70E5A5',
        500: '#3ddc84',
        600: '#25CF71',
        700: '#1FAD5E',
        800: '#198A4C',
        900: '#166439',
        950: '#0E3F24',
        DEFAULT: '#3ddc84',
      },
    },
  },
}

scss mapclick to select

$brand: (
  '50': #F3FBF7,
  '100': #E7F8EF,
  '200': #CAF2DC,
  '300': #A0EEC3,
  '400': #70E5A5,
  '500': #3ddc84,
  '600': #25CF71,
  '700': #1FAD5E,
  '800': #198A4C,
  '900': #166439,
  '950': #0E3F24,
);
$brand-base: #3ddc84;
$brand-ink: #000000;

@function brand($step) { @return map-get($brand, $step); }

w3c design tokens (json)click to select

{
  "color": {
    "brand": {
      "50": { "$value": "#F3FBF7", "$type": "color" },
      "100": { "$value": "#E7F8EF", "$type": "color" },
      "200": { "$value": "#CAF2DC", "$type": "color" },
      "300": { "$value": "#A0EEC3", "$type": "color" },
      "400": { "$value": "#70E5A5", "$type": "color" },
      "500": { "$value": "#3ddc84", "$type": "color" },
      "600": { "$value": "#25CF71", "$type": "color" },
      "700": { "$value": "#1FAD5E", "$type": "color" },
      "800": { "$value": "#198A4C", "$type": "color" },
      "900": { "$value": "#166439", "$type": "color" },
      "950": { "$value": "#0E3F24", "$type": "color" }
    },
    "brandInk": { "$value": "#000000", "$type": "color" }
  }
}

Best text color

Only one of black and white can be right. This is the one, with the number that proves it.

Readable at a glance#000000 on #3ddc84 · 11.77:1

Use #000000 — AAA at every size.

12px

16px

24px

White text · 1.78:1

AA fail · AA large fail · AAA fail

Black text · 11.77:1 · recommended

AA pass · AA large pass · AAA pass

Reading the other direction: #3ddc84 as text scores 1.78:1 on white and 11.77:1 on black.

Best tinted ink on it, if plain black or white feels flat: #146C3B at 3.63:1.

Make it accessible

A contrast checker tells you that you failed. This tells you what to ship instead — same hue, same saturation, lightness moved only as far as WCAG demands.

The quick fox

#188649 · 4.62:1

AA on white−24% L

#188649

The quick fox

#126437 · 7.23:1

AAA on white−32% L

#126437

The quick fox

#3ddc84 · 11.77:1

AA on blackalready passes

#3ddc84

The quick fox

#3ddc84 · 11.77:1

AAA on blackalready passes

#3ddc84

Large text — 24px regular or 18.66px bold and above — only needs 3:1, so #1FA95C is enough for headings on white. Non-text elements such as icons, chart strokes and focus rings also sit at 3:1 under WCAG 2.2 (1.4.11).

Accessibility — WCAG contrast

#3ddc84 on white: 1.78:1

AA ✗ fail · AA-large ✗ · AAA ✗

#3ddc84 on black: 11.77:1

AA ✓ pass · AA-large ✓ · AAA ✓

Against the neutral ladder

Contrast is symmetric, so each row covers both directions: #3ddc84 as text on that neutral, and that neutral as text on #3ddc84.

Neutral	Ratio	Verdict	Both directions
White#ffffff	1.78:1	AAAA lgAAA	AaAa
Slate 50#f8fafc	1.71:1	AAAA lgAAA	AaAa
Slate 100#f1f5f9	1.63:1	AAAA lgAAA	AaAa
Slate 200#e2e8f0	1.45:1	AAAA lgAAA	AaAa
Slate 300#cbd5e1	1.20:1	AAAA lgAAA	AaAa
Slate 400#94a3b8	1.44:1	AAAA lgAAA	AaAa
Slate 500#64748b	2.67:1	AAAA lgAAA	AaAa
Slate 600#475569	4.25:1	AAAA lgAAA	AaAa
Slate 700#334155	5.80:1	AAAA lgAAA	AaAa
Slate 800#1e293b	8.20:1	AAAA lgAAA	AaAa
Slate 900#0f172a	10.00:1	AAAA lgAAA	AaAa
Black#000000	11.77:1	AAAA lgAAA	AaAa

Colour vision deficiency

true color

protanopia · #DCCA7E

deuteranopia · #C8BC8A

tritanopia · #00D9C6

Roughly one man in twelve has some form of colour vision deficiency. If any of the three panels above is hard to tell apart from a neighbouring colour in your palette, add a shape, an icon or a label so the meaning does not rest on hue alone.

Color scale — 50 to 950

A Tailwind-shaped ramp built around this exact hex. #3ddc84 is pinned to step 500; the rest hold its hue and let saturation ease off at the extremes so the pale end never turns neon.

50 100 200 300 400 500base 600 700 800 900 950

#F3FBF7

#E7F8EF

#CAF2DC

#A0EEC3

#70E5A5

#3ddc84

#25CF71

#1FAD5E

#198A4C

#166439

#0E3F24

Base = 500Lightest = 50 · #F3FBF7Darkest = 950 · #0E3F24Text step on white = 900

Perceptual ramp — OKLCH

The same eleven steps expressed in OKLCH, where equal lightness numbers actually look equally spaced. HSL ramps go muddy in the yellows and washed out in the blues; this one does not. Modern browsers render it natively — the hex ramp above is the fallback.

50100200300400500600700800900950

oklch tokensclick to select

:root {
  --brand-50: oklch(0.97 0.045 154.0);
  --brand-100: oklch(0.94 0.072 154.0);
  --brand-200: oklch(0.88 0.108 154.0);
  --brand-300: oklch(0.80 0.141 154.0);
  --brand-400: oklch(0.72 0.166 154.0);
  --brand-500: oklch(0.64 0.180 154.0);
  --brand-600: oklch(0.56 0.180 154.0);
  --brand-700: oklch(0.48 0.169 154.0);
  --brand-800: oklch(0.40 0.151 154.0);
  --brand-900: oklch(0.32 0.126 154.0);
  --brand-950: oklch(0.24 0.099 154.0);
}

Colors that work with #3ddc84

Not a palette — a role sheet. Each swatch answers one question you will hit while building the component.

Text on it#000000

Black wins here

Surface#F4FAF7

Tinted page background

Border#C0EDD4

Hairlines and dividers

Muted text#4B9B6E

Captions on the surface

Accent#E138BF

Second voice, not a rival

Dark variant#146C3B

Hover, pressed, headers

Light variant#E9FBF1

Selected rows, tints

Dark surface#14241B

Dark-mode background

Hover#26D072

One step down in lightness

Pressed#20B261

Two steps down

Disabled#B8D1C3

Chroma pulled out

Focus ring#44EA8E

Offset from the fill so it reads

Light mode

Everything in its place

Surface, border, heading and body all derive from this one hue, so the screen stays coherent without a second palette.

Primary actionSecondaryBadge

Dark mode

Same hue, inverted

Lightness flips, hue holds. The accent stays the anchor in both themes.

Primary actionSecondaryAccent

In real components

The same eight roles, wired into the interface patterns you will actually build with them. Every state below is a computed value, not a mock-up.

Buttons and states

Save changesHoverPressedDisabled

OutlineSubtleLinkFocused

Form field

Work email

you@company.com

Focus ring uses the light variant so the field still reads as one shape.

Send me product updates

Notice

Your export is ready

The file stays available for seven days. Download it before it expires.

NewBetaDraft

Data

Storage used68%

Acme LtdActive

NorthwindTrial

GlobexActive

How to use #3ddc84

Derived from its contrast, chroma and lightness — not from taste.

Works well for

✓Text and icons on dark surfaces
✓Primary buttons and calls to action
✓Focus rings, active and selected states
✓Brand accents, badges and data highlights
✓Chart series and data categories

Use with care

⚠Text of any size on white — fails WCAG AA
⚠Full-page backgrounds — tiring over long sessions
⚠Status meaning — pair it with an icon or label, never colour alone
⚠Pairing with a same-lightness hue — edges vibrate

Minimum size as text on white

Not as text

Safe as a fill behind white type

No — use #146C3B

Safe as a 1px border on white

No — use #1FA95C

Meaning and mood

What a colour in this family tends to signal, and how this particular chroma and lightness change the reading.

safegrowingnaturalpermissive

Green means go, well, and grown. It carries finance, sustainability and health with almost no explanation needed.

This is a confident chroma: strong enough to lead a brand, restrained enough to live in an interface all day. The mid lightness keeps it versatile in both themes.

Worth knowing

Red/green pairs are the most common colour-blindness failure — never let the two carry meaning alone.

Reads as

FormalityMedium
EnergyMedium-high
Weight45/100
TemperatureCool
ApproachabilityReserved

Colour associations are cultural and vary by market. Treat these as a starting point for a conversation with your audience, not a finding about them.

Similar colors

One move away from this hex in each direction. Every swatch is its own page.

Lighter#7AE7AA Darker#20B261 More saturated#28F182 Less saturated#52C786 Warmer#3DDC4A Cooler#3BDEC0 Softer#77C198 Richer#00FA70 Hue −20°#3DDC4F Hue −10°#3DDC6A Hue +10°#3DDC9F Hue +20°#3DDCB9

Color relationships

The wheel positions with their names attached, so you can grab the one you actually need.

Complementary	#DC3D95	Directly opposite — maximum tension
Analogous left	#46DC3D	Neighbour, quieter
Analogous right	#3DDCD3	Neighbour, quieter
Split-complement 1	#D33DDC	Contrast without the clash
Split-complement 2	#DC3D46	Contrast without the clash
Triadic 1	#843DDC	Even thirds — balanced and loud
Triadic 2	#DC843D	Even thirds — balanced and loud
Tetradic	#3D46DC	Fourth corner of the square scheme

On the wheel

#3ddc84 sits at 147°. Every dot is a harmony position and links to its own page in the table alongside.

RGB percentages

Red23.9%

Green86.3%

Blue51.8%

R · 0–255

0x3d

G · 0–255

220

0xdc

B · 0–255

132

0x84

CMYK percentages

Cyan72.3%

Magenta0.0%

Yellow40.0%

Key (black)13.7%

Total ink coverage is 126%. Most commercial presses cap around 300% — above that, sheets stop drying properly.

Color previews

#3ddc84 text on a black background

contrast 11.77:1

Card sample

#3ddc84 text on a white background

contrast 1.78:1

Card sample

#3ddc84 on grey

1.63:1

#3ddc84 on its own surface

1.69:1

#3ddc84 on its dark surface

9.07:1

CSS3 live lab

Text font color

The quick brown fox

color: #3ddc84;

Background color

Panel with #3ddc84 background

background-color: #3ddc84;

Text shadow — hex

Glowing headline

text-shadow: 2px 2px 8px #3ddc84;

Text shadow — RGB

Soft neon halo

text-shadow: 0 0 14px rgba(61, 220, 132, 0.45);

Div box shadow

Elevated card

box-shadow: 0 12px 32px -8px rgba(61, 220, 132, 0.45);

Border & gradient

Gradient panel

border: 3px solid #3ddc84;
background: linear-gradient(135deg, #3ddc84, #3DCADC);

Gradient text

Gradient headline

background: linear-gradient(90deg, #3ddc84, #3DA2DC);
-webkit-background-clip: text;
color: transparent;

Focus ring

Focused control

outline: 2px solid #3ddc84;
outline-offset: 3px;

Underline & caret

Marked up text

text-decoration-color: #3ddc84;
caret-color: #3ddc84;

Left rule

Pull quote or callout

border-left: 4px solid #3ddc84;

Ring + tint

Selected chip

background: #E9FBF1;
box-shadow: inset 0 0 0 2px #3ddc84;

Conic badge

68%

background: conic-gradient(#3ddc84 68%, #e2e8f0 0);

Transparency

What each alpha value actually composites to. The top row is #3ddc84 over white; the bottom row is the same alpha over a checkerboard, so you can see what survives on a photo or a video.

5%10%15%20%30%40%50%60%75%90%100%

Bottom row of hexes is the flattened result over white — use those when a design tool refuses transparency, or when you need a solid fallback.

alpha in every syntaxclick to select

rgba(61, 220, 132, 0.5)
rgb(61 220 132 / 50%)
#3ddc8480
hsl(147 69% 55% / 50%)
color-mix(in srgb, #3ddc84 50%, transparent)

Alpha	8-digit hex	Flat on white
10%	#3ddc841a	#ECFCF3
20%	#3ddc8433	#D8F8E6
40%	#3ddc8466	#B1F1CE
60%	#3ddc8499	#8BEAB5
80%	#3ddc84cc	#64E39D

Gradients from #3ddc84

Six recipes, each built from this hex and shown with the exact CSS that produced it.

Elevation

Same hue, three lightnesses — safe anywhere

background: linear-gradient(135deg, #71E5A5, #3ddc84 45%, #146C3B);

Duotone

A short hue run reads richer than a flat fill

background: linear-gradient(120deg, #3ddc84, #26B2D4);

Complement sweep

Loud — keep it behind large type only

background: linear-gradient(90deg, #3ddc84, #DC3D95);

Spotlight

Hero panels and app headers

background: radial-gradient(120% 120% at 20% 0%, #8BEAB5 0%, #3ddc84 45%, #146C3B 100%);

Soft wash

Section backgrounds that stay readable

background: linear-gradient(180deg, #F4FAF7, #ffffff);

Mesh

Ambient background, no image weight

background: radial-gradient(60% 60% at 15% 20%, #79E468 0%, transparent 60%), radial-gradient(55% 55% at 85% 15%, #57DDE1 0%, transparent 60%), radial-gradient(70% 70% at 50% 95%, #146C3B 0%, transparent 65%), #3ddc84;

Monochromatic scale

#09341C #14703D #1FAD5E #38DB81 #75E6A7 #B1F1CE #DCF9E9

Palettes built from #3ddc84

UI palette

Gradient stops

Accent trio

Warm–cool bridge

Data series

Status set

Neutral companions

Shades — darker

#27D675 #22BE68 #1EA75B #1A8F4E #157741 #115F34 #0D4727 #09301A #04180D

Tints — lighter

#50DF90 #64E39D #77E6A9 #8BEAB5 #9EEDC2 #B1F1CE #C5F4DA #D8F8E6 #ECFBF3

Tones — desaturated

#45D485 #4DCC86 #55C487 #5DBC87 #65B488 #6DAC89 #75A48A #7D9C8B #85948C

Color harmonies

Complement

Split-complement

Analogous

Triadic

Tetradic

Nearest named colors

Ranked with CIEDE2000 across all 139 CSS keywords. Under ΔE 2 the eye stops telling them apart; over ΔE 10 they are plainly different colors.

Medium Spring Green#00fa9aΔE00 6.7 · ΔE76 13.9 Light Green#90ee90ΔE00 7.8 · ΔE76 16.8 Spring Green#00ff7fΔE00 8.5 · ΔE76 24.8 Pale Green#98fb98ΔE00 9.8 · ΔE76 18.4 Lime Green#32cd32ΔE00 10 · ΔE76 31 Medium Sea Green#3cb371ΔE00 10.6 · ΔE76 19.2

Closest CSS keywordMedium Spring Green · ΔE 6.7 Closest darker nameMedium Sea Green · ΔE 10.6 Closest lighter nameLight Green · ΔE 7.8

Nearest Tailwind familygreen-500 · #22c55e · ΔE 6.7 Nearest web-safe colour#33CC99 · ΔE 7.9

#3ddc84 in the real world

Where a color in this family tends to land, and the interface roles it is usually asked to play.

Industries

SustainabilityFinanceHealth and wellnessAgriculture

Common UI roles

ButtonsLinksFocus statesCharts

Print note

Converts to four-color process without much drama. Proof it anyway.

On screens

Holds up across typical panel gamma. Still worth checking on an uncalibrated laptop, where mid-tones shift most.

In dark mode

Usable as-is on a dark surface at 11.77:1.

Brand examples for android green are listed above — each one links through to its own page.

Explore nearby colors

Small, deliberate steps away from this hex — useful when you are hunting for the version of a colour that finally feels right.

Android Green, answered

What is the Android green hex code?

Modern Android green is #3ddc84; the classic 2007–2019 bugdroid wore the yellower #a4c639.

Why is the Android robot green?

Designer Irina Blok drew from the classic arcade/tech association of green with "go" and machines — then Google’s permissive licensing made the friendly green robot a community asset.

Can I use the Android robot?

Yes — under Google’s CC attribution terms, remixing the bugdroid is explicitly allowed. The green travels with it.

What color is #3ddc84?

#3ddc84 is a balanced vivid green, closest to Medium Spring Green (ΔE2000 6.7). It sits at 147° on the hue wheel with 69% saturation and 55% lightness, which reads as cool.

What is the RGB value of #3ddc84?

rgb(61, 220, 132) — 61 red, 220 green and 132 blue out of 255, or 23.9% / 86.3% / 51.8% by channel.

What is #3ddc84 in HSL and HSV?

hsl(147, 69%, 55%) and hsv(147, 72%, 86%). HSL is what CSS takes; HSV is what your design tool's picker shows, which is why the saturation numbers rarely match.

Is #3ddc84 a light or a dark color?

It is a light color. Relative luminance is 0.5384 and perceived brightness is 70%, so black text on it reaches 11.77:1.

Should I use black or white text on #3ddc84?

Black. It scores 11.77:1 against #3ddc84, versus 1.78:1 for white — AAA at any size.

Is #3ddc84 accessible on a white background?

#3ddc84 on white scores 1.78:1, which fails WCAG AA at every size. Darken it to #188649 to reach 4.5:1, or #126437 for 7:1.

What is the complementary color of #3ddc84?

#DC3D95 sits directly opposite on the wheel. Softer options are the split-complements #D33DDC and #DC3D46, which give the same contrast with far less vibration.

What colors go well with #3ddc84?

For interface work: #F4FAF7 as the surface, #C0EDD4 for borders, #4B9B6E for secondary text, #E138BF as an accent and #146C3B for hover and pressed states. For a palette, the analogous pair #46DC3D and #3DDCD3 stays calm, while #DC3D95 is the loudest partner.

What is #3ddc84 in CMYK for printing?

cmyk(72%, 0%, 40%, 14%). This is a screen-to-ink approximation — ask your printer for a proof before committing to a run.

Is #3ddc84 warm or cool?

Cool — it scores 74 on a scale where 0 is the warmest orange and 100 the coolest azure. Nudged warmer it becomes #3DDC4A; nudged cooler, #3BDEC0.

Which Tailwind color is closest to #3ddc84?

The green family — its 500 step is #22c55e, ΔE2000 6.7 away. That is a visible difference, so define #3ddc84 as a custom token rather than reaching for the built-in.

How do I use #3ddc84 in Tailwind CSS?

Inline it as an arbitrary value with bg-[#3ddc84] or text-[#3ddc84], or register the whole ramp under theme.extend.colors.brand so you get bg-brand-500 and friends. The generated 50–950 scale on this page is ready to paste into your config.

What is #3ddc84 with 50% opacity?

rgba(61, 220, 132, 0.5), or #3ddc8480 in eight-digit hex. Over white that composites to #9EEEC2; over black, #1F6E42.

Is #3ddc84 a web-safe color?

No. The nearest web-safe colour is #33CC99, ΔE2000 7.9 away. The palette only matters for legacy displays and some email clients now.

What does the color #3ddc84 mean?

As a green, it reads safe, growing, natural. Green means go, well, and grown. It carries finance, sustainability and health with almost no explanation needed. At this chroma the effect is amplified — it will dominate whatever sits beside it.

What gradient works with #3ddc84?

The safest is same-hue elevation: linear-gradient(135deg, #71E5A5, #3ddc84 45%, #146C3B). For more colour, a short hue run to #26B2D4 keeps it rich without turning muddy.

Work with #3ddc84 in the Color Lab

Every tool opens with this colour already loaded.

Contrast Checker →Palette Generator →Palette Pro →Scale Generator →CSS Code Generator →Color Blind Simulator →Accessibility Checker →Color Distance →Gradient Generator →Image Color Picker →

Every value on this page is computed from #3ddc84 at request time — conversions, contrast ratios and ΔE distances are calculated, never looked up.