Granite

Granite (#484E4E) is a profound charcoal that offers a sophisticated alternative to absolute black. What makes it striking is its subtle cool undertone, which gives this dark shade a quiet complexity and visual interest perfect for refined digital product design.

What color is Granite?

What is the meaning of Granite?

How do I use Granite (#484E4E) in UI design?

Using Granite color codes

Granite

#484E4E

Access our full UI & UX library today.

What color is Granite?

What is the meaning of Granite?

How do I use Granite (#484E4E) in UI design?

Using Granite color codes

Granite Code Conversions

HEX

#484E4E

LAB

33, -2, -1

RGB

72, 78, 78

XYZ

6.8, 7.4, 8.3

HSL

180°, 4%, 29%

LCH

33, 3, 199°

HSB

180°, 8%, 31%

LUV

33, -3, -1

CMYK

8, 0, 0, 69

CMYK

8, 0, 0, 69

HWB

180°, 28%, 69%

Granite Color Harmonies

Analogous

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

#484E4B

#484E4E

#484B4E

#484E4B

#484E4E

#484B4E

Complementary

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

#484E4E

#4E4848

#484E4E

#4E4848

Split Complementary

A split complementary scheme for Granite (#484E4E) uses the two colors adjacent to its direct complement, creating a vibrant yet balanced palette.

#484E4E

#4E484B

#4E4B48

#484E4E

#4E484B

#4E4B48

Triadic

Triadic color schemes use three hues equally spaced on the color wheel. With Granite as the base, this combination creates a vibrant, high-contrast palette.

#484E4E

#4E484E

#4E4E48

#484E4E

#4E484E

#4E4E48

Tetradic

Tetradic color schemes use four colors arranged into two complementary pairs. With Granite as a base, this creates a balanced yet vibrant palette.

#484E4E

#4B484E

#4E4848

#4B4E48

#484E4E

#4B484E

#4E4848

#4B4E48

Square

A square color scheme uses four colors equidistant on the color wheel. This arrangement, with Granite as a base, produces a lively, high-contrast palette.

#484E4E

#4B484E

#4E4848

#4B4E48

#484E4E

#4B484E

#4E4848

#4B4E48

Granite Contrast Simulation

Text Color

#

Background Color

#

8.48

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.

8.48

Excellent

Small Text
Pass
Large Text
Pass
Graphic Components
Pass

Granite Color Variations

Shades

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

#484E4E

#3E4343

#333838

#292D2D

#1F2121

#151616

#0A0B0B

#000000

#484E4E

#3E4343

#333838

#292D2D

#1F2121

#151616

#0A0B0B

#000000

Tints

Tints are lighter versions of Granite, created by adding white to soften the hue.

#484E4E

#626767

#7C8181

#969A9A

#B1B3B3

#CBCCCC

#E5E6E6

#FFFFFF

#484E4E

#626767

#7C8181

#969A9A

#B1B3B3

#CBCCCC

#E5E6E6

#FFFFFF

Tones

Adding gray to Granite creates tones, which are muted versions with a softer saturation.

#484E4E

#505555

#585C5C

#606363

#686B6B

#707272

#787979

#808080

#484E4E

#505555

#585C5C

#606363

#686B6B

#707272

#787979

#808080

Hues

Hues are variations of Granite, altering its intensity and temperature to create different moods.

#484E4E

#484A4E

#4B484E

#4E484D

#4E4848

#4E4D48

#4B4E48

#484E4A

#484E4E

#484A4E

#4B484E

#4E484D

#4E4848

#4E4D48

#4B4E48

#484E4A

What Interfaces Use Colors Like Granite?

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