ع

Surface Gray

رمادي الأسطح

Color codes

HEX
RGB
HSL
HSV
CMYK (approximate)
CIELAB
CSS
Relative luminance0.9143
White & Off-white Web & UI ColorsNeutral Colors Neutral

Shades of Surface Gray

All shades

Lighter

Darker

Tints mixed with white

Tones mixed with gray

Color harmonies

Complementary

Opposite on the wheel (180°): maximum contrast for accents.

Export
Analogous

Neighbors 30° apart: calm and natural.

Export
Triadic

Three hues 120° apart: vibrant yet balanced.

Export
Split-complementary

The base plus the two neighbors of its complement: contrast with less tension.

Export
Tetradic

Four hues 90° apart: rich, best with one dominant color.

Export
Monochromatic

One hue in several lightness levels: elegant and consistent.

Export

Contrast and readability

White text1.09:1
✗ AA✗ AAA✗ AA Large
Black text19.29:1
✓ AA✓ AAA✓ AA Large
On white1.09:1
✗ AA✗ AAA✗ AA Large
On black17.34:1
✓ AA✓ AAA✓ AA Large

Text colors that pass AA

Check in the contrast checker

In a design

Plan your next project

A short paragraph shows how body text sits next to the color.

Get started Learn more
New

Cards and badges use a soft tint of the color. Read more

Plan your next project

A short paragraph shows how body text sits next to the color.

Get started
New

Cards and badges use a soft tint of the color.

Surface Gray

Full-color background with readable text.

Get started

About Surface Gray

Surface Gray (#F5F5F7) is a very light, nearly neutral color from the White family with a neutral character. It is made of 245 red, 245 green and 247 blue (hsl(240, 11%, 96%)). Its contrast ratio is 1.09:1 against white and 19.29:1 against black, so dark text reads best on it.

Suggested uses

  • page and card backgrounds
  • walls in bright, airy rooms
  • balancing stronger accent colors

Reading the codes

In HEX, #F5F5F7 stores red, green and blue as pairs of base-16 digits: 245, 245 and 247 out of 255. In HSL the same color has a hue of 240°, 11% saturation and 96% lightness, which makes lighter or darker variants easy to create by changing only the lightness.

Similar colors

#F5F5F5White Smoke#F4F8FBCool White#FFFFFFWhite#F8F8FFGhost White#FFFAFASnow#FAF9F6Off White#F2F0EBMarble White#F0F8FFAlice Blue#E5E4E2Platinum#DCDCDCGainsboro

Palettes with this color

Clean Blog#FFFFFF #F3F4F6 #374151 #111827 #2563EBDusty Blue Ceremony#F4F6F8 #CFD9E2 #9FB3C8 #61789A #D6B88FSilver Morning#F7F9FB #E1E6EB #B8C2CC #7A8794 #3E4A56Product Launch#111827 #4F46E5 #22D3EE #F9FAFB #F43F5E

Tools for this color

Shades GeneratorGenerate tints, tones, lighter and darker shades and saturation variations.Contrast CheckerAccurate WCAG contrast ratio with AA/AAA results and accessible suggestions.Color Harmony GeneratorComplementary, analogous, triadic, tetradic, split-complementary and monochromatic harmonies.Color Blindness SimulatorApproximate protanopia, deuteranopia, tritanopia and achromatopsia simulations.

Frequently asked questions

What is the HEX code of Surface Gray?
The HEX code of Surface Gray is #F5F5F7. In RGB it is rgb(245, 245, 247) and in HSL hsl(240, 11%, 96%).
Which text color works on Surface Gray?
White text has a contrast ratio of 1.09:1 on Surface Gray and black text 19.29:1, so black text is more readable. WCAG AA needs at least 4.5:1 for normal text.
What is the complementary color of Surface Gray?
Rotating the hue of Surface Gray by 180° gives #F7F7F5, its complementary color on the RGB color wheel.
What is Surface Gray in CMYK?
An approximate CMYK value for Surface Gray is cmyk(1%, 1%, 0%, 3%). For printing, ask your printer for an ICC-profiled conversion.