Sea Green Color (#2E8B57)

#2E8B57rgb(46, 139, 87)

Sea Green is a CSS named color defined as hex code #2E8B57. Sea Green is a medium-dark green with a cool, bluish cast, like seawater over a shallow bed.

Color Overview & Formats

CSS: seagreenLuminance: 0.1973
HEX
#2E8B57
RGB
rgb(46, 139, 87)
HSL
hsl(146, 50%, 36%)
Sea Green (#2E8B57) Color Format Conversions
FormatSyntax / ValuesNotesAction
HEX#2E8B576-digit hex web code
RGBrgb(46, 139, 87)Red, Green, Blue channels (0-255)
HSLhsl(146, 50%, 36%)Hue (146°), Saturation (50%), Lightness (36%)
HSV / HSBhsv(146, 67%, 55%)Hue, Saturation (67%), Value/Brightness (55%)
CMYKcmyk(67%, 0%, 37%, 45%)Digital mathematical approximation (non-print)
OKLCHoklch(0.569 0.119 154.9)Perceptually uniform color space (CSS Color 4 approximation)
CSS Implementation & Quick Steps
background-color: #2E8B57; /* or seagreen */
  1. Select color format: Choose the desired format (HEX #2E8B57, RGB, or HSL).
  2. Copy the code: Click the copy button or press Tab+Enter to store in clipboard.
  3. Pair with black text: Black text on Sea Green reaches 4.95:1 (WCAG AA).

What Colors Go With Sea Green?

These 6 colors all go well with Sea Green (#2E8B57), and each one is a standard CSS named color. The ratio is the WCAG 2.2 contrast of that color on Sea Green: at 4.5:1 or above it works for text; below that, use it for backgrounds and accents.

Black

#000000
4.95:1Text-safe

Readable text on sea green.

White

#FFFFFF
4.25:1Background / accent

Clean text and icons for large or bold labels.

Ivory

#FFFFF0
4.21:1Background / accent

A warm off-white for backgrounds around sea green.

Wheat

#F5DEB3
3.23:1Background / accent

A sandy beige for beach and natural palettes.

Gold

#FFD700
3.03:1Background / accent

A rich accent for headings and details.

Light Pink

#FFB6C1
2.57:1Background / accent

A soft near-complement for fresh, botanical palettes.

Harmonious Palettes & Tints

The palettes below are algorithmically generated across standard intervals based on Sea Green (HSL 146°). Each group offers full palette copy and live preview:

Complementary Harmony

Hue rotated 180 degrees on the HSL wheel (146° to 326°), keeping the original saturation and lightness.

Sea Green
#2E8B57
Complement (326°)
#8B2E62
Live UI Component Mockup
Component Header SampleBlack text on Sea Green: 4.95:1 (WCAG AA).
Button style preview

Analogous Harmony

Hues 30 degrees either side (116° and 176°), keeping the original saturation and lightness.

Analogous (116°)
#338B2E
Sea Green
#2E8B57
Analogous (176°)
#2E8B86
Live UI Component Mockup
Component Header SampleBlack text on Sea Green: 4.95:1 (WCAG AA).
Button style preview

Triadic Harmony

Hues spaced evenly by 120 degrees (266° and 26°), keeping the original saturation and lightness.

Sea Green
#2E8B57
Triadic (266°)
#572E8B
Triadic (26°)
#8B572E
Live UI Component Mockup
Component Header SampleBlack text on Sea Green: 4.95:1 (WCAG AA).
Button style preview

Tints & Shades

Mixed with white (tints) and black (shades) in sRGB at 60% and 30%.

Tint 60%
#ABD1BC
Tint 30%
#6DAE89
Sea Green
#2E8B57
Shade 30%
#20613D
Shade 60%
#123823
Live UI Component Mockup
Component Header SampleBlack text on Sea Green: 4.95:1 (WCAG AA).
Button style preview

WCAG 2.2 Text Readability & Contrast Check

Under WCAG 2.2 criteria, regular body text requires at least 4.5:1 (AA) and large text requires at least 3.0:1. The table below displays calculated contrast ratios:

Text Contrast Ratios on Sea Green (#2E8B57)
Foreground ColorContrast RatioNormal Text (AA)Large Text (AA)Normal Text AAA (>= 7.0:1)
Pure Black (#000000)
4.95:1PassPassFail
Pure White (#FFFFFF)
4.25:1FailPassFail
Dark Charcoal (#212529)
3.63:1FailPassFail
Mid Gray (#666666)
1.35:1FailFailFail

Interactive Contrast Tester

Enter text foreground and background colors to verify WCAG legibility:

Calculated Ratio:
4.95:1
Normal: Pass AALarge: Pass AAA
Large Heading Sample (18pt Bold)

This is sample body text rendered directly to verify contrast and readability.

Sea Green Background Download

Download standard 1920x1080 solid desktop wallpaper or generate mobile wallpaper:

Sea Green 1920x1080 solid color background wallpaper previewStandard Wallpaper: 1920x1080 PNG (#2E8B57)

Download Options

All wallpaper files precisely match the W3C standard color value:

Download 1920x1080 PNG

CSS Standard & Usage Notes

seagreen = #2e8b57 (rgb(46, 139, 87))
W3C CSS Color 4

UI Design & Accessibility Guidelines

Use it for nature, wellness and finance palettes, success states and calm buttons. On Sea Green, black text passes WCAG AA at every size (4.95:1); white text passes only for large text (4.25:1).

Published: · Modified: · Editorial: SwatchAtlas Editorial Team

Frequently Asked Questions (FAQ)

Can I use black text on Sea Green?

Yes. Black text on Sea Green has a WCAG 2.2 contrast ratio of 4.95:1, which passes AA (4.5:1) for all text sizes but not the stricter AAA level (7:1) for body text.

Can I use white text on Sea Green?

Only for large text. White text on Sea Green has a WCAG 2.2 contrast ratio of 4.25:1: enough for large text (3:1) but below the 4.5:1 needed for body text.

What colors go with Sea Green?

Black, White, Ivory, Wheat, Gold and Light Pink all go well with Sea Green. Black (4.95:1) has enough contrast for text on Sea Green; White, Ivory, Wheat, Gold and Light Pink work better as a background or accent.

Is sea green more blue or green?

It leans green. Sea Green (#2E8B57) has a hue of 146°, between green (120°) and cyan (180°) but closer to green, so it reads as green with a cool cast.