Pine-N

Meet Pine-N (#476D5B), a deep, muted green that commands attention through its quiet confidence. Its striking quality lies in its desaturated, earthy tone, offering a sophisticated foundation that feels both organic and refined, perfect for interfaces that aim for understated elegance.

What color is Pine-N?

What is the meaning of Pine-N?

How do I use Pine-N (#476D5B) in UI design?

Using Pine-N color codes

Pine-N

#476D5B

Access our full UI & UX library today.

What color is Pine-N?

What is the meaning of Pine-N?

How do I use Pine-N (#476D5B) in UI design?

Using Pine-N color codes

Pine-N Code Conversions

HEX

#476D5B

LAB

43, -18, 6

RGB

71, 109, 91

XYZ

10.0, 13.0, 11.9

HSL

152°, 21%, 35%

LCH

43, 19, 162°

HSB

152°, 35%, 43%

LUV

43, -18, 10

CMYK

35, 0, 17, 57

CMYK

35, 0, 17, 57

HWB

152°, 28%, 57%

Pine-N Color Harmonies

Analogous

By selecting colors adjacent to Pine-N on the color wheel, you can build an analogous palette that feels cohesive and naturally serene.

#476D48

#476D5B

#476C6D

#476D48

#476D5B

#476C6D

Complementary

Complementary colors are opposites on the color wheel. When paired with Pine-N, they create a high-contrast, visually striking effect perfect for grabbing attention.

#476D5B

#6D4759

#476D5B

#6D4759

Split Complementary

A split complementary scheme for Pine-N uses the two colors adjacent to its direct complement, offering a vibrant yet balanced high-contrast palette.

#476D5B

#6D476C

#6D4847

#476D5B

#6D476C

#6D4847

Triadic

A triadic scheme uses three hues evenly spaced on the color wheel, creating a vibrant, high-contrast palette with Pine-N as its foundation.

#476D5B

#5B476D

#6D5B47

#476D5B

#5B476D

#6D5B47

Tetradic

Built from two pairs of complementary colors, tetradic palettes like these use Pine-N as a base to create rich and balanced four-color harmonies.

#476D5B

#48476D

#6D4759

#6C6D47

#476D5B

#48476D

#6D4759

#6C6D47

Square

A square color scheme uses four colors equidistant on the color wheel. Based on Pine-N, this arrangement creates a rich palette full of vibrant contrast.

#476D5B

#48476D

#6D4759

#6C6D47

#476D5B

#48476D

#6D4759

#6C6D47

Pine-N Contrast Simulation

Text Color

#

Background Color

#

5.82

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.

5.82

Good

Small Text
Pass
Large Text
Pass
Graphic Components
Pass

Pine-N Color Variations

Shades

Shades of Pine-N are created by adding black, giving the color more depth and weight.

#476D5B

#3D5D4E

#334E41

#293E34

#1E2F27

#141F1A

#0A100D

#000000

#476D5B

#3D5D4E

#334E41

#293E34

#1E2F27

#141F1A

#0A100D

#000000

Tints

Tints are lighter versions of Pine-N, created by adding white to soften the hue.

#476D5B

#618272

#7C978A

#96ACA1

#B0C0B9

#CAD5D0

#E5EAE8

#FFFFFF

#476D5B

#618272

#7C978A

#96ACA1

#B0C0B9

#CAD5D0

#E5EAE8

#FFFFFF

Tones

Tones of Pine-N are created by mixing it with gray, resulting in softer, less saturated variations.

#476D5B

#4F7060

#577266

#5F756B

#687870

#707B75

#787D7B

#808080

#476D5B

#4F7060

#577266

#5F756B

#687870

#707B75

#787D7B

#808080

Hues

Hues are variations of Pine-N's base color, differing in their intensity and temperature.

#476D5B

#47626D

#48476D

#64476D

#6D4759

#6D5247

#6C6D47

#506D47

#476D5B

#47626D

#48476D

#64476D

#6D4759

#6D5247

#6C6D47

#506D47

What Interfaces Use Colors Like Pine-N?

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