TechCompare LogoTechCompare
Showing centimeters. Press to switch to inches.Showing inches. Press to switch to centimeters.

#F8F9FA: Bootstrap light gray codes, contrast and shades

By TechCompare · Updated · How we check

#F8F9FA is rgb(248, 249, 250), the $gray-100 of Bootstrap 4 and 5 and the value behind its light theme color. Dark text belongs on it: black scores 19.92:1, white only 1.05:1.

#F8F9FA

Color Codes

  • HEX#F8F9FA
  • RGBrgb(248, 249, 250)
  • HSLhsl(210, 17%, 98%)
  • OKLCHoklch(98.16% 0.0017 247.84)

Text on #F8F9FA

White Text

Aa

The quick brown fox jumps over the lazy dog.

1.05:1APCA Lc 0.0

  • AA Normal (4.5:1)Fail
  • AA Large (3:1)Fail
  • AAA Normal (7:1)Fail
  • AAA Large (4.5:1)Fail
Check White Text in Contrast Checker

Black Text

Aa

The quick brown fox jumps over the lazy dog.

19.92:1APCA Lc 102.4

  • AA Normal (4.5:1)Pass
  • AA Large (3:1)Pass
  • AAA Normal (7:1)Pass
  • AAA Large (4.5:1)Pass
Check Black Text in Contrast Checker

WCAG 2 ratios are the same whichever color is the text, so they also hold for #F8F9FA text on a white or black page. APCA is a newer method that isn't part of any WCAG standard, and a minus sign means light text on dark.

#F8F9FA in the Color Picker. Tweak it with HSL or OKLCH sliders, or compare it with a second color.
Edit in the full tool

#F8F9FA mixes 248 red, 249 green and 250 blue, a near white with the faintest cool tint. Bootstrap calls it $gray-100, the lightest step of its gray scale, and sets its light theme color to it. So .bg-light, .btn-light and .table-light all start from #F8F9FA. The cards above give its codes and test white and black text on it. There's no room for lighter steps above it, so the shade scale below goes 8 steps darker.

Shades

Same hue and chroma in OKLCH, with even steps of lightness. Open any shade in the Color Picker.

  1. Base#F8F9FA
  2. #DCDDDE
  3. #C0C1C2
  4. #A5A6A7
  5. #8B8C8D
  6. #727374
  7. #5A5B5C
  8. #434445
  9. #2D2E2F

Nearest Named Colors

  • CSS Name

    ghostwhite

    #F8F8FF

    Very CloseΔE OK 0.008

  • Tailwind 4

    slate-50

    oklch(98.4% 0.003 247.858)

    Very CloseΔE OK 0.003

  • Tailwind 3

    gray-50

    #F9FAFB

    Very CloseΔE OK 0.003

About #F8F9FA

Bootstrap 5.3 added color modes, with background variables that follow them. $body-tertiary-bg is also $gray-100, so in light mode .bg-body-tertiary gives the same #F8F9FA. The two split in dark mode: .bg-body-tertiary switches to a dark gray, while .bg-light stays this pale color. If a light panel should turn dark along with the rest of the page, use .bg-body-tertiary.

Tailwind has no exact match. Tailwind 3's gray-50 (#F9FAFB) is 0.003 away in OKLab, close enough that you won't see a difference.

Against white, #F8F9FA sits only 1.05:1 away. A light panel on a white page reads as a soft tint, so give it a border if its edge matters. Text has plenty of room on it: black scores 19.92:1, past AAA at any size.

Verdict

Use #F8F9FA for light sections, cards, sidebars, table headers and secondary buttons, with dark text. Keep white text and white icons off it, at 1.05:1.

In the shade scale, white text first passes AA on the fifth darker step, #727374, at 4.75:1. The first darker step, #DCDDDE, makes a soft border or hover state and still takes black text at 15.44:1. Click a shade to open it in the Color Picker.

More Color scenarios

Hex to RGB
A hex color code is three RGB numbers written in base 16.
View details
RGB vs CMYK
Screens add light and print adds ink. See one color in both, and why a plain CMYK formula can't promise a print match.
View details
HSL color model
Hue, saturation and lightness, with three live sliders and a table of common colors in hex, RGB and HSL.
View details

Related guides

#F8FAFC
Tailwind's palest slate gray, an off white with a little more blue.
View guide
#F5F5F5
Whitesmoke, a neutral off white with no tint at all.
View guide
#FFFFFF
Pure white, and the gray text that still passes on it.
View guide
Hex to RGB
How the six digits of a hex code turn into red, green and blue.
View guide

Frequently asked questions

What color is #F8F9FA?
An off white with a slight cool tint: rgb(248, 249, 250), hsl(210, 17%, 98%) or oklch(98.16% 0.0017 247.84). In Bootstrap it's $gray-100 and the light theme color. CSS has no name for it. The nearest is ghostwhite (#F8F8FF), 0.008 away in OKLab.
Is #F8F9FA the same as Bootstrap's bg-light?
Yes. Bootstrap sets $light to $gray-100, which is #F8F9FA, so .bg-light, .text-bg-light and .btn-light all use it unless you change the variable. In 5.3's dark mode .bg-light keeps this color, while .bg-body-tertiary turns dark.
What's the difference between #F8F9FA and #F8FAFC?
#F8FAFC is Tailwind's slate-50. It has a little more blue (252 against 250), so it's slightly cooler. Side by side they're hard to tell apart.

Related tools

Contrast Checker

Check color contrast ratios for WCAG AA/AAA accessibility compliance.

Use tool

JSON Formatter

Validate, format, and minify JSON. Browse it as a tree, run JSONPath queries, compare two documents, or validate against a JSON Schema.

Use tool

Aspect Ratio Visualizer

Visually compare width differences between 16:9, 21:9, and 32:9 monitors.

Use tool