Fog color palette
Five pale grays with no tint, from almost-white #FAFAFA to a mid silver, #A0A0A0. They're too light to carry text, and that's their use: these are the background, border and divider colors that sit under a design without drawing the eye. Skeleton loaders, form fields and table stripes all live here. Pair them with dark text and one brand accent. Nearly every SaaS app and online store needs grays like these somewhere.
Fog palette in use
Use #FAFAFA as the page, #F0F0F0 for alternating rows and skeleton loaders, and #E0E0E0 for borders. #C0C0C0 suits disabled buttons and #A0A0A0 icons, with near-black text on top.
This pair measures 20.11:1, so it works for body text too. The button uses #F0F0F0 with black text.
ButtonGood for
- SaaS app backgrounds
- Skeleton loading states
- E-commerce product grid
- Form field styling
Readable color pairs
No two colors in this palette reach 3:1 contrast, so use it for backgrounds and shapes, and set text in white or black. Check any pair in the contrast checker.
Fog palette as code
CSS variables
:root {
--fog-1: #FAFAFA;
--fog-2: #F0F0F0;
--fog-3: #E0E0E0;
--fog-4: #C0C0C0;
--fog-5: #A0A0A0;
}Tailwind v4
@theme {
--color-fog-1: #FAFAFA;
--color-fog-2: #F0F0F0;
--color-fog-3: #E0E0E0;
--color-fog-4: #C0C0C0;
--color-fog-5: #A0A0A0;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'fog': {
100: '#FAFAFA',
200: '#F0F0F0',
300: '#E0E0E0',
400: '#C0C0C0',
500: '#A0A0A0',
},SCSS
$fog-1: #FAFAFA;
$fog-2: #F0F0F0;
$fog-3: #E0E0E0;
$fog-4: #C0C0C0;
$fog-5: #A0A0A0;JSON
["#FAFAFA","#F0F0F0","#E0E0E0","#C0C0C0","#A0A0A0"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.