Pewter Color: Hex Code, Palettes & Meaning | Figma (2024)

Home

Colors

Pewter

Everything you need to know about pewter to inspire your nextdesign.

Launch in FigmaNow

Read about Pewter

Pick a palette type

Back to topLaunch in FigmaNow

What color ispewter?

Pewter is a cool, versatile light bluish-gray with a serious, industrial feel. This desaturated shade falls between blue and green at the edge of the grayscale center on the color wheel, with a steely quality that evokes modernity andminimalism.

Pewter Color: Hex Code, Palettes & Meaning | Figma (1)Pewter Color: Hex Code, Palettes & Meaning | Figma (2)

What does pewter look like on digital screens?

Pewter is represented by specific color codes and values in the digital world to ensure it appears consistently across platforms anddevices.

  • HEX code: #909EAE
  • RGB value: 56.5% red, 62% green, and68.2%blue

Accessibility considerations play a crucial role in UX and UI design color choices. Figma offers plugins in the Community to make sure your designs meet Web Content Accessibility Guidelines.

How should I effectively use pewter in UIdesign?

Here are some ways to use pewter in yourdesigns:

  • Enhance readability. Pewter is excellent for text and backgrounds due to its moderate brightness. It contrasts well against light backgrounds to improve readability and pairs effectively with darker text for a subtle yet impactful visual.
  • Balance bold colors. Pewter is ideal for tempering brighter, bolder colors. It helps create a balanced visual experience that pleases the eye without overwhelming users.
  • Convey professionalism. Use pewter for elements like navigation menus or secondary buttons to project a professional and sophisticated look..
  • Establish hierarchy. Use pewter to distinguish less critical elements from primary ones, enhancing navigation and usability with a clear visual hierarchy.

Keep in mind that color and its meaning can change from culture to culture—and at any given time. If you are designing for a global audience, research color considerations for your specific regions.

What are similar colors topewter?

For variations within the same muted gray spectrum as pewter, consider:

  • Slate (#6D8196) leans darker with more blue undertones, giving off a cooler, smokeyfeel.
  • Gunmetal (#353E43) brings a moody depth, dipping closer to black for amoodierhue.
  • Blue-gray (#6A89A7) shares the same muted tone with added vibrancy, resembling faded denim or an eveningstorm.
  • Gray (#898989) provides balance and stability as a balanced neutralshade.

What colors go withpewter?

To complement pewter, consider pairing itwith:

  • Tan (#D6B588) adds a warm, earthy contrast to pewter’s cool tone for a grounded, naturalfeel.
  • Midnight blue (#272757) complements pewter’s sophistication with depth and a touchofdrama.
  • Maroon (#550000) creates a bold contrast with vibrant warmth, tempered by pewter’s simple elegance.
  • Cinnabar (#E84B3D) pops against pewter’s subdued hue, creating an energetic and classypair.

What colors conflict withpewter?

While pewter is a cool, neutral shade, it mayclashwith:

  • Brown (#895129) can create a muddy, bland look that diminishes both colors’ individual qualities.
  • Green (#008000) may compete with pewter’s subdued coolness, creating an imbalanced, over-saturated feel.
  • Purple (#9D00FF) can overwhelm pewter with its commanding vibrancy.
  • Ebony (#5D6658) may create a flat, mechanical aesthetic with muted green undertones that conflict with pewter’s subtle blueshade.

What does pewter symbolize?

Pewter, with its cool undertones and hint of blue, typically conveys a serious and sophisticated air. Its depth and subtle elegance symbolize practicality, sincerity, and intellect. However, like other shades of gray, pewter can also imply detachment and apathy, particularly when used in a muted, monochromatic setting.

In color psychology, pewter's gray and blue undertones are calming and can evoke feelings of stability and reliability. Its neutral yet deep hue promotes focus and can help reduce the perception of chaos in an environment, making it conducive to thoughtful and introspective moods. However, excessive use of pewter may also lead to feelings of coldness and isolation due to itsstarkness.

In UI design, this light, neutral shade is valued for its neutrality and ability to work well across a range of color schemes to create a sophisticated aesthetic. It's particularly effective for backgrounds or as an accent color to convey professionalism and elegance. Pewter can be used to highlight important elements without overpowering them.

What’s the history ofpewter?

Unlike many colors with histories steeped in pigments and dyes, "pewter" likely originated as a practical term. The word "pewter" appeared in English around the 1300s, coinciding with the widespread use of pewter for functional objects like tableware and cookware. The distinctive grayish tone of pewter metal became a shorthand for thismaterial.

Today, the color "pewter" continues this legacy. It represents a dependable, neutral gray that evokes a sense of functionality and understated elegance.

Color variations

Shades

Tints

Tones

Hues

Color harmonies

Complementary

Analogous

Monochromatic

Split

Triadic

Square

Custom palettes

Murky Waters

Harbor Haze

Misty Cliffs

Accessibility

Contrast checker

Large Text
Figma
Normal Text
How you design, align, and build matters. Do it together with Figma.

2.73:1

WCAG 2.2 Simple Contrast

Normal Text

Fail
AA
4.5:1

Fail
AAA
7:1

Large Text

Fail
AA
3:1

Fail
AAA
4.5:1
Large Text
Figma
Normal Text
How you design, align, and build matters. Do it together with Figma.

7.69:1

WCAG 2.2 Simple Contrast

Normal Text

Pass
AA
4.5:1

Pass
AAA
7:1

Large Text

Pass
AA
3:1

Pass
AAA
4.5:1

Color simulations

Protanopia

Deuteranopia

Tritanopia

Achromatopsia

Color conversion

The hexadecimal color #909EAE, known as pewter, has RGB values of R:144, G:158, B:174 and CMYK values of C:17, M:9,Y:0,K:32.

VALUECSS
HEX909EAE#909EAE
RGB DECIMAL144, 158, 174RGB(144, 158, 174)
RGB PERCENTAGE56.5, 62, 68.2RGB(56.5%, 62%, 68.2%)
CMYK17, 9, 0, 32
HSL212°, 15.6, 62.4HSL(212,15.6%,62.4%)
HSV (OR HSB)212°, 17.2, 68.2
WEB SAFE999999#999999
CIE-LAB64.514, -1.519, -9.985
XYZ31.367, 33.439, 44.844
xyY0.286, 0.305, 33.439
CIE-LCH64.514, 10.1, 261.351
CIE-LUV64.514, -8.275, -14.647
HUNTER-LAB57.826, -4.371, -5.501
BINARY10010000, 10011110, 10101110
iOS - SwiftUIColor(red: 0.565, green: 0.62, blue: 0.682)
iOS - UIKitUIColor(red: 0.565, green: 0.62, blue: 0.682, alpha: 1)
Android - ComposeColor(0xFF909EAE)

Keep learning

Figma color wheelWant to find the perfect complementary or analogous colors to matchpewter?Learn moreMidnight BlueDiscover the captivating color of midnightblue.Learn moreBlue-GrayDiscover the cool and muted color ofblue-gray.Learn more
Pewter Color: Hex Code, Palettes & Meaning | Figma (2024)
Top Articles
Latest Posts
Article information

Author: Sen. Emmett Berge

Last Updated:

Views: 6196

Rating: 5 / 5 (60 voted)

Reviews: 91% of readers found this page helpful

Author information

Name: Sen. Emmett Berge

Birthday: 1993-06-17

Address: 787 Elvis Divide, Port Brice, OH 24507-6802

Phone: +9779049645255

Job: Senior Healthcare Specialist

Hobby: Cycling, Model building, Kitesurfing, Origami, Lapidary, Dance, Basketball

Introduction: My name is Sen. Emmett Berge, I am a funny, vast, charming, courageous, enthusiastic, jolly, famous person who loves writing and wants to share my knowledge and understanding with you.