What color is #8FBC8F?

Dark Sea Green (#8FBC8F) is a light, muted green. In RGB it is rgb(143, 188, 143), and in HSL hsl(120, 25%, 65%).

Is #8FBC8F accessible as text?

On white, #8FBC8F has a contrast ratio of 2.15:1 (fails WCAG AA for body text); on black it is 9.76:1 (passes). For text placed on #8FBC8F, use black for the best readability.

What is the closest Tailwind color to #8FBC8F?

The nearest Tailwind CSS token is olive-400 (#ABAB9C).

What colors go well with #8FBC8F?

#8FBC8F pairs cleanly with neutrals — cream, taupe, charcoal and cool grays — and with its complementary #BC8FBC. In UI, a softer accent is often easier to use than the exact complement. Explore the harmonies, shades, tints and ready-made palettes for #8FBC8F below.

Is Dark Sea Green good for buttons?

Dark Sea Green works well for buttons and highlights, but use black text on #8FBC8F — white text only reaches 2.15:1, below the 4.5:1 needed for normal-size labels.

Is Dark Sea Green the same as CSS darkseagreen?

Yes — #8FBC8F is the CSS named color darkseagreen.

Dark Sea Green (#8FBC8F) Color Palette, HEX, RGB & Design Ideas

Palettes built on Dark Sea Green

Not just a swatch — here's how Dark Sea Green works with other colors. Named schemes with Dark Sea Green in its natural role, and a note on why the supporting colors balance it.

Japanese Sand Base · 5 colors

Base #8FBC8F Surface #EEE9DC Highlight #F5F1E7 Secondary #B6B09F Ink #2B2723

Dark Sea Green sets a calm, sun-bleached base here, wrapped in bone and paper off-whites and a soft greige, with a single ink accent for wabi-sabi restraint.

Botanical Studio Lead · 5 colors

Lead #8FBC8F Secondary #4C6B3B Accent #AD6B00 Surface #EEEAD6 Anchor #3C2F20

Dark Sea Green leads this botanical set among foliage greens and a terracotta accent, softened by cream and grounded in bark brown.

Coastal Morning Lead · 5 colors

Lead #8FBC8F Accent #A8C4BA Surface #E2D9BE Secondary #9AA09F Anchor #1A3648

Dark Sea Green opens this coastal palette with sea-glass and warm sand alongside it, grounded by driftwood grey and a deep-navy anchor.

Desert Clay Center · 5 colors

Center #8FBC8F Surface #DDD0A8 Secondary #AA7E4E Accent #8B9B74 Anchor #3C2D1E

Dark Sea Green holds the warm center of this desert palette with sand and clay beside it, a muted-sage accent and a dark-brown anchor.

Minimal Editorial Surface · 5 colors

Surface #F7F4EF Accent #8FBC8F Secondary #D0E0D0 Support #989286 Ink #17140F

Dark Sea Green is the single accent in this high-contrast editorial system — set on near-white paper against near-black ink, with a warm grey and a desaturated tint of Dark Sea Green carrying the quiet middle.

Build a working theme in the generator →

Color Lab

How Dark Sea Green actually behaves in design work — read from its OKLCH lightness, chroma and hue, not just its raw numbers. Ten signals to help you decide where this color earns its place.

Warmth 48/100

Neutral

Balanced temperature — flexible, sits between warm and cool schemes.

Softness 65/100

High

Soft and easy on the eye — gentle backdrops, calm surfaces.

Depth 24/100

Low

Airy and open — recedes, leaves the composition light.

Naturalness 97/100

Very high

Organic, earthy character — at home in wellness, food and craft brands.

Vintage feel 52/100

Moderate

A faint retro warmth without tipping into sepia.

Luxury 32/100

Low

Understated — leans refined without going austere.

Brand distinctiveness 31/100

Low

Recognisable but shares space with nearby hues.

UI accent fit 37/100

Low

Workable accent with care around contrast.

Surface fit 52/100

Moderate

Usable as a tinted surface in measured doses.

Print safety 82/100

Very high

Reproduces faithfully in CMYK — safe for packaging and print.

Pairs with Dark Sea Green

For UI

For branding

For interior

For fashion

People also use Dark Sea Green with

Soft Sage Laurel Green Lilac Platinum Castleton Green

UI roles & guardrails

Primary action Safe as a filled button with near-black label. AAA

Body text Do not use for body copy on light surfaces. Avoid

Large display Only on dark surfaces. Avoid

Background Pair with #141310 text at 8.6:1. Use

Subtle surface Use #EAF0EA for cards and hover fills. Tint 80

Avoid beside #8FBC9E — the hue gap is too small to read as intentional. Clash

In real applications

Not a swatch to memorise — a color to build with. Here is Dark Sea Green at work across the surfaces designers actually ship.

Website / UI

Northwind Sign up

Build faster.

A working theme, generated in seconds.

Dashboard

Revenue

$48.2k ▲ 12%

Brand

AVELINE

Studio

Poster

Nov 14 · 8PM

NIGHT
MARKET

Packaging

BLOOM

Botanical Wash

250 ml

Interior

Every model

Export

:root {
  --color-base: #8FBC8F;
  --color-base-rgb: 143 188 143;
  --color-base-oklch: oklch(75.1% 0.080 144.7);
  --color-50: #F5F9F5;
  --color-100: #E5F0E5;
  --color-200: #CCE0CC;
  --color-300: #A7C8A7;
  --color-400: #84AE84;
  --color-500: #649064;
  --color-600: #517051;
  --color-700: #3D513D;
  --color-800: #2A362A;
  --color-900: #1B221B;
  --color-on-base: #141310;
}

// tailwind.config.js
colors: {
  dark-sea-green: {
    50: '#F5F9F5',
    100: '#E5F0E5',
    200: '#CCE0CC',
    300: '#A7C8A7',
    400: '#84AE84',
    500: '#649064',
    600: '#517051',
    700: '#3D513D',
    800: '#2A362A',
    900: '#1B221B',
  },
}

$base: #8FBC8F;
$base-ink: #141310;
$base-50: #F5F9F5;
$base-100: #E5F0E5;
$base-200: #CCE0CC;
$base-300: #A7C8A7;
$base-400: #84AE84;
$base-500: #649064;
$base-600: #517051;
$base-700: #3D513D;
$base-800: #2A362A;
$base-900: #1B221B;
$base-hover: #66A366;
$base-subtle: #DFE9DF;

{
    "color": {
        "base": {
            "value": "#8FBC8F",
            "type": "color"
        },
        "onBase": {
            "value": "#141310",
            "type": "color"
        },
        "scale": {
            "50": {
                "value": "#F5F9F5",
                "type": "color"
            },
            "100": {
                "value": "#E5F0E5",
                "type": "color"
            },
            "200": {
                "value": "#CCE0CC",
                "type": "color"
            },
            "300": {
                "value": "#A7C8A7",
                "type": "color"
            },
            "400": {
                "value": "#84AE84",
                "type": "color"
            },
            "500": {
                "value": "#649064",
                "type": "color"
            },
            "600": {
                "value": "#517051",
                "type": "color"
            },
            "700": {
                "value": "#3D513D",
                "type": "color"
            },
            "800": {
                "value": "#2A362A",
                "type": "color"
            },
            "900": {
                "value": "#1B221B",
                "type": "color"
            }
        }
    }
}