Nazwany kolor · #4D495B
House Stark Grey
House Stark Grey to #4D495B: rgb(77 73 91), hsl(253 11% 32%), oklch(0.416 0.03 295.3). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Gray mean? → · House Stark Grey color name →
#4D495B
oklch(0.416 0.03 295.3)
Konwersje koloru
- HEX
- #4d495b
- RGB
- rgb(77 73 91)
- HSL
- hsl(253 11% 32%)
- HWB
- hwb(253 29% 64%)
- OKLCH
- oklch(0.416 0.03 295.3)
- OKLab
- oklab(0.416 0.013 -0.027)
- CIE Lab
- lab(31.95 4.84 -10.05)
- LCH
- lch(31.95 11.16 295.7)
- CMYK
- cmyk(15% 20% 0% 64%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- 5D596A
- 6D6A79
- 7E7B89
- 908D99
- A19FAA
- B3B2BA
- C6C5CB
- D9D8DC
- ECEBED
Odcienie ciemniejsze
- 423E4E
- 373441
- 2C2A35
- 222029
- 18171E
- 0F0E13
- 070609
- 020203
- 000000
Tony
- 524E5F
- 575462
- 5C5966
- 615E6A
- 66646D
- 6B6971
- 706F75
- 757579
- 7B7A7C
Harmonie kolorów
Komplementarna +180°
- 4D495B
House Stark Grey
- 4B4E3C
≈ Kelp
Analogowa -30° +30°
- 4D495B
House Stark Grey
- 444C5D
≈ Night Flight
- 554755
≈ Napa Harvest
Triada +120° +240°
- 4D495B
House Stark Grey
- 59483D
≈ Momentous Occasion
- 3B524B
≈ Heavy Black Green
Komplementarna rozszczepiona +150° +210°
- 4D495B
House Stark Grey
- 544B39
≈ Metallic Bronze
- 425142
≈ Pine Forest
Tetrada +90° +180° +270°
- 4D495B
House Stark Grey
- 5C4644
≈ Embarcadero
- 4B4E3C
≈ Kelp
- 395154
≈ Mountain Pine
Kontrast i dostępność
Ag
AAANa bieli
WCAG 8.67:1 · APCA Lc 90
Ag
FailNa czerni
WCAG 2.41:1 · APCA Lc 12
Najlepszy kolor tekstu: #FFFFFF
WCAG 8.67:1 (AAA) · APCA Lc 90
Contrast pairs
Fragmenty kodu
CSS
:root {
--house-stark-grey: #4d495b;
--house-stark-grey-rgb: 77 73 91;
--house-stark-grey-oklch: oklch(0.416 0.03 295.3);
}
.element {
color: var(--house-stark-grey);
background-color: hsl(253 11% 32%);
border-color: oklch(0.416 0.03 295.3);
}Tailwind CSS v4
@theme {
--color-house-stark-grey: #4d495b;
--color-house-stark-grey-50: #f6f3fd;
--color-house-stark-grey-100: #e9e6f1;
--color-house-stark-grey-200: #d5d2e0;
--color-house-stark-grey-300: #b9b4c5;
--color-house-stark-grey-400: #9f9baf;
--color-house-stark-grey-500: #878398;
--color-house-stark-grey-600: #726f81;
--color-house-stark-grey-700: #5c5867;
--color-house-stark-grey-800: #43414c;
--color-house-stark-grey-900: #2e2c35;
--color-house-stark-grey-950: #1b1a20;
}SCSS
$house-stark-grey: #4d495b;
$house-stark-grey-rgb: 77, 73, 91;
$house-stark-grey-light: mix(#fff, $house-stark-grey, 20%);
$house-stark-grey-dark: mix(#000, $house-stark-grey, 20%);
.element {
color: $house-stark-grey;
box-shadow: 0 0 0 2px rgba($house-stark-grey, 0.35);
}