Nazwany kolor · #4D4456
Violet Intense
Violet Intense to #4D4456: rgb(77 68 86), hsl(270 12% 30%), oklch(0.403 0.032 307.6). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Gray mean? → · Violet Intense color name →
#4D4456
oklch(0.403 0.032 307.6)
Konwersje koloru
- HEX
- #4d4456
- RGB
- rgb(77 68 86)
- HSL
- hsl(270 12% 30%)
- HWB
- hwb(270 27% 66%)
- OKLCH
- oklch(0.403 0.032 307.6)
- OKLab
- oklab(0.403 0.019 -0.025)
- CIE Lab
- lab(30.3 6.94 -9.33)
- LCH
- lch(30.3 11.62 306.6)
- CMYK
- cmyk(10% 21% 0% 66%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- 5D5565
- 6D6675
- 7E7885
- 908A96
- A19CA7
- B3AFB8
- C6C3C9
- D9D6DB
- ECEBED
Odcienie ciemniejsze
- 423A4A
- 37303E
- 2C2632
- 221D27
- 18141C
- 0F0C12
- 070508
- 020202
- 000000
Tony
- 524A5A
- 57505E
- 5C5562
- 615B67
- 66616B
- 6B676F
- 706D73
- 757477
- 7B7A7C
Harmonie kolorów
Komplementarna +180°
- 4D4456
Violet Intense
- 434C39
≈ Hōjicha
Analogowa -30° +30°
- 4D4456
Violet Intense
- 44475A
≈ Blue Nights
- 54424F
≈ Punchit Purple
Triada +120° +240°
- 4D4456
Violet Intense
- 544536
≈ Well-Bred Brown
- 344E4B
≈ Silk Crepe Grey
Komplementarna rozszczepiona +150° +210°
- 4D4456
Violet Intense
- 4D4935
≈ Olive Leaf
- 3A4E42
≈ Amphitrite
Tetrada +90° +180° +270°
- 4D4456
Violet Intense
- 58433C
≈ Cordovan Leather
- 434C39
≈ Hōjicha
- 354D54
≈ Iron Head
Kontrast i dostępność
Ag
AAANa bieli
WCAG 9.22:1 · APCA Lc 91
Ag
FailNa czerni
WCAG 2.27:1 · APCA Lc 11
Najlepszy kolor tekstu: #FFFFFF
WCAG 9.22:1 (AAA) · APCA Lc 91
Contrast pairs
Fragmenty kodu
CSS
:root {
--violet-intense: #4d4456;
--violet-intense-rgb: 77 68 86;
--violet-intense-oklch: oklch(0.403 0.032 307.6);
}
.element {
color: var(--violet-intense);
background-color: hsl(270 12% 30%);
border-color: oklch(0.403 0.032 307.6);
}Tailwind CSS v4
@theme {
--color-violet-intense: #4d4456;
--color-violet-intense-50: #f8f3fc;
--color-violet-intense-100: #ebe5f0;
--color-violet-intense-200: #d8d1df;
--color-violet-intense-300: #bcb3c4;
--color-violet-intense-400: #a39aad;
--color-violet-intense-500: #8c8197;
--color-violet-intense-600: #766d80;
--color-violet-intense-700: #5f5766;
--color-violet-intense-800: #45404b;
--color-violet-intense-900: #302c34;
--color-violet-intense-950: #1c1920;
}SCSS
$violet-intense: #4d4456;
$violet-intense-rgb: 77, 68, 86;
$violet-intense-light: mix(#fff, $violet-intense, 20%);
$violet-intense-dark: mix(#000, $violet-intense, 20%);
.element {
color: $violet-intense;
box-shadow: 0 0 0 2px rgba($violet-intense, 0.35);
}