Viridian

Meet Viridian (#4D9987), a captivating blue-green that commands attention. Its striking quality comes from a unique balance between cool blue undertones and a vibrant green presence, offering a sophisticated yet fresh option for any modern design palette.

What color is Viridian?

What is the meaning of Viridian?

How do I use Viridian (#4D9987) in UI design?

Using Viridian color codes

Viridian

#4D9987

Access our full UI & UX library today.

What color is Viridian?

What is the meaning of Viridian?

How do I use Viridian (#4D9987) in UI design?

Using Viridian color codes

Viridian Code Conversions

HEX

#4D9987

LAB

58, -28, 2

RGB

77, 153, 135

XYZ

18.8, 26.1, 27.0

HSL

166°, 33%, 45%

LCH

58, 28, 175°

HSB

166°, 50%, 60%

LUV

58, -34, 7

CMYK

50, 0, 12, 40

CMYK

50, 0, 12, 40

HWB

166°, 30%, 40%

Viridian Color Harmonies

Analogous

Analogous colors sit next to each other on the color wheel. Paired with Viridian, they produce a cohesive and serene palette.

#4D9961

#4D9987

#4D8599

#4D9961

#4D9987

#4D8599

Complementary

Complementary colors sit directly opposite each other on the color wheel. When paired with Viridian, these hues create a striking, high-contrast visual effect.

#4D9987

#994D5F

#4D9987

#994D5F

Split Complementary

A split complementary palette for Viridian pairs it with the two colors neighboring its direct complement, creating a vibrant yet harmonious look.

#4D9987

#994D85

#99614D

#4D9987

#994D85

#99614D

Triadic

A triadic palette is built from three colors equally spaced on the color wheel, creating a vibrant, high-contrast effect with Viridian.

#4D9987

#874D99

#99874D

#4D9987

#874D99

#99874D

Tetradic

Tetradic schemes use two pairs of complementary colors. For Viridian, this creates a rich, four-color palette by forming a rectangle on the color wheel.

#4D9987

#614D99

#994D5F

#85994D

#4D9987

#614D99

#994D5F

#85994D

Square

A square color scheme pairs Viridian with three other colors, all equidistant on the color wheel, forming a vibrant and high-contrast palette.

#4D9987

#614D99

#994D5F

#85994D

#4D9987

#614D99

#994D5F

#85994D

Viridian Contrast Simulation

Text Color

#

Background Color

#

6.22

Good

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.

6.22

Good

Small Text
Pass
Large Text
Pass
Graphic Components
Pass

Viridian Color Variations

Shades

Shades of Viridian are made by adding black, giving the color more depth and weight.

#4D9987

#428374

#376D60

#2C574D

#21423A

#162C27

#0B1613

#000000

#4D9987

#428374

#376D60

#2C574D

#21423A

#162C27

#0B1613

#000000

Tints

Tints are lighter variations of Viridian, created by adding white to produce a softer feel.

#4D9987

#66A898

#80B6A9

#99C5BA

#B3D3CC

#CCE2DD

#E6F0EE

#FFFFFF

#4D9987

#66A898

#80B6A9

#99C5BA

#B3D3CC

#CCE2DD

#E6F0EE

#FFFFFF

Tones

Adding gray to Viridian creates its tones, resulting in a muted and less saturated color.

#4D9987

#549586

#5C9285

#638E84

#6A8B83

#718782

#798481

#808080

#4D9987

#549586

#5C9285

#638E84

#6A8B83

#718782

#798481

#808080

Hues

Hues are variations of Viridian that share its base color but differ in intensity or temperature.

#4D9987

#4D7299

#614D99

#994D98

#994D5F

#99744D

#85994D

#4D994E

#4D9987

#4D7299

#614D99

#994D98

#994D5F

#99744D

#85994D

#4D994E

What Interfaces Use Colors Like Viridian?

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