French Gray

Meet French Gray (#C7CACC), a sophisticated neutral with a subtle, cool undertone. Its quiet complexity sets it apart from standard grays, offering a nuanced foundation for palettes that require a touch of understated elegance without committing to a strong hue.

What color is French Gray?

What is the meaning of French Gray?

How do I use French Gray (#C7CACC) in UI design?

Using French Gray color codes

French Gray

#C7CACC

Access our full UI & UX library today.

What color is French Gray?

What is the meaning of French Gray?

How do I use French Gray (#C7CACC) in UI design?

Using French Gray color codes

French Gray Code Conversions

HEX

#C7CACC

LAB

81, -1, -1

RGB

199, 202, 204

XYZ

55.6, 58.7, 65.5

HSL

204°, 5%, 79%

LCH

81, 2, 244°

HSB

204°, 2%, 80%

LUV

81, -2, -2

CMYK

2, 1, 0, 20

CMYK

2, 1, 0, 20

HWB

204°, 78%, 20%

French Gray Color Harmonies

Analogous

Analogous colors sit next to each other on the color wheel. Pairing them with French Gray results in a serene and unified palette.

#C7CCCC

#C7CACC

#C7C8CC

#C7CCCC

#C7CACC

#C7C8CC

Complementary

Complementary colors sit opposite each other on the color wheel. When paired with French Gray, they create a striking, high-contrast visual effect.

#C7CACC

#CCC9C7

#C7CACC

#CCC9C7

Split Complementary

A split complementary scheme pairs French Gray with the two colors adjacent to its direct opposite, offering high contrast with more nuance.

#C7CACC

#CCC7C8

#CCCCC7

#C7CACC

#CCC7C8

#CCCCC7

Triadic

Triadic color schemes use three hues equidistant on the color wheel. Starting with French Gray, this method produces a vibrant and balanced palette.

#C7CACC

#CCC7CA

#CACCC7

#C7CACC

#CCC7CA

#CACCC7

Tetradic

A tetradic scheme pairs French Gray with three other colors, using two sets of complements to build a rich and balanced four-color palette.

#C7CACC

#CCC7CC

#CCC9C7

#C8CCC7

#C7CACC

#CCC7CC

#CCC9C7

#C8CCC7

Square

A square color scheme uses four colors evenly spaced on the color wheel. With French Gray, this method produces a vivid, high-contrast palette.

#C7CACC

#CCC7CC

#CCC9C7

#C8CCC7

#C7CACC

#CCC7CC

#CCC9C7

#C8CCC7

French Gray Contrast Simulation

Text Color

#

Background Color

#

12.75

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.

12.75

Super

Small Text
Pass
Large Text
Pass
Graphic Components
Pass

French Gray Color Variations

Shades

Adding black to French Gray creates shades, which introduce a sense of weight and gravity.

#C7CACC

#ABADAF

#8E9092

#727375

#555757

#393A3A

#1C1D1D

#000000

#C7CACC

#ABADAF

#8E9092

#727375

#555757

#393A3A

#1C1D1D

#000000

Tints

Tints are lighter versions of French Gray, created by adding white for a softer feel.

#C7CACC

#CFD2D3

#D7D9DB

#DFE1E2

#E7E8E9

#EFF0F0

#F7F7F8

#FFFFFF

#C7CACC

#CFD2D3

#D7D9DB

#DFE1E2

#E7E8E9

#EFF0F0

#F7F7F8

#FFFFFF

Tones

Tones are created by mixing French Gray with gray, producing softer, more subdued variations.

#C7CACC

#BDBFC1

#B3B5B6

#A9AAAB

#9EA0A1

#949596

#8A8B8B

#808080

#C7CACC

#BDBFC1

#B3B5B6

#A9AAAB

#9EA0A1

#949596

#8A8B8B

#808080

Hues

Hues are variations of French Gray, differing in intensity or temperature to create distinct moods.

#C7CACC

#C8C7CC

#CCC7CC

#CCC7C9

#CCC9C7

#CBCCC7

#C8CCC7

#C7CCCA

#C7CACC

#C8C7CC

#CCC7CC

#CCC7C9

#CCC9C7

#CBCCC7

#C8CCC7

#C7CCCA

What Interfaces Use Colors Like French Gray?

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