Nazwany kolor · #F1F1E5
Shattered White
Shattered White to #F1F1E5: rgb(241 241 229), hsl(60 30% 92%), oklch(0.955 0.016 106.7). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Gray mean? → · Shattered White color name →
#F1F1E5
oklch(0.955 0.016 106.7)
Konwersje koloru
- HEX
- #f1f1e5
- RGB
- rgb(241 241 229)
- HSL
- hsl(60 30% 92%)
- HWB
- hwb(60 90% 5%)
- OKLCH
- oklch(0.955 0.016 106.7)
- OKLab
- oklab(0.955 -0.005 0.015)
- CIE Lab
- lab(94.9 -1.54 5.82)
- LCH
- lch(94.9 6.02 104.9)
- CMYK
- cmyk(0% 0% 5% 5%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- F2F2E8
- F4F4EA
- F5F5ED
- F7F7EF
- F8F8F2
- F9F9F5
- FBFBF7
- FCFCFA
- FEFEFC
Odcienie ciemniejsze
- D2D2C7
- B3B3AA
- 95958E
- 797972
- 5D5D58
- 43433F
- 2B2B28
- 141412
- 030303
Tony
- E5E5DA
- D9D9D0
- CECEC6
- C2C2BB
- B7B7B1
- ACACA7
- A0A19D
- 969693
- 8B8B8A
Harmonie kolorów
Komplementarna +180°
- F1F1E5
Shattered White
- EFEFFB
≈ Foundation White
Analogowa -30° +30°
- F1F1E5
Shattered White
- F6EFE5
≈ White Beach
- EBF3E8
≈ Glacier Ivy
Triada +120° +240°
- F1F1E5
Shattered White
- E6F3F8
≈ Milky Way
- F9ECF2
≈ Sentimental Pink
Komplementarna rozszczepiona +150° +210°
- F1F1E5
Shattered White
- E9F1FB
≈ First Snow
- F4EDF7
≈ Sentimental Pink
Tetrada +90° +180° +270°
- F1F1E5
Shattered White
- E5F4F4
≈ Milky Way
- EFEFFB
≈ Foundation White
- FBECEC
≈ Placebo Red
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.13:1 · APCA Lc 0
Ag
AAANa czerni
WCAG 18.45:1 · APCA Lc 98
Najlepszy kolor tekstu: #000000
WCAG 18.45:1 (AAA) · APCA Lc 98
Contrast pairs
Fragmenty kodu
CSS
:root {
--shattered-white: #f1f1e5;
--shattered-white-rgb: 241 241 229;
--shattered-white-oklch: oklch(0.955 0.016 106.7);
}
.element {
color: var(--shattered-white);
background-color: hsl(60 30% 92%);
border-color: oklch(0.955 0.016 106.7);
}Tailwind CSS v4
@theme {
--color-shattered-white: #f1f1e5;
--color-shattered-white-50: #f5f5f0;
--color-shattered-white-100: #e8e8e2;
--color-shattered-white-200: #d4d5cd;
--color-shattered-white-300: #b8b8af;
--color-shattered-white-400: #9f9f95;
--color-shattered-white-500: #87877b;
--color-shattered-white-600: #727268;
--color-shattered-white-700: #5b5b53;
--color-shattered-white-800: #43433d;
--color-shattered-white-900: #2e2e2a;
--color-shattered-white-950: #1b1b17;
}SCSS
$shattered-white: #f1f1e5;
$shattered-white-rgb: 241, 241, 229;
$shattered-white-light: mix(#fff, $shattered-white, 20%);
$shattered-white-dark: mix(#000, $shattered-white, 20%);
.element {
color: $shattered-white;
box-shadow: 0 0 0 2px rgba($shattered-white, 0.35);
}