Tin

Meet Tin (#D3D4D5), a whisper-light gray that offers a sophisticated alternative to stark white. Its unique balance between warmth and coolness provides a clean, contemporary foundation for any design palette, making it a quietly versatile choice for modern interfaces.

What color is Tin?

What is the meaning of Tin?

How do I use Tin (#D3D4D5) in UI design?

Using Tin color codes

Tin

#D3D4D5

Access our full UI & UX library today.

What color is Tin?

What is the meaning of Tin?

How do I use Tin (#D3D4D5) in UI design?

Using Tin color codes

Tin Code Conversions

HEX

#D3D4D5

LAB

85, 0, -1

RGB

211, 212, 213

XYZ

62.4, 65.7, 72.3

HSL

210°, 2%, 83%

LCH

85, 1, 256°

HSB

210°, 1%, 84%

LUV

85, -1, -1

CMYK

1, 0, 0, 16

CMYK

1, 0, 0, 16

HWB

210°, 83%, 16%

Tin Color Harmonies

Analogous

Analogous colors are found next to Tin on the color wheel. Pairing them creates a harmonious and serene palette, perfect for a calm design.

#D3D5D5

#D3D4D5

#D3D3D5

#D3D5D5

#D3D4D5

#D3D3D5

Complementary

Complementary colors are opposites on the color wheel. When paired with Tin, these hues create a striking, high-contrast visual effect for any design.

#D3D4D5

#D5D4D3

#D3D4D5

#D5D4D3

Split Complementary

A split complementary scheme for Tin uses the two colors adjacent to its complement, offering a vibrant yet balanced palette with strong visual contrast.

#D3D4D5

#D5D3D3

#D5D5D3

#D3D4D5

#D5D3D3

#D5D5D3

Triadic

For a high-contrast and colorful palette, a triadic scheme pairs Tin with two other colors equally spaced on the color wheel.

#D3D4D5

#D5D3D4

#D4D5D3

#D3D4D5

#D5D3D4

#D4D5D3

Tetradic

Tetradic schemes pair Tin with three other colors, creating two complementary pairs that form a rectangle on the color wheel.

#D3D4D5

#D5D3D5

#D5D4D3

#D3D5D3

#D3D4D5

#D5D3D5

#D5D4D3

#D3D5D3

Square

A square color scheme builds on Tin with three additional hues, each spaced evenly on the color wheel for a vibrant, high-contrast palette.

#D3D4D5

#D5D3D5

#D5D4D3

#D3D5D3

#D3D4D5

#D5D3D5

#D5D4D3

#D3D5D3

Tin Contrast Simulation

Text Color

#

Background Color

#

14.15

Super

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.

14.15

Super

Small Text
Pass
Large Text
Pass
Graphic Components
Pass

Tin Color Variations

Shades

Shades are darker versions of Tin, created by adding black to give depth and weight.

#D3D4D5

#B5B6B7

#979798

#79797A

#5A5B5B

#3C3D3D

#1E1E1E

#000000

#D3D4D5

#B5B6B7

#979798

#79797A

#5A5B5B

#3C3D3D

#1E1E1E

#000000

Tints

Tints of Tin are lighter versions made by mixing in white for a softer, airier effect.

#D3D4D5

#D9DADB

#E0E0E1

#E6E6E7

#ECEDED

#F2F3F3

#F9F9F9

#FFFFFF

#D3D4D5

#D9DADB

#E0E0E1

#E6E6E7

#ECEDED

#F2F3F3

#F9F9F9

#FFFFFF

Tones

Tones are created by adding gray to Tin, softening its saturation for a more muted appearance.

#D3D4D5

#C7C8C9

#BBBCBD

#AFB0B1

#A4A4A4

#989898

#8C8C8C

#808080

#D3D4D5

#C7C8C9

#BBBCBD

#AFB0B1

#A4A4A4

#989898

#8C8C8C

#808080

Hues

Hues are variations of Tin's base color, with changes in intensity or temperature affecting mood.

#D3D4D5

#D3D3D5

#D5D3D5

#D5D3D3

#D5D4D3

#D5D5D3

#D3D5D3

#D3D5D4

#D3D4D5

#D3D3D5

#D5D3D5

#D5D3D3

#D5D4D3

#D5D5D3

#D3D5D3

#D3D5D4

What Interfaces Use Colors Like Tin?

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