Adlandırılmış renk · #C4C2BC
San Francisco Fog
San Francisco Fog, #C4C2BC: rgb(196 194 188), hsl(45 6% 75%), oklch(0.814 0.009 91.5). Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
What does Gray mean? → · San Francisco Fog color name →
#C4C2BC
oklch(0.814 0.009 91.5)
Renk dönüşümleri
- HEX
- #c4c2bc
- RGB
- rgb(196 194 188)
- HSL
- hsl(45 6% 75%)
- HWB
- hwb(45 74% 23%)
- OKLCH
- oklch(0.814 0.009 91.5)
- OKLab
- oklab(0.814 0 0.009)
- CIE Lab
- lab(78.46 -0.08 3.29)
- LCH
- lch(78.46 3.29 91.5)
- CMYK
- cmyk(0% 1% 4% 23%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- CAC8C3
- D0CEC9
- D5D4D0
- DBDAD6
- E1E0DD
- E7E6E4
- EDECEB
- F3F3F1
- F9F9F8
Koyu tonlar
- AAA8A3
- 918F8B
- 787773
- 61605D
- 4A4947
- 353432
- 21201F
- 0E0E0D
- 020202
Gri tonlar
- BDBBB6
- B6B4B0
- AFAEAA
- A8A7A4
- A1A09D
- 9B9A98
- 949392
- 8D8D8C
- 878686
Renk uyumları
Tamamlayıcı +180°
- C4C2BC
San Francisco Fog
- C0C2C8
≈ Mote of Dust
Analog -30° +30°
- C4C2BC
San Francisco Fog
- C6C1BD
≈ Gallery Grey
- C1C3BD
≈ Gull Feather
Üçlü +120° +240°
- C4C2BC
San Francisco Fog
- BCC4C5
≈ Silver Whiskers
- C6C0C5
≈ Whisper Soft
Bölünmüş tamamlayıcı +150° +210°
- C4C2BC
San Francisco Fog
- BDC3C7
≈ Metallic
- C3C1C7
≈ Mote of Dust
Dörtlü +90° +180° +270°
- C4C2BC
San Francisco Fog
- BCC4C2
≈ Polished Rock
- C0C2C8
≈ Mote of Dust
- C7C0C2
≈ Easter Rabbit
Kontrast ve erişilebilirlik
Ag
FailBeyaz üzerinde
WCAG 1.78:1 · APCA Lc 33
Ag
AAASiyah üzerinde
WCAG 11.79:1 · APCA Lc 70
En iyi metin rengi: #000000
WCAG 11.79:1 (AAA) · APCA Lc 70
Contrast pairs
Kod parçacıkları
CSS
:root {
--san-francisco-fog: #c4c2bc;
--san-francisco-fog-rgb: 196 194 188;
--san-francisco-fog-oklch: oklch(0.814 0.009 91.5);
}
.element {
color: var(--san-francisco-fog);
background-color: hsl(45 6% 75%);
border-color: oklch(0.814 0.009 91.5);
}Tailwind CSS v4
@theme {
--color-san-francisco-fog: #c4c2bc;
--color-san-francisco-fog-50: #f6f5f2;
--color-san-francisco-fog-100: #e9e8e5;
--color-san-francisco-fog-200: #d5d4d0;
--color-san-francisco-fog-300: #b9b7b2;
--color-san-francisco-fog-400: #a09e99;
--color-san-francisco-fog-500: #888680;
--color-san-francisco-fog-600: #73716c;
--color-san-francisco-fog-700: #5c5b56;
--color-san-francisco-fog-800: #43423f;
--color-san-francisco-fog-900: #2f2e2b;
--color-san-francisco-fog-950: #1b1a19;
}SCSS
$san-francisco-fog: #c4c2bc;
$san-francisco-fog-rgb: 196, 194, 188;
$san-francisco-fog-light: mix(#fff, $san-francisco-fog, 20%);
$san-francisco-fog-dark: mix(#000, $san-francisco-fog, 20%);
.element {
color: $san-francisco-fog;
box-shadow: 0 0 0 2px rgba($san-francisco-fog, 0.35);
}