Nazwany kolor · #A1AEB1
Tempered Grey
Tempered Grey to #A1AEB1: rgb(161 174 177), hsl(191 9% 66%), oklch(0.742 0.015 213.1). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Gray mean? → · Tempered Grey color name →
#A1AEB1
oklch(0.742 0.015 213.1)
Konwersje koloru
- HEX
- #a1aeb1
- RGB
- rgb(161 174 177)
- HSL
- hsl(191 9% 66%)
- HWB
- hwb(191 63% 31%)
- OKLCH
- oklch(0.742 0.015 213.1)
- OKLab
- oklab(0.742 -0.013 -0.008)
- CIE Lab
- lab(70.13 -4.26 -3.19)
- LCH
- lch(70.13 5.32 216.8)
- CMYK
- cmyk(9% 2% 0% 31%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- AAB6B9
- B3BEC0
- BCC6C8
- C6CED0
- CFD6D7
- D9DEDF
- E2E6E7
- ECEEEF
- F5F7F7
Odcienie ciemniejsze
- 8B9799
- 768083
- 626A6C
- 4E5557
- 3C4142
- 2A2E2F
- 191C1C
- 090B0C
- 010101
Tony
- 9EA9AC
- 9AA5A7
- 97A0A2
- 949B9D
- 909798
- 8D9293
- 8A8E8E
- 87898A
- 838485
Harmonie kolorów
Komplementarna +180°
- A1AEB1
Tempered Grey
- B5A8A5
≈ Matte Grey
Analogowa -30° +30°
- A1AEB1
Tempered Grey
- A1AFAC
≈ Polaris
- A3ADB4
≈ Laundry Blue
Triada +120° +240°
- A1AEB1
Tempered Grey
- B2A8AF
≈ Stamina
- AEABA1
≈ Big Band
Komplementarna rozszczepiona +150° +210°
- A1AEB1
Tempered Grey
- B4A7AA
≈ Fashion Mauve
- B3A9A2
≈ Muted Mauve
Tetrada +90° +180° +270°
- A1AEB1
Tempered Grey
- ADA9B3
≈ Velvet Grey
- B5A8A5
≈ Matte Grey
- A9ADA3
≈ Laurel Grey
Kontrast i dostępność
Ag
FailNa bieli
WCAG 2.28:1 · APCA Lc 45
Ag
AAANa czerni
WCAG 9.20:1 · APCA Lc 57
Najlepszy kolor tekstu: #000000
WCAG 9.20:1 (AAA) · APCA Lc 57
Contrast pairs
Fragmenty kodu
CSS
:root {
--tempered-grey: #a1aeb1;
--tempered-grey-rgb: 161 174 177;
--tempered-grey-oklch: oklch(0.742 0.015 213.1);
}
.element {
color: var(--tempered-grey);
background-color: hsl(191 9% 66%);
border-color: oklch(0.742 0.015 213.1);
}Tailwind CSS v4
@theme {
--color-tempered-grey: #a1aeb1;
--color-tempered-grey-50: #f0f6f8;
--color-tempered-grey-100: #e2e9eb;
--color-tempered-grey-200: #cdd6d8;
--color-tempered-grey-300: #afb9bc;
--color-tempered-grey-400: #95a1a4;
--color-tempered-grey-500: #7b898c;
--color-tempered-grey-600: #687477;
--color-tempered-grey-700: #535d5f;
--color-tempered-grey-800: #3d4445;
--color-tempered-grey-900: #2a2f30;
--color-tempered-grey-950: #171b1c;
}SCSS
$tempered-grey: #a1aeb1;
$tempered-grey-rgb: 161, 174, 177;
$tempered-grey-light: mix(#fff, $tempered-grey, 20%);
$tempered-grey-dark: mix(#000, $tempered-grey, 20%);
.element {
color: $tempered-grey;
box-shadow: 0 0 0 2px rgba($tempered-grey, 0.35);
}