Named color · #C0C3C4
Foil
Foil is #C0C3C4: rgb(192 195 196), hsl(195 3% 76%), oklch(0.815 0.004 219.5). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Gray mean? → · Foil color name →
#C0C3C4
oklch(0.815 0.004 219.5)
Color conversions
- HEX
- #c0c3c4
- RGB
- rgb(192 195 196)
- HSL
- hsl(195 3% 76%)
- HWB
- hwb(195 75% 23%)
- OKLCH
- oklch(0.815 0.004 219.5)
- OKLab
- oklab(0.815 -0.003 -0.002)
- CIE Lab
- lab(78.58 -0.94 -0.89)
- LCH
- lch(78.58 1.29 223.5)
- CMYK
- cmyk(2% 1% 0% 23%)
Tints · Shades · Tones
Tints
- C6C9CA
- CCCFD0
- D3D5D5
- D9DBDB
- DFE1E1
- E5E7E7
- ECEDED
- F2F3F3
- F9F9F9
Shades
- A7A9AA
- 8E9091
- 767878
- 5F6061
- 494A4A
- 343435
- 202021
- 0E0E0E
- 020202
Tones
- B9BCBD
- B3B5B6
- ACAEAF
- A6A8A8
- 9FA1A1
- 999A9B
- 939494
- 8C8D8D
- 868687
Color harmonies
Complementary +180°
- C0C3C4
Foil
- C5C2C1
≈ Place of Dust
Analogous -30° +30°
- C0C3C4
Foil
- C0C3C3
≈ Foil
- C1C3C5
≈ Foil
Triadic +120° +240°
- C0C3C4
Foil
- C4C2C3
≈ Magnesium
- C3C2C0
≈ Gallery Grey
Split-complementary +150° +210°
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
FailOn white
WCAG 1.77:1 · APCA Lc 33
Ag
AAAOn black
WCAG 11.84:1 · APCA Lc 70
Best text color: #000000
WCAG 11.84:1 (AAA) · APCA Lc 70
Contrast pairs
Code snippets
CSS
:root {
--foil: #c0c3c4;
--foil-rgb: 192 195 196;
--foil-oklch: oklch(0.815 0.004 219.5);
}
.element {
color: var(--foil);
background-color: hsl(195 3% 76%);
border-color: oklch(0.815 0.004 219.5);
}Tailwind CSS v4
@theme {
--color-foil: #c0c3c4;
--color-foil-50: #f4f5f6;
--color-foil-100: #e6e8e9;
--color-foil-200: #d2d4d5;
--color-foil-300: #b5b8b9;
--color-foil-400: #9c9fa0;
--color-foil-500: #848788;
--color-foil-600: #6f7273;
--color-foil-700: #595b5c;
--color-foil-800: #414343;
--color-foil-900: #2d2e2e;
--color-foil-950: #1a1b1b;
}SCSS
$foil: #c0c3c4;
$foil-rgb: 192, 195, 196;
$foil-light: mix(#fff, $foil, 20%);
$foil-dark: mix(#000, $foil, 20%);
.element {
color: $foil;
box-shadow: 0 0 0 2px rgba($foil, 0.35);
}