Nazwany kolor · #676A6A
Imperial Grey
Imperial Grey to #676A6A: rgb(103 106 106), hsl(180 1% 41%), oklch(0.522 0.004 197). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Gray mean? → · Imperial Grey color name →
#676A6A
oklch(0.522 0.004 197)
Konwersje koloru
- HEX
- #676a6a
- RGB
- rgb(103 106 106)
- HSL
- hsl(180 1% 41%)
- HWB
- hwb(180 40% 58%)
- OKLCH
- oklch(0.522 0.004 197)
- OKLab
- oklab(0.522 -0.004 -0.001)
- CIE Lab
- lab(44.55 -1.2 -0.43)
- LCH
- lch(44.55 1.27 199.5)
- CMYK
- cmyk(3% 0% 0% 58%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- 757878
- 838686
- 929494
- A1A3A3
- B0B2B2
- BFC1C1
- CFD0D0
- DFDFDF
- EFEFEF
Odcienie ciemniejsze
- 595B5B
- 4B4D4D
- 3D3F3F
- 303131
- 232424
- 171818
- 0C0D0D
- 040404
- 000000
Tony
- 696C6C
- 6C6E6E
- 6E7171
- 717373
- 737575
- 767777
- 787979
- 7B7C7C
- 7D7E7E
Harmonie kolorów
Komplementarna +180°
- 676A6A
Imperial Grey
- 6B6868
≈ Dotted Dove
Analogowa -30° +30°
- 676A6A
Imperial Grey
- 676A69
≈ Molten Lead
- 676A6B
≈ Imperial Grey
Triada +120° +240°
- 676A6A
Imperial Grey
- 6A696B
≈ Scapa Flow
- 6B6967
≈ Not so Innocent
Komplementarna rozszczepiona +150° +210°
- 676A6A
Imperial Grey
- 6B686A
≈ Granite Grey
- 6B6968
≈ Not so Innocent
Tetrada +90° +180° +270°
- 676A6A
Imperial Grey
- 69696B
≈ Dim Grey
- 6B6868
≈ Dotted Dove
- 696967
≈ Not so Innocent
Kontrast i dostępność
Ag
AANa bieli
WCAG 5.45:1 · APCA Lc 77
Ag
FailNa czerni
WCAG 3.84:1 · APCA Lc 24
Najlepszy kolor tekstu: #FFFFFF
WCAG 5.45:1 (AA) · APCA Lc 77
Contrast pairs
Fragmenty kodu
CSS
:root {
--imperial-grey: #676a6a;
--imperial-grey-rgb: 103 106 106;
--imperial-grey-oklch: oklch(0.522 0.004 197);
}
.element {
color: var(--imperial-grey);
background-color: hsl(180 1% 41%);
border-color: oklch(0.522 0.004 197);
}Tailwind CSS v4
@theme {
--color-imperial-grey: #676a6a;
--color-imperial-grey-50: #f4f5f5;
--color-imperial-grey-100: #e6e8e8;
--color-imperial-grey-200: #d2d5d5;
--color-imperial-grey-300: #b5b8b8;
--color-imperial-grey-400: #9c9f9f;
--color-imperial-grey-500: #838787;
--color-imperial-grey-600: #6f7272;
--color-imperial-grey-700: #595b5b;
--color-imperial-grey-800: #414343;
--color-imperial-grey-900: #2d2e2e;
--color-imperial-grey-950: #1a1b1b;
}SCSS
$imperial-grey: #676a6a;
$imperial-grey-rgb: 103, 106, 106;
$imperial-grey-light: mix(#fff, $imperial-grey, 20%);
$imperial-grey-dark: mix(#000, $imperial-grey, 20%);
.element {
color: $imperial-grey;
box-shadow: 0 0 0 2px rgba($imperial-grey, 0.35);
}