Nazwany kolor · #F4F2F4
White Convolvulus
White Convolvulus to #F4F2F4: rgb(244 242 244), hsl(300 8% 95%), oklch(0.963 0.003 325.6). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Gray mean? → · White Convolvulus color name →
#F4F2F4
oklch(0.963 0.003 325.6)
Konwersje koloru
- HEX
- #f4f2f4
- RGB
- rgb(244 242 244)
- HSL
- hsl(300 8% 95%)
- HWB
- hwb(300 95% 4%)
- OKLCH
- oklch(0.963 0.003 325.6)
- OKLab
- oklab(0.963 0.003 -0.002)
- CIE Lab
- lab(95.69 0.95 -0.72)
- LCH
- lch(95.69 1.19 323)
- CMYK
- cmyk(0% 1% 0% 4%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- F5F3F5
- F6F5F6
- F7F6F7
- F8F7F8
- F9F8F9
- FBFAFB
- FCFBFC
- FDFCFD
- FEFEFE
Odcienie ciemniejsze
- D4D2D4
- B5B4B5
- 979697
- 7A797A
- 5E5E5E
- 444344
- 2B2B2B
- 141414
- 030303
Tony
- E8E6E8
- DCDADC
- D0CED0
- C4C3C4
- B8B7B8
- ADACAD
- A1A1A1
- 969696
- 8B8B8B
Harmonie kolorów
Komplementarna +180°
- F4F2F4
White Convolvulus
- F1F3F1
≈ Tell Me a Secret
Analogowa -30° +30°
- F4F2F4
White Convolvulus
- F3F2F5
≈ White Convolvulus
- F5F2F3
≈ White Convolvulus
Triada +120° +240°
- F4F2F4
White Convolvulus
- F4F3F0
≈ Classic Chalk
- F0F3F4
≈ Zappy Zebra
Komplementarna rozszczepiona +150° +210°
- F4F2F4
White Convolvulus
- F3F3F1
≈ Bleached Silk
- F1F4F3
≈ Bakery Box
Tetrada +90° +180° +270°
- F4F2F4
White Convolvulus
- F5F2F1
≈ Bright White
- F1F3F1
≈ Tell Me a Secret
- F1F3F5
≈ Anti-Flash White
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.11:1 · APCA Lc 0
Ag
AAANa czerni
WCAG 18.85:1 · APCA Lc 100
Najlepszy kolor tekstu: #000000
WCAG 18.85:1 (AAA) · APCA Lc 100
Contrast pairs
Fragmenty kodu
CSS
:root {
--white-convolvulus: #f4f2f4;
--white-convolvulus-rgb: 244 242 244;
--white-convolvulus-oklch: oklch(0.963 0.003 325.6);
}
.element {
color: var(--white-convolvulus);
background-color: hsl(300 8% 95%);
border-color: oklch(0.963 0.003 325.6);
}Tailwind CSS v4
@theme {
--color-white-convolvulus: #f4f2f4;
--color-white-convolvulus-50: #f6f5f5;
--color-white-convolvulus-100: #e8e7e8;
--color-white-convolvulus-200: #d5d4d5;
--color-white-convolvulus-300: #b8b7b8;
--color-white-convolvulus-400: #9f9e9f;
--color-white-convolvulus-500: #878587;
--color-white-convolvulus-600: #727172;
--color-white-convolvulus-700: #5c5a5c;
--color-white-convolvulus-800: #434243;
--color-white-convolvulus-900: #2e2d2e;
--color-white-convolvulus-950: #1b1a1b;
}SCSS
$white-convolvulus: #f4f2f4;
$white-convolvulus-rgb: 244, 242, 244;
$white-convolvulus-light: mix(#fff, $white-convolvulus, 20%);
$white-convolvulus-dark: mix(#000, $white-convolvulus, 20%);
.element {
color: $white-convolvulus;
box-shadow: 0 0 0 2px rgba($white-convolvulus, 0.35);
}