Najbliższy nazwany kolor · #4C579E
#4C579E
Najbliższy nazwany kolor: Piccadilly Purple
#4C579E (rgb(76 87 158), hsl(232 35% 46%), oklch(0.483 0.114 274.7)) jest najbliższy nazwanemu kolorowi Piccadilly Purple. Zobacz odcienie, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
#4C579E
oklch(0.483 0.114 274.7)
Konwersje koloru
- HEX
- #4c579e
- RGB
- rgb(76 87 158)
- HSL
- hsl(232 35% 46%)
- HWB
- hwb(232 30% 38%)
- OKLCH
- oklch(0.483 0.114 274.7)
- OKLab
- oklab(0.483 0.009 -0.114)
- CIE Lab
- lab(38.75 11.65 -40.72)
- LCH
- lch(38.75 42.36 286)
- CMYK
- cmyk(52% 45% 0% 38%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- 5C67A8
- 6C78B2
- 7D88BC
- 8E98C6
- A0A9D0
- B2BADA
- C5CBE3
- D8DCEC
- EBEDF6
Odcienie ciemniejsze
- 414B89
- 363E74
- 2C3360
- 22274D
- 181C3A
- 0F1229
- 060818
- 020309
- 000001
Tony
- 515C9C
- 566099
- 5B6496
- 606994
- 656D91
- 6A718E
- 6F758A
- 757987
- 7A7C84
Harmonie kolorów
Komplementarna +180°
- 4C579E
Piccadilly Purple
- 705D00
≈ Hot Mustard
Analogowa -30° +30°
- 4C579E
Piccadilly Purple
- 10639A
≈ Atlantic Mystique
- 6D4C92
≈ Grapes of Italy
Triada +120° +240°
- 4C579E
Piccadilly Purple
- 93422F
≈ Brick Paver
- 107140
≈ Diisha Green
Komplementarna rozszczepiona +150° +210°
- 4C579E
Piccadilly Purple
- 874F00
≈ Medium Brown
- 50690F
≈ Serrano Pepper
Tetrada +90° +180° +270°
- 4C579E
Piccadilly Purple
- 913F56
≈ Umemurasaki Purple
- 705D00
≈ Hot Mustard
- 006E64
≈ Deep Pacific
Kontrast i dostępność
Ag
AANa bieli
WCAG 6.63:1 · APCA Lc 83
Ag
FailNa czerni
WCAG 3.16:1 · APCA Lc 19
Najlepszy kolor tekstu: #FFFFFF
WCAG 6.63:1 (AA) · APCA Lc 83
Contrast pairs
Fragmenty kodu
CSS
:root {
--piccadilly-purple: #4c579e;
--piccadilly-purple-rgb: 76 87 158;
--piccadilly-purple-oklch: oklch(0.483 0.114 274.7);
}
.element {
color: var(--piccadilly-purple);
background-color: hsl(232 35% 46%);
border-color: oklch(0.483 0.114 274.7);
}Tailwind CSS v4
@theme {
--color-piccadilly-purple: #4c579e;
--color-piccadilly-purple-50: #ecf3ff;
--color-piccadilly-purple-100: #dde5ff;
--color-piccadilly-purple-200: #c7d1ff;
--color-piccadilly-purple-300: #a8b3f2;
--color-piccadilly-purple-400: #8a99e2;
--color-piccadilly-purple-500: #707fd1;
--color-piccadilly-purple-600: #5f6bb0;
--color-piccadilly-purple-700: #4c568e;
--color-piccadilly-purple-800: #353f6a;
--color-piccadilly-purple-900: #242b4a;
--color-piccadilly-purple-950: #131831;
}SCSS
$piccadilly-purple: #4c579e;
$piccadilly-purple-rgb: 76, 87, 158;
$piccadilly-purple-light: mix(#fff, $piccadilly-purple, 20%);
$piccadilly-purple-dark: mix(#000, $piccadilly-purple, 20%);
.element {
color: $piccadilly-purple;
box-shadow: 0 0 0 2px rgba($piccadilly-purple, 0.35);
}