Midnight Green

Meet Midnight Green (#004953), a deep, saturated shade that sits on the cusp of green and blue. Its profound darkness and rich teal undertones give it a sophisticated character, making it a compelling choice for creating interfaces with a strong, yet understated, visual presence.

What color is Midnight Green?

What is the meaning of Midnight Green?

How do I use Midnight Green (#004953) in UI design?

Using Midnight Green color codes

Midnight Green

#004953

Access our full UI & UX library today.

What color is Midnight Green?

What is the meaning of Midnight Green?

How do I use Midnight Green (#004953) in UI design?

Using Midnight Green color codes

Midnight Green Code Conversions

HEX

#004953

LAB

28, -16, -12

RGB

0, 73, 83

XYZ

3.9, 5.4, 9.0

HSL

187°, 100%, 16%

LCH

28, 20, 216°

HSB

187°, 100%, 33%

LUV

28, -21, -13

CMYK

100, 12, 0, 67

CMYK

100, 12, 0, 67

HWB

187°, 0%, 67%

Midnight Green Color Harmonies

Analogous

Analogous colors sit next to each other on the color wheel. When paired with Midnight Green, they produce a cohesive and calming visual effect.

#005333

#004953

#002053

#005333

#004953

#002053

Complementary

Complementary colors sit opposite each other on the color wheel. Paired with Midnight Green, they produce a striking, high-contrast visual effect in designs.

#004953

#530A00

#004953

#530A00

Split Complementary

A split complementary scheme for Midnight Green uses the two colors on either side of its opposite, creating a high-contrast look with less tension.

#004953

#530020

#533300

#004953

#530020

#533300

Triadic

Triadic color schemes use three hues equidistant on the color wheel. For Midnight Green, this creates a vibrant, balanced palette with strong visual contrast.

#004953

#530049

#495300

#004953

#530049

#495300

Tetradic

A tetradic color scheme for Midnight Green uses two pairs of complementary colors, forming a rich, four-color palette with built-in contrast.

#004953

#330053

#530A00

#205300

#004953

#330053

#530A00

#205300

Square

A square scheme uses four colors equidistant on the color wheel, offering a balanced yet highly contrasting palette built around the foundational Midnight Green.

#004953

#330053

#530A00

#205300

#004953

#330053

#530A00

#205300

Midnight Green Contrast Simulation

Text Color

#

Background Color

#

10.11

Excellent

Small Text
Pass
Large Text
Pass
Graphic Components
Pass

Your Catchy Large Text Goes Here

A high contrast makes anything easier to read, especially small text.

Text Color

#

Background Color

#

Your Catchy Large Text Goes Here

A high contrast makes anything easier to read, especially small text.

10.11

Excellent

Small Text
Pass
Large Text
Pass
Graphic Components
Pass

Midnight Green Color Variations

Shades

Shades are darker versions of Midnight Green, created by adding black for depth and weight.

#004953

#003F47

#00343B

#002A2F

#001F24

#001518

#000A0C

#000000

#004953

#003F47

#00343B

#002A2F

#001F24

#001518

#000A0C

#000000

Tints

Tints of Midnight Green are created by adding white, resulting in softer, more airy variations.

#004953

#24636C

#497D84

#6D979D

#92B1B5

#B6CBCE

#DBE5E6

#FFFFFF

#004953

#24636C

#497D84

#6D979D

#92B1B5

#B6CBCE

#DBE5E6

#FFFFFF

Tones

Tones are created by adding gray to Midnight Green, resulting in softer, desaturated variations.

#004953

#125159

#255960

#376166

#49686D

#5B7073

#6E787A

#808080

#004953

#125159

#255960

#376166

#49686D

#5B7073

#6E787A

#808080

Hues

Hues are variations of Midnight Green, differing in intensity and temperature to create distinct moods.

#004953

#000B53

#330053

#530034

#530A00

#534800

#205300

#00531F

#004953

#000B53

#330053

#530034

#530A00

#534800

#205300

#00531F

What Interfaces Use Colors Like Midnight Green?

Never run out of
inspiration again.

Use Mobbin for free as long as you like or get full access
with any of our paid plans.

  • Coinbase

  • Wise

  • Headspace

  • Airbnb

  • Uber

  • Nike

  • Pinterest

  • ChatGPT

  • Shopify

  • Loom

  • Creme

  • Mailchimp

  • Twitch

  • Spotify

  • Apple TV

  • Shop

  • Cosmos

  • Retro

  • Notion

  • Dropbox

Never run out of
inspiration again.

Use Mobbin for free as long as you like or get full access
with any of our paid plans.

  • Coinbase

  • Wise

  • Headspace

  • Airbnb

  • Uber

  • Nike

  • Pinterest

  • ChatGPT

  • Shopify

  • Loom

  • Creme

  • Mailchimp

  • Twitch

  • Spotify

  • Apple TV

  • Shop

  • Cosmos

  • Retro

  • Notion

  • Dropbox

Never run out of
inspiration again.

Use Mobbin for free as long as you like or get full access with any of our paid plans.

  • Coinbase

  • Wise

  • Headspace

  • Airbnb

  • Uber

  • Nike

  • Pinterest

  • ChatGPT

  • Shopify

  • Loom

  • Creme

  • Mailchimp

  • Twitch

  • Spotify

  • Apple TV

  • Shop

  • Cosmos

  • Retro

  • Notion

  • Dropbox